How To Add Clock Widget On Blogger ?

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

Admin

Hey there! My name is Mukesh Kushwaha, I am a Professional Web Designer, Graphic Designer, UI/UX Designer, Logo Designer and Banner Designer. I am Content Creator from Bihar State, India. I love coding and editing, so I always try to create something new and interesting.
facebook instagram twitter pinterest telegram

12 Comments

Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.

  1. Replies
    1. Bro cheek in post there are demo also after every style

      Delete
  2. Imagz theme Related Post Thumbnails size issue and blur how to solve

    ReplyDelete
  3. Nice post 👍👍

    Regards From <a herf="https://nexozed.blogspot.com>Nexozed</a>

    ReplyDelete
  4. Nice post.
    Love from Nexozed.
    Find out cool Blogging Tips, Tricks, Tutorials here Nexozed

    ReplyDelete
  5. hyiphunter.top
    Meta: Hyip Hunter | Tổng hợp các dự án hyip uy tín

    ReplyDelete
  6. That was a great post.Thanks for this.
    www.educationhelp.xyz
    Meta: Education Help
    And i also member of your telegram group.thanks bro.

    ReplyDelete
Previous Post Next Post