Cara Membuat Widget Jam Digital di Blog

Cara Mudah Membuat Widget Jam Digital di Blog Menggunakan Vue.Js
Cara Membuat Widget Jam Digital di Blog

Cara Membuat Widget Jam Digital di Blog - Pernah berfikir bagaimana menampilkan waktu pada blog? Di artikel kali ini kita akan membahas cara membuat widget jam di blog baik blogger atau wordpress.

Menampilkan jam pada sebuah blog merupakan langkah yang bisa digunakan untuk mempercantik blog, untuk menggunakannya ada banyak situs penyedia widget jam yang bisa kamu gunakan secara gratis.

Meski begitu terkadang widget dari pihak ketiga susah untuk di custom sesuai dengan tampilan yang kita inginkan, karena itu kali ini kita akan membuat jam digital menggunakan kode sumber tebuka Vue.Js. Bagaimana caranya?

Table of Contents

Membuat Widget Jam Digital di Blog Menggunakan Vue.Js

Sebelum ke tutorial kamu bisa melihat tampilan demo jam digital untuk blog di bawah ini

{{ date }}
{{ time }}
DIGITAL CLOCK with Vue.js

Widget Jam Digital Blogger Menggunakan Vue.Js

  • Buka Dashboard Blogger
  • Pilih Menu Tata Letak/Layout
  • Klik TAMBAH GADGET
  • Pilih HTML/Javascript
  • Salin kode dibawah ini kemudian paste di bagian konten
  • Klik SIMPAN
<style>
<!--[ CSS Clock Digital ]-->
#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: 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: '',
    date: '' } });

var week = ['MINGGU', 'SENIN', 'SELASA', 'RABU', 'KAMIS', 'JUMAAT', 'SABTU'];
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, digit) {
  var zero = '';
  for (var i = 0; i < digit; i++) {
    zero += '0';
  }
  return (zero + num).slice(-digit);
}
//# sourceURL=pen.js
</script>

Edit kode CSS sesuai dengan tampilan Blog kamu agar lebih menarik dan Sesuaikan Text yang di beri tanda biru sesuai keinginan

Widget Jam Digital Wordpress Menggunakan Vue.Js

  • Buka Dashboard Wordpress
  • Pilih Appearance > Widgets
  • Drag widget Custom HTML yang dipilih ke sidebar/ footer bagian kanan
  • Salin kode dibawah ini kemudian paste di bagian konten
  • Klik SIMPAN
<style>
<!--[ CSS Clock Digital ]-->
#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: 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: '',
    date: '' } });

var week = ['MINGGU', 'SENIN', 'SELASA', 'RABU', 'KAMIS', 'JUMAAT', 'SABTU'];
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, digit) {
  var zero = '';
  for (var i = 0; i < digit; i++) {
    zero += '0';
  }
  return (zero + num).slice(-digit);
}
//# sourceURL=pen.js
</script>

Edit kode CSS sesuai dengan tampilan Blog kamu agar lebih menarik dan Sesuaikan Text yang di beri tanda biru sesuai keinginan

Penutup

Nah itu tadi Cara Membuat Widget Jam Digital di Blogger dan Wordpress. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan, jika ada kendala kamu bisa bertanya melalui kolom komentar.
#Keep Reading and Keep Working
Gabung dalam percakapan