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



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

Welcome to Jehangir Khan's Tech Blog! We're thrilled to have you join the conversation. Your comments and feedback are valuable to us and help us create a community of tech enthusiasts who share ideas and insights. We encourage you to share your thoughts related to the post and engage in a respectful and meaningful conversation with others. Please refrain from spamming or promoting your own content in the comments section. We also ask that you avoid using inappropriate language or attacking others. Please note that all comments will be reviewed before they are posted, and we reserve the right to remove any comments that violate our policies. Let's explore the world of technology together and inspire each other to achieve our goals!

Previous Post Next Post