For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

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



Template Blogger Rah UI
Dapatkan diskon besar-besaran sebesar 35%, segera, karena diskon hanya tersedia untuk waktu yang terbatas.
Ups! Penawaran Berakhir.
Penawaran sudah berakhir, nantikan penawaran berikutnya.
00days
00hours
00minutes
00seconds
Beli sekarang!


About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.