Digital Clock widgets for Blogger blog site .It so nice

Digital Clock widgets for Blogger blog site .It so nice

 This is a best Digital Clock for Blogspot blog site, it is very nice and easy to Display

 Show Result

how it Setup ?

Now Follow this instruction :

Step 1:   Go to blogger Dashboard  and Click  Layout

Step 2:   Add  new Widget Like   HTML/JavaScript 

Step 3:   Now Copy this Below Code and Pasted this Code  on       

                    this  Widget

<style type="text/css">

#realtime {

    font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;

    font-weight: 700;

    display: block;

    text-align: center;

    font-size: 30px;

    padding: 2rem 0;

    color: #fff;

    background-color: green;

}

#realtime span {

    display: inline-block;

    font-family: Avenir Next, Nunito, sans-serif;

    font-weight: 100;

    font-size: 12vw;

    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;

    };

}

</style>

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

Step 4: Then save and enjoy yourself .......

If it help full ,Please share this