Cara Membuat Widget Jam Digital di Website Blogger

Cara Membuat Widget Jam Digital di Website Blogger yang tentunya dapat membuat tampilan blogger kamu terlihat jadi keren dan enak dipandang
KudasaiKode
MateriDesain Halo sobat Materi Desain artikel kali ini saya mau membahas tentang Cara Membuat Widget Jam Digital di Website Blogger yang tentunya dapat membuat tampilan blogger kamu terlihat jadi keren dan enak dipandang.
Cara Membuat Widget Jam Digital di Website Blogger
Pernahkah Anda berpikir mengenai tentang cara menampilkan waktu di blog? Dalam artikel kali ini kita akan membahas cara membuat widget jam di blog, baik Blogger.

Menampilkan jam di blog merupakan salah satu langkah yang dapat digunakan untuk kamu yang ingin mempercantik blog Anda. Untuk bisa menggunakannya, ada banyak situs diluar yang menyediakan widget jam yang dapat Anda dapatkan dan gunakan secara gratis.

Namun, terkadang widget dari pihak ketiga sulit untuk dikustomisasi sesuai dengan tampilan yang kita inginkan, oleh karena itulah kali ini kita akan membuat jam digital menggunakan kode sumber terbuka Vue.Js. Bagaimana caranya?

Membuat Widget Jam Digital di Blog Menggunakan Vue.Js

Sebelum memulai tutorial, Anda dapat melihat tampilan Demo jam digital untuk blog di bawah ini .

Demo di Codepen
  • Buka Dashboard Blogger.
  • Pilih menu Tata Letak/Tata Letak.
  • Klik TAMBAHKAN GADGET.
  • Pilih HTML/Javascript.
  • Salin kode di bawah ini lalu tempel di bagian konten.
  • Klik SIMPAN.

 <div id="wrapperdigital">
  <div id="clock">
    <div class="date">{{ date }}</div>
    <div class="time">{{ time }}</div>
    <div class="text">DIGITAL CLOCK BY IGNIELDESAIN</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 IGNIELDESAIN ]-->
<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 kode CSS sesuai dengan tampilan blog Anda agar lebih menarik dan sesuaikan teks sesuai keinginan. 

Baik itulah artikel kali ini mengenai widget jam digital yang bisa kamu terapkan di blogger situs kamu terimakasih sudah berkunjung jamgan lupa komentar dan share.
KudasaiKode
Hanya seorang yang hobi membuat artikel walau tidak sering banget
Komentar