Simple Digital Clock For Blogger/Website

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. 

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;

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... 
Previous Post
Next Post

post written by:

TemplateMark better known as Template Market provides High quality free and premium Blogger templates. If you running a blog with Blogspot platform, then you can choose more than 20+ free blogger templates for your blog. TemplateMark provides free version of every template. You can highly choice TemplateMark for your digital blog.