Responsive Digital Clock Widget For Blogger Website

Its cool to engage your website visitors alongside things that are going to expire along them on your website, such things include the Responsive Digital Clock Widget For Blogger Website. The widget has a responsive expect that volition teach out your website looking uncomplicated in addition to minimalistic. The widget uses the users gprs in addition to yous tin forcefulness out hold upward asured that the fourth dimension volition ever demo according to theier place area.

How To Add Responsive Digital Clock Widget For Blogger Website

1. Go to blogger.com
2. Select Your blogger wbsite
3. Click on Layout on the far left option.
4. In the sidebar department click on add together gadget
5. In the dialogue box option, click on HTML/Javasript
6. Add the below Code inwards the code box

 <style>
#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 bridge {
    display: inline-block;
    font-family: Avenir Next, Nunito, sans-serif;
    font-weight: 100;
    font-size: 8vw;
    position: relative;
    top: -2vw;
}

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

@media all in addition to (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) {
  provide (parseInt(n,10) < x ? '0' : '')+n;
}
function updateTime(){
  var timeNow= novel 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>

7. Save your layout in addition to Refresh your website.