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?
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
<div id="wrapperdigital">
<div id="clock">
<div class="date">{{ date }}</div>
<div class="time">{{ time }}</div>
<div class="text">DIGITAL CLOCK with Vue.js</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(230deg,#ff4169,#8b41f6);background-repeat:no-repeat;border-radius:120px 0 22px;transition:opacity .3s;opacity:1}
</style>
<!--[ Vue.Js Clock ]-->
<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=["MINGGU","SENIN","SELASA","RABU","KAMIS","JUMAAT","SABTU"],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 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
<div id="wrapperdigital">
<div id="clock">
<div class="date">{{ date }}</div>
<div class="time">{{ time }}</div>
<div class="text">DIGITAL CLOCK with Vue.js</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(230deg,#ff4169,#8b41f6);background-repeat:no-repeat;border-radius:120px 0 22px;transition:opacity .3s;opacity:1}
</style>
<!--[ Vue.Js Clock ]-->
<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=["MINGGU","SENIN","SELASA","RABU","KAMIS","JUMAAT","SABTU"],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 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.