Home
blogger widgets

How to Make a Digital Clock Widget on a Blog

An Easy Way to Make a Digital Clock Widget on a Blog Using Vue.Js
How to Make a Digital Clock Widget on a Blog
How to Make a Digital Clock Widget on a Blog



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 make a clock widget on a blog, either Blogger or WordPress.

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

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

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

Before going to the tutorial, you can see the display of a digital clock demo for the blog below

{{ date }}
{{ time }}

Blogger Digital Clock Widget Using Vue.Js

  • Open the Blogger Dashboard
  • Select Menu Layout / Layout
  • Click ADD GADGETS
  • Select HTML/Javascript
  • Copy the code below then paste it in the content section
  • Click SAVE
<style>
 <!--[ CSS Clock Digital ]-->
#clock {background: #ffdfc;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: 25px; z-index: 1; position: relative; }

#HTML98 {position:relative;overflow:hidden}
#HTML98:after {content:'';display:block;position:absolute;bottom:0;right:0;width:120px;height:120px;background-image:linear-gradient(50deg,#ff4169,#8b41f6) ;background-repeat:no-repeat;border-radius:120px 0 22px;transition:opacity .3s;opacity:1}
#HTML98:before {content:'';display:block;position:absolute;bottom:0;right:0;width:120px;height:120px;background-image:linear-gradient(230deg,#ff4169,#8b41f6) ;background-repeat:no-repeat;border-radius:120px 0 22px;transition:opacity .3s;opacity:1}
#HTML98:hover:after {opacity:0}#HTML98:hover:before{opacity:1}
</style>

<!--[ Clock ID HTML ]-->
<div id="HTML98">
<div id="clock">
    <div class="date">{{ date }}</div>
    <div class="time">{{ time }}</div>
    <div class="text"> DIGITAL CLOCK with Vue.js </div>
</div>
</div>

<!--[ Vue. Js Clock ]-->
<script src ='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script id="rendered-js" >
var clock = new Vue({
  el: '#clock',
  data: {
    time: '',
    dates: '' } });

var week = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
  var cd = new Date();
  clock.time = zeroPadding(cd. getHours(), 2) + ':' + zeroPadding(cd. getMinutes(), 2) + ':' + zeroPadding(cd. getSeconds(), 2);
  clock.date = week[cd.getDay()] + ',' + zeroPadding(cd. getDate(), 2) + '-' + zeroPadding(cd. getMonth() + 1, 2) + '-' + zeroPadding (cd. getFullYear(), 4);
};

function zeroPadding(num, digits) {
  varzero = '';
  for (var i = 0; i < digits; i++) {
    zero += '0';
  }
  return (zero + num).slice(-digit);
}
//# sourceURL=pen. js
</script>

Edit the code CSSaccording to the appearance of your blog to make it more attractive and adjust the text that is given tanda biruas you wish

WordPress Digital Clock Widget Using Vue.Js

  • Go to the WordPress Dashboard
  • Select Appearance > Widgets
  • Drag the selected Custom HTML widget to the right sidebar/ footer
  • Copy the code below then paste it in the content section
  • Click SAVE
<style>
 <!--[ CSS Clock Digital ]-->
#clock {background: #ffdfc;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: 25px; z-index: 1; position: relative; }

#HTML98 {position:relative;overflow:hidden}
#HTML98:after {content:'';display:block;position:absolute;bottom:0;right:0;width:120px;height:120px;background-image:linear-gradient(50deg,#ff4169,#8b41f6) ;background-repeat:no-repeat;border-radius:120px 0 22px;transition:opacity .3s;opacity:1}
#HTML98:before {content:'';display:block;position:absolute;bottom:0;right:0;width:120px;height:120px;background-image:linear-gradient(230deg,#ff4169,#8b41f6) ;background-repeat:no-repeat;border-radius:120px 0 22px;transition:opacity .3s;opacity:1}
#HTML98:hover:after {opacity:0}#HTML98:hover:before{opacity:1}
</style>

<!--[ Clock ID HTML ]-->
<div id="HTML98">
<div id="clock">
    <div class="date">{{ date }}</div>
    <div class="time">{{ time }}</div>
    <div class="text"> DIGITAL CLOCK with Vue.js </div>
</div>
</div>

<!--[ Vue. Js Clock ]-->
<script src ='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script id="rendered-js" >
var clock = new Vue({
  el: '#clock',
  data: {
    time: '',
    dates: '' } });

var week = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
  var cd = new Date();
  clock.time = zeroPadding(cd. getHours(), 2) + ':' + zeroPadding(cd. getMinutes(), 2) + ':' + zeroPadding(cd. getSeconds(), 2);
  clock.date = week[cd.getDay()] + ',' + zeroPadding(cd. getDate(), 2) + '-' + zeroPadding(cd. getMonth() + 1, 2) + '-' + zeroPadding (cd. getFullYear(), 4);
};

function zeroPadding(num, digits) {
  varzero = '';
  for (var i = 0; i < digits; i++) {
    zero += '0';
  }
  return (zero + num).slice(-digit);
}
//# sourceURL=pen. js
</script>

Edit the code CSSaccording to the appearance of your blog to make it more attractive and adjust the text that is given blue signas you wish

Closing

So, that was How to Make a Digital Clock Widget on Blogger and WordPress . If this article is useful, you can share and recommend it to friends who need it, if you have problems you can ask via the comments column.

Post a Comment