Beranda
HTML

Cara Menambahkan Widget Jam Digital di Blog

Mau tampil beda dengan menambahkan jam pada blogmu? Yuk simak cara membuat widget jam di blog baik itu blogger atau wordpress!

Menambahkan jam pada blog bisa jadi langkah simpel untuk mempercantik tampilan blogmu. Kamu bisa mencari situs penyedia widget jam secara gratis untuk menambahkan jam digital di blogmu. Namun, terkadang widget dari pihak ketiga susah untuk di custom sesuai dengan tampilan yang diinginkan.

Untuk mengatasi hal tersebut, kali ini kita akan menggunakan kode sumber tebuka Vue.Js untuk membuat jam digital yang bisa disesuaikan dengan tampilan blogmu. Tertarik mencoba? Yuk ikuti langkah-langkahnya!

Memasang Widget Jam Digital di Blog Menggunakan Vue.Js 

Sebelum ke cara pemasangan, 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
    	<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.

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.

Penutup

Nah itu tadi Cara Menambahkan 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.