Membuat widget event beserta countdown timer di blogger
Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai cara membuat widget event countdown timer di blogger
Info: Jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Widget Event
Apa itu widget event? sesuai namanya widget even pada dunia website terkhususnya di blogger, merupakan suatu tampilan custom yang di buat untuk menampilkan informasi penawaran produk misalnya, atau menampilkan penawaran promo diskon menggunakan batas waktu (hitung mundur) ataupun hinnga event berakhir
Info: Widget event hampir sama seperti widget maintenance, jika ingin membuat widget maintenance silahkan pelajari disini
Countdown Fitur
Hal yang menarik dari widget event kali ini adalah dengan menggunakan fitur count down atau hitungan mundur, maka apabila count down selesai di lakukan berarti widget event akan akan berakhir atau tidak di tampilkan lagi kecuali notif "Penawaran sudah berakhir" atau sebagainya
Menggunakan Javascript
Untuk membuat dan menampilkan widget event di blogger source kode pembuatan nya adalah kode JS alias kode Javascript, meskipun menggunakan kode javascript, nantinya kamu bisa menentukan waktu widget event sesuka hati, selain itu admin juga menyediakan class CSS untuk mengubah warna background atau tombol dari widget event sesaka hati
Contoh Tampilan
Jika kamu penasaran dengan contoh tampilan dari widget event tersebut, silahkan periksa menggunakan tombol di bawah ini
Info: Bagaimana sobat dengan contoh tampilan nya keren sekali yak
Contoh Pembuatan
Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjelaskan mengenai cara membuat widget event beserta fungsi penghitung waktu mundur di blogger, silahkan baca dan ikut setiap arahan yang admin jelaskan di bawah ini
Kode CSS
Langkah pertama silahkan salin kode CSS di bawah ini, kemudian letakkan di atas kode ]]></b:skin>
.rahWcount{--rahWcountB:#fffdfc;
--rahWcountC:#DE3535}Info: Fungsi kode CSS di atas adalah untuk menentukan warna dari tampilan widget event nya
Penjelasan singkat
Berikut ini beberapa penjelasan singkat mengenai fungsi source kode CSS yang admin jabarkan di atas
| No | Code | Perintah | Fungsi dan kegunaan | Contohnya |
|---|---|---|---|---|
| 1 | CSS | --rahWcountB:#fffdfc | Berfungsi untuk mengubah warna background dari widget event | #353535 (warna hax code) |
| 2 | CSS | --rahWcountC:#DE3535 | Berfungsi untuk mengubah background tombol dari widget event | #353535 (warna hax code) |
Kode Javascript
Langkah selanjutnya kamu bisa menyalin lagi kode CSS di bawah ini, kemudian letakkan di atas kode </body>
<script>/*<![CDATA[*/
var rahSetTmr = /* Diskon berakhir sampai */ 'May 14 2030 00:00:00 GMT+07:00'; /* Atur batas waktu sesuai lokasimu */
/*]]>*/
</script>
<script src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/rahTmr53.js'></script>Info: Pada kode javascript di atas kamu bisa mengedit jadwal waktu, yang mana jadwal waktu tersebut adalah batas widget event akan berakhir
Penjelasan singkat
Berikut ini beberapa penjelasan singkat mengenai fungsi source kode Javascript yang admin jabarkan di atas
| No | Code | Perintah | Fungsi dan kegunaan | Contohnya |
|---|---|---|---|---|
| 1 | Javascript | May 14 2035 | Berfungsi untuk menentukan waktu bulan, hari, dan tahun berakhir nya widget evet | Maret 05 2035 |
| 2 | Javascript | 00:00:00 | Berfungsi untuk menentukan waktu jam, menit, detik berakhir nya widget event | 12:35:00 |
| 3 | Javascript | GMT+07:00 | Berfungsi untuk menentukan zona waktu anda GMT+07:00 merupakan bagian waktu Indonesia barat | GMT+08:00 |
Info: Kemudian pada kode javascript nya, jika ingin di kolaborasikan dengan script lazy atau sebagiannya silahkan saja, asalakan script tetap berfungsi dan bisa di gunakan
Kode HTML
Tahapan terakhir, silahkan salin dan tempelkan kode CSS ini di bawah, di bawah tag <body>
<b:section id='rahdiscon-mode' showaddelement='false'>
<b:widget cond='!data:view.isPreview and !data:view.isError' id='HTML0538351' locked='true' title='Diskon besar-besaran!' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[<!-- Widget ini hanya bisa di edit pada menu EDIT HTML template -->]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div data-disc='35%' class='rahWcount'><div class='rahWcountH'><div class='rahH'>Template Blogger Rah UI</div><div class='rahD'>Dapatkan diskon besar-besaran sebesar 35%, segera, karena diskon hanya tersedia untuk waktu yang terbatas.</div></div><div class='rahHeadA'><div class='rahH'>Ups!Penawaran Berakhir.</div><div class='rahD'>Penawaran sudah berakhir, nantikan penawaran berikutnya.</div></div><div class='rahTmr'><div class='rahCountTmr'><div class='rahCountBox'><span class='rahDays'>00</span><span class='rahUnit'>days</span></div><div class='rahCountBox'><span class='rahHours'>00</span><span class='rahUnit'>hours</span></div><div class='rahCountBox'><span class='rahMinutes'>00</span><span class='rahUnit'>minutes</span></div><div class='rahCountBox'><span class='rahSeconds'>00</span><span class='rahUnit'>seconds</span></div></div><a class='rahBtn' href='https://wa.me/6285834306926?text=Silahkan%20isi%20data%20dibawah%20ini%0A%0AName%20:%0AAge%20:%0ACountry%20:%0ACity%20:%0AAddres%20:%0A%0AKak%20pengen%20beli%20template%20nya.....'>Beli sekarang!</a></div></div>
</b:includable>
</b:widget>
</b:section>Info: Kode HTML di atas support mode layout, jika posisi tampilan widget tidak sesuai, silahkan ubah peletakkan kode HTML nya, misal di atas kode </body> atau terserah kamu aja, sebab dimana kamu menaruh kode maka disitulah tampilan akan muncul
Posting Komentar