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