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 ON A BLOG?
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
DIGITAL CLOCK WIDGET USING VUE.JS
- Open the Blogger Dashboard.
- Select the Layout/Layout menu.
- Click ADD GADGET.
- Select HTML/Javascript.
- Copy the code below then paste it in the content section.
- 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>
</div>
</div>
<style>
#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}
/* FreemiumTech.blogspot.com */
</style>
<!--[ Vue.Js Clock by FreemiumTech ]-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></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),clock.date=week[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();
</script>
Edit the code CSS according to the appearance of your blog to make it more attractive and adjust the text as desired.