Ramaikan "Pesta" ini dengan pernak - pernik widget pilkada yang terpasang di blog. Salah satunya adalah widget Countdown Timer Pilkada Lumajang atau "Hitung Mundur Menuju Pilkada Lumajang 2018
Tidak terasa sebentar lagi gelaran pesta rakyat pilkada serentak 2018 akan segera diselanggarakan.
Seperti yang telah kita ketahui, sebanyak 171 kabupaten/kota akan menggelar Pilkada pada bulan Juni 2018 mendatang, termasuk juga di Kabupaten Lumajang.
Di Kabupaten Lumajang yang kita cintai ini, telah sering kita melihat Spanduk, brosur dan baliho para calon kepala daerah telah bertebaran Dimana-mana.
Mari Jangan jadikan "Pesta" ini sebagai ajang pertarungan opini yang hanya akan memecah belah persaudaraan.Jangan harap Lumajang mendapatkan pemimpin yang baik jika kita masih sibuk dengan perbedaan pendapat yang menimbulkan perpecahan.
Mari ramaikan dan sejukkan "Pesta" yang hanya akan berlangsung 5 tahun sekali ini agar bisa terpilih pemimpin yang amanah dan mampu membawa Kabupaten Lumajang kepada kesejahteraan.
Itu harapan saya sebagai masyarakat lumajang dan semoga juga menjadi harapan bagi seluruh masyarakat Indonesia khususnya bmasyarakat yang ada di Kab. Lumajang yang kita cintai..
Nah..... sebagai seorang blogger, saya mencoba meramaikan "Pesta" ini dengan pernak - pernik widget pilkada yang terpasang di blog. Salah satunya adalah widget Countdown Timer Pilkada Lumajang atau "Hitung Mundur Menuju Pilkada Lumajang 2018".
Widget Countdown Timer Pilkada Lumajang ini dapat dijadikan sebagai apresiasi untuk menyambut Pesta Demokrasi tahun ini agar lebih meriah lagi.
Apa itu Countdown Timer ?? Mungkin sudah banyak yang tau apa itu Countdown Timer. Dan jawaban di bawah saya khususkan buat yang masih belum mengtahui tentang Countdown Timer.
Penghitung waktu mundur (Bahasa Inggris: countdown timer) adalah sejenis stopwatch yang dapat menunjukkan banyaknya sisa waktu yang tersedia sampai batas waktu yang ditentukan.(wikipedia)
Jadi Countdown Timer merupakan widget penghitung waktu secara mundur yang biasanya digunakan menuju waktu atau hari tertentu. Biasanya sih countdown timer atau penghitungan waktu mundur digunakan untuk menyambut Tahun Baru atau moment-moment spesial lainya.
Bagaimana memasang widget Countdown Menuju Pilkada ini? Berikut Tahapannya:
Script ini saya dapatkan dari w3schools.com
dan saya sedikit melakukan modifikasi juga penambahan CSS-nya.
Baik langkah pertama silahkan login terlebih dahulu ke www.blogger.com untuk bisa membuka halaman dasbor blogger.
Silahkan copy scrip dibawah:
Pertama Silahkan copy scrip dibawah:
<style scoped="" type="text/css">
#HTML13{width:100%;height:29em;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiojn4jT6w9raeh1ZM9qCruSq3vwYvaY_3R48UwLXLshagALWdQGgeASpBPS_X3C7t9fI1pf-r1pl-AlaWfDoNfv4p601fBrDg84GI6937poOrOoVa71-UpygBtyeCVQjT76n0L5fcPMWQ/s1600/hintung-mundur-pilkada.jpg);background-size:100%;background-repeat:no-repeat}
#clockdiv{color:#fff;display:inline-block;font-weight:700;text-align:center;font-size:2vw;margin-top:10px}
#clockdiv>div{padding:6px;border-radius:3px;background:rgba(0,150,136,0.8);display:inline-block}
span.days,span.hours,span.minutes,span.seconds{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}
span.days{background:rgba(139,195,74,0.6)}
span.hours{background:rgba(205,220,57,0.7)}
span.minutes{background:rgba(255,235,59,0.7)}
span.seconds{background:hsla(45,100%,51%,0.7)}
#clockdiv div>span{padding:10px;border-radius:3px;display:inline-block}
.smalltext{padding-top:5px;font-size:12px}
</style>
<div style="text-align: center;">
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Hari</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Jam</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Menit</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Detik</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.now();
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = 'Juni 27 2018 08:24:00 GMT+07:00';
initializeClock('clockdiv', deadline);
//]]>
</script></div>
Kedua silahkan pergi ke "Tata Letak", terus pilih "Tambahkan Gadget", klik "HTML/JavaScript" dan paste-kan semua kode yang telah di copy tadi ke halaman yang kosong.
Terahir Klik Simpan/Save dan silahkan anda cek di halaman depan blog.
Keterangan:
Ganti code #HTML13 yang saya beri warna merah dengan ID widget di blog anda.
DEMO: Silahkan lihat pada sidebar
Bagi Anda yang memiliki pertanyaan, jangan sungkan, tinggalkan komentar Anda. Semoga memberi manfaat. :)
COMMENTS