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.