Clock Widget On Blogger

Have you ever seen a clock or the time shown on another person's blog? If this is the case, we will proceed to develop a clock widget for Blogger. All we used to create it was HTML and Javascript, so please read the entire article and follow the instructions.

How To Add Clock Widget On Blogger :-

I created a clock with 5 different styles. Therefore, please select the clock widget style that best suits your blog. I've shown how to utilize it by using the blogger layout as an example. You may put it in the header, sidebar, footer, etc. But it may be applied wherever.

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
08:18:15 PM

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
5:16 PM

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
17:16

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
Sunday,6 November 2022

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
6 November 2022

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

---

Reference :
Www.SmartTechMukesh.Com

Read More :