How to make a Digital Clock Widget in Blogger Website

Easy Way to Create a Digital Clock Widget Using Vue.Js on Blogger Website
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hello Everyone! Welcome back to FreemiumTech Website. How are you all? I Hope you all are well. Today our Article is all about How to make a Digital Clock Widget in Blogger Website. You can add it anywhere on your blogger website. So let's start today's article.

How to make a Digital Clock Widget in Blogger Website


Have you ever thought about how to display the time on a blog? In this article we will discuss how to create a clock widget on a blog, either Blogger.

Displaying a clock on a blog is a step that can be used to beautify your blog. To use it, there are many sites that provide clock widgets that you can use for free.

However, sometimes widgets from third parties are difficult to customize according to the appearance we want, that's why this time we will make a digital clock using open source code Vue.Js. How to?

Creating a Digital Clock Widget on a Blog Using Vue.Js

Before starting the tutorial, you can see a Demo display of a digital clock for the blog below

{{ date }}
{{ time }}


  1. Open the Blogger Dashboard.
  2. Select the Layout/Layout menu.
  3. Click ADD GADGET.
  4. Select HTML/Javascript.
  5. Copy the code below then paste it in the content section.
  6. Click SAVE.

 <div id="wrapperdigital">
  <div id="clock">
    <div class="date">{{ date }}</div>
    <div class="time">{{ time }}</div>
    <div class="text">DIGITAL CLOCK BY FREEMIUMTECH</div>

#clock {background:#fffdfc;height:100%;width:100%;color:#3c4043;text-align:center;margin:0;padding:25px;border-radius:22px;line-height:1.6;border:1px solid rgba(155,155,155,0.15)}
#clock .time {letter-spacing:0.05em;font-size:55px;padding:0px;background:rgba(255,255,255,.9);border-radius:10px;border:1px solid rgba(0,0,0,0.05);z-index:1;position:relative;}
#clock .date {letter-spacing:0.1em;font-size:20px;padding:10px;}
#clock .text {letter-spacing:0.1em;font-size:12px;padding:10px;z-index:1;position:relative;}
#wrapperdigital {position:relative;overflow:hidden}
#wrapperdigital:before {content:'';display:block;position:absolute;bottom:0;right:0;width:120px;height:120px;background-image:linear-gradient(to right,#25aae1,#40e495,#30dd8a,#2bb673);background-repeat:no-repeat;border-radius:120px 0 22px;transition:opacity .3s;opacity:1}
/* */

<!--[ Vue.Js Clock by FreemiumTech ]-->
<script src=''></script>
<script type='text/javascript'>
var clock=new Vue({el:"#clock",data:{time:"",date:""}}),week=["SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"],timerID=setInterval(updateTime,1e3);function updateTime(){var e=new Date;clock.time=zeroPadding(e.getHours(),2)+":"+zeroPadding(e.getMinutes(),2)+":"+zeroPadding(e.getSeconds(),2),[e.getDay()]+", "+zeroPadding(e.getDate(),2)+"-"+zeroPadding(e.getMonth()+1,2)+"-"+zeroPadding(e.getFullYear(),4)}function zeroPadding(e,t){for(var a="",d=0;d<t;d++)a+="0";return(a+e).slice(-t)}updateTime();

Edit the code CSS according to the appearance of your blog to make it more attractive and adjust the text as desired.


In this post I have made a tutorial about How to make a Digital Clock Widget in Blogger Website. Which gives a beautiful look of your website. I hope you have liked it and please share with your friends and follow our blog for more.
If you face any problems in this code or have any questions so feel free to ask me in comments section or join our Telegram Group for discussion.

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

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.