How To Add Clock Widget On Blogger ?

In this post, I will share with you all a tutorial on how to create a Live Clock Widget on the Blogger website. Have you ever seen someone else's blog

How To Add Clock Widget On Blogger

Hello everyone, welcome again to our new post. In this post I am going to talk about a very good topic. In this post, I will share with you all a tutorial on how to create a Live Clock Widget on the Blogger website.

Have you ever seen someone else's blog display the time or clock? If true then this is what we will make now, it is very easy to create clock widget on blogger, we have made it using only HTML and Javascript, so please read till the end and follow the given steps.

How To Add Clock Widget On Blogger :-

The Clock I made includes 5 styles. So please choose the clock widget style you like, which usually matches your blog. How to use it, I have told you with the help of blogger layout for example that you can put it in header, sidebar, footer etc. But you can use it anywhere.

Step 1 :- First Go To Blogger.Com.
Step 2 :- Then Login Your Blogger Account.
Step 3 :- Then Click on Layour Menu.
Step 4 :- After Click on Add a Gadget.
Step 5 :- Then Select HTML / JavaScript Gadget.

Style 1 With Hours Minutes Seconds and AM/PM Format

<span id="stm-clockstyle1"></span>
<script type="text/javascript">
//<![CDATA[
function showTime(){var a_p = "";var today = new Date();var curr_hour = today.getHours();var curr_minute = today.getMinutes();var curr_second = today.getSeconds();if (curr_hour < 12){a_p = "AM"}else{a_p = "PM"}if (curr_hour == 0){curr_hour = 12}if (curr_hour > 12){curr_hour = curr_hour - 12}curr_hour = checkTime(curr_hour);curr_minute = checkTime(curr_minute);curr_second = checkTime(curr_second);document.getElementById('stm-clockstyle1').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p}function checkTime(i){if (i < 10){i = "0" + i}return i}setInterval(showTime,500);
//]]>
</script>
Demo

Style 2 With Hour Minute and AM/PM Format :-

<span id="stm-clockstyle2"></span>
<script type="text/javascript">
//<![CDATA[
var a_p = "";var d = new Date();var curr_hour = d.getHours();if (curr_hour < 12){a_p = "AM"}else{a_p = "PM"}if (curr_hour == 0){curr_hour = 12}if (curr_hour > 12){curr_hour = curr_hour - 12}var curr_min = d.getMinutes();curr_min = curr_min + "";if (curr_min.length == 1){curr_min = "0" + curr_min}document.getElementById('stm-clockstyle2').innerHTML=curr_hour + ":" + curr_min + " " + a_p;
//]]>
</script>
Demo

Style 3 With Hour and Minute Format :-

<span id="stm-clockstyle3"></span>
<script type="text/javascript">
//<![CDATA[
var d = new Date();var curr_hour = d.getHours();var curr_min = d.getMinutes();curr_min = curr_min + "";if (curr_min.length == 1){curr_min = "0" + curr_min}document.getElementById('stm-clockstyle3').innerHTML=curr_hour + ":" + curr_min;
//]]>
</script>
Demo

Style 4 With Day, Date Month and Year Format :-

<span id="stm-clockstyle4"></span>
<script type='text/javascript'>
//<![CDATA[
var fullbulan = ['January','February','March','April','May','June','July','August','September','October','November','December'];var myDays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];var tanggal = new Date();var hari = tanggal.getDate();var bulan = tanggal.getMonth();var thisDay = tanggal.getDay(),thisDay = myDays[thisDay];var tahun = tanggal.getYear();var year = (tahun < 1000) ? tahun + 1900:tahun;document.getElementById('stm-clockstyle4').innerHTML=thisDay + ',' + hari + ' ' + fullbulan[bulan] + ' ' + year;
//]]>
</script>
Demo

Style 5 With Date Month and Year Format :-

<span id="stm-clockstyle5"></span>
<script type='text/javascript'>
//<![CDATA[
var fullbulan = ['January','February','March','April','May','June','July','August','September','October','November','December'];var tanggal = new Date();var hari = tanggal.getDate();var bulan = tanggal.getMonth();var tahun = tanggal.getYear();var year = (tahun < 1000) ? tahun + 1900:tahun;document.getElementById('stm-clockstyle5').innerHTML=hari + " " + fullbulan[bulan] + " " + year;
//]]>
</script>
Demo

Step 6 :- Finally, Don't Forget To Click on Save.

Conclusion :-

In this post I have told you how to set live timer on blogger website in a very easy way. You must have understood this post very easily and installed it on your blog.

In this post I have explained how to add clock widget on blogger. I hope this tutorial can be useful for all of you bloggers. Thank you for visiting our website.

Refrence :
Www.SmartTechMukesh.Com

Refernce:
www.smarttechmukesh.com

Our All Posts Are Protected By DMCA. So Don't Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited ! Or else Legal Actions Will Be Taken.

Hello Friends, My Name is John M Smith and Welcome To Our Website. My Passion is to Share Knowledge With Everyone. Also I am a Website Designer.

11 comments

  1. Need demo bro
    1. Bro cheek in post there are demo also after every style
    2. Every Style Demo on Post.
  2. This is interesting 😍
    1. Thanks
  3. Imagz theme Related Post Thumbnails size issue and blur how to solve
  4. Nice post 👍👍

    Regards From <a herf="https://nexozed.blogspot.com>Nexozed</a>
    1. Hey owner please delete this comments.
  5. Nice post.
    Love from Nexozed.
    Find out cool Blogging Tips, Tricks, Tutorials here Nexozed
  6. hyiphunter.top
    Meta: Hyip Hunter | Tổng hợp các dự án hyip uy tín
    1. Done, Your Site Added.
Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.

Ad Blocker Detected

Please turn off your adBlock because only ads make us excited, Thank you !!!