Professional Magazine Blogger Templates Read More ×

Sunday, April 19, 2015

Simple Digital Clock For Blogger/Website

JSC Result 2016

www.nuedubd.com/jsc16

JSC Result 2016 will publish on 31th December 2016 Under Ministry of Education, Bangladesh. Check Your JSC Exam Result 2016 FAST!

Simple Digital Clock For Blogger/Website - in this tutorial i will share, how to share a simple digital clock in blogger blog. This is simple part of blogger.

This part is not important for your blog. This is a just beauty of a blog. You use this trick in every website like wordpress. 



At first you seen which widget? Right, This is our tutorial of this post. Now come to the main part. Before starting work, please keep a backup file of your template then start work.

Now starting: Click on Template > Edit HTML Then hit "Ctrl+F" and search  </style> copy past below CSS code before  </style> Tag.
#realtime {
    font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-weight: 700;
    display: block;
    text-align: center;
    font-size: 30px;
    padding: 4rem 0;
}

#realtime span {
    display: inline-block;
    font-family: Avenir Next, Nunito, sans-serif;
    font-weight: 100;
    font-size: 8vw;
    position: relative;
    top: -2vw;
}

@media all and (max-width: 600px) {
    #realtime {
        font-size: 4rem;
        padding: 2rem 0;
    };
}

@media all and (max-width: 350px) {
 
    #realtime {
        font-size: 3rem;
        padding: 2rem 0;
    };
}

Now Save Template and click Layout, Then add new HTML/Javascript Widget and copy past below code.
<time id="realtime"></time>
<script type='text/javascript'>
var currentTime = document.getElementById("realtime");
function zeropadder(n) {
  return (parseInt(n,10) < 10 ? '0' : '')+n;
}
function updateTime(){
  var timeNow= new Date(),
  hh = timeNow.getHours(),
  mm = timeNow.getMinutes(),
  ss = timeNow.getSeconds(),
  formatAMPM = (hh >= 12?'PM':'AM');
  hh = hh % 12 || 12;
  currentTime.innerHTML = hh + ":" + zeropadder(mm) + ":" + zeropadder(ss) + " " + formatAMPM;
  setTimeout(updateTime,1000);
}
updateTime();
</script>

That's it. Now refresh your page and see changes. If you found any problem then inform me in comment section and keep sharing our posts. Thanks... 
SHARE THIS
Subcribe for our all latest news and updates

Subscribe Now

Previous Post
Next Post
Monetize your website traffic with yX Media
True Mag

0 Comments: