
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.
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