Digital Clock Widget For Blogger Website
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 minimalistic. The widget uses the users gprs and you can be asured that the time will always show according to theier location 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 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.

2 Comments

  1. This is one of the excellent insights I have read for web development. I definitely use these tips more often to my site. Thank you!
    Hire a Programmer
    Hire a Coder
    Hire wordpress developer India
    Hire Dedicated Programmers
    Hire Php Programmer

    ReplyDelete
  2. I appreciate the effort of the author. I found it is an informative post on bootstrap technology. I hope you shared this kind of blog in future to help both the developer and business people.
    Wordpress Web Development
    Wordpress Plugin Development
    Wordpress Development Services
    Custom Wordpress Development
    Wordpress Website Development

    ReplyDelete

Post a Comment

Previous Post Next Post