Responsive Digital Clock Widget for Blogger

Its cool to engage your website visitors with things that are going to keep them on your website, such things include the Responsive Digital Clock Widget For Blogger Website. The widget has a responsive look that will leave your website looking simple and minimalist. The widget uses the users GPS and you can be assured that the time will always show according to their location area.

How To Add Digital Clock Widget To Blogger

1. Go to blogger.com
2. Select Your blogger website
3. Click on Layout on the far left option.
4. In the sidebar section click on add gadget
5. In the dialogue box option, click on HTML/Javasript
6. Add the below Code in 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 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;
</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>

7. Save your layout and Refresh your website.