Membuat Widget Pesan Pada Waktu Tertentu Spesial Ramadhan

Keren yah,jika blog kita dihiasi widget Pesan spesial ramadhan seperti "Sahur... Sahur" , "Selamat Berbuka Puasa" , "Selamat Menantikan Berbuka puasa" Dan masih banyak lagi.Nah kali ini saya akan membahas cara membuat widget pesan pa
da waktu tertentu spesial ramadhan.Oke simak caranya berikut :


  • Login Akun ID/Blogger anda
  • Dashboard -> Tata Letak -> Add A Gadget -> HTML/Javascript
  • Kemudian Copy-Pastekan code berikut ini tepat di Gadget HTML tadi :

Klik untuk melihat

<script type='text/javascript'> var now = new Date(); var hours = now.getHours(); // Jam 4 Sore - 6 Sore if (hours >= 16 && hours <= 18){document.write("Selamat menantikan berbuka Puasa"); // Jam 7 Malam - 9 Malam } else if (hours >= 19 && hours <= 21){document.write("Selamat menjalankan Sholat Tarawih"); // Jam 10 Malam - 2 Dini Hari } else if (hours >= 22 || hours <= 2){document.write("Kok belum tidur? udah malam bro.."); // Jam 2 Dini Hari - 4 Dini Hari } else if (hours >= 2 && hours <= 4){document.write("Sahur! Sahur! Sahur!"); // Jam 5 Pagi - 8 Pagi } else if (hours >= 5 && hours <= 8){document.write("Selamat pagi, semoga puasanya Lancar.."); // Jam 9 Pagi - 3 Sore } else if (hours >= 9 && hours <= 15){document.write("Selamat menunaikan ibadah puasa, semoga amal ibadah kita di terima di sisi Allah SWT."); }</script>
Untuk style,Kalian bisa memodifikasikan sendiri.

Untuk yang ke-2 , ini sudah dimodifikasikan oleh Muh Akram,jika kalian berminat dengan style ini.ganti code yang diatas tadi dengan code dibawah ini :

Klik untuk melihat

<style scoped="" type="text/css">.puasa1 {    color:#FFC200;}.lebaran {    color:#FFC200;}.puasa {    background:rgba(19, 19, 19, 0.65);    font-size:130%;    text-transform:uppercase;    text-align:center;    margin:15px 15px 0 0;    padding:20px 0;    font-weight:normal;    border-radius:5px;    line-height:1.8em;    font-family:Trebuchet MS, Verdana, Arial, sans-serif;}.digit {color:#fff}.judul {color:#fff}@media screen and (max-width:974px) {.puasa { margin:10px 0 0 0;}}</style><div class='puasa'><span class="puasa1"><script type='text/javascript'> var now = new Date(); var hours = now.getHours();if (hours >= 16 && hours <= 18){document.write("Selamat menantikan berbuka Puasa"); } else if (hours >= 19 && hours <= 21){document.write("Selamat menjalankan Sholat Tarawih"); } else if (hours >= 22 || hours <= 2){document.write("Kok belum tidur sih udah malam"); } else if (hours >= 2 && hours <= 4){document.write("Sahur! Sahur! Sahur"); } else if (hours >= 5 && hours <= 8){document.write("Selamat pagi, selamat menjalankan Ibadah Puasa.."); } else if (hours >= 9 && hours <= 15){document.write("Selamat menunaikan ibadah puasa, semoga amal ibadah kita di terima di sisi Allah SWT."); }</script></span><br/><span class="lebaran"><span id="countdown"></span><script type='text/javascript'>//<![CDATA[var target_date = new Date("Jul 27, 2014").getTime(); var days, hours, minutes, seconds; var countdown = document.getElementById("countdown"); setInterval(function () {    var current_date = new Date().getTime();    var seconds_left = (target_date - current_date) / 1000;    days = parseInt(seconds_left / 86400);    seconds_left = seconds_left % 86400;         hours = parseInt(seconds_left / 3600);    seconds_left = seconds_left % 3600;         minutes = parseInt(seconds_left / 60);    seconds = parseInt(seconds_left % 60);  countdown.innerHTML =  days + " <span class=\'digit\'>hari</span> " + hours + " <span class=\'digit\'>jam</span> "  + minutes + " <span class=\'digit\'>menit</span> " + seconds + " <span class=\'digit\'>detik menuju</span> <span class=\'judul\'>Idul Fitri 1435H</span>";   }, 1000);//]]></script></span></div> 

Code diatas dibuat oleh : Dian Anrchyta , Dan Code ke-2 oleh Muh Akram.

NOTE : JIKA BAGI KALIAN WIDGET INI MENGGANGGU,LEBIH BAIK TIDAK USAH DIPASANG

17 komentar

itu widget nya aja yg muncul2 menggangu

Reply

keren nih saya coba gan :)

Reply

Wih keren nih
nice post

Reply

Hanya saya pasang saat bulan ramadhan saya kok :) , maaf dengan ketidaknyamanannya ..

Reply

pasti :-d , coba dulu deh ^_^

Reply

waaah., boleh juga nh gan ;) izin ane coba yaa di blog ane gan.. :)

Reply

ati-ati blog jadi ngak kuat load :)

Reply

Wihh Keren nih gan :-D tapi saya takut blognya jadi risih gara" widgetnya, ane coba dulu ya gan kalo bagus ane c0baa, thanks udah share gan :-)

Reply

Izin nyoba om, thanks~

Reply

ini sebenarnya widget seperti teks gitu , ya sebaiknya tidak usah dipasang jika bagi sobat itu BERAT :-D

Reply

mantep banget nih gan perlu di coba mumpung masih bulan ramadhan

Reply

keren tapi bisa mengurangi kecepatan suatu blog

Reply

tenang , ada banyak cara kok untuk mengurangi loading blog.

Reply

keeren ya bisa ada jadwalnya
kaya alrm ,, langsung di coba nih

Reply

Posting Komentar