Simple Digital Clock For Blogger/Website

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. 

• View Result

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...