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