Widget Pesan Pada Jam Tertentu

Widget Pesan Pada Jam Tertentu yaitu widget menampilkan pesan pada blog secara otomatis pada waktu yang telah ditentukan dengan pesan yang telah diatur.

Widget Pesan Pada Jam Tertentu ini memang ada beberapa cara namun disini saya posting ulang bukan hanya buat berbagi tapi juga sebagai catatan pribadi, toturial disini saya dapat dari Blog Anarchyta.

Posting ini juga melanjutkan dari catatan sebelumnya : CARA MEMBUAT SINTAX HIGHLIGHT

Lihat demo dibawah:

Berikut cara membuat Widget Pesan Pada Jam Tertentu :

- Buka dashboard klik Tata Letak >> Add a Gadget >> HTML/Javascript.
- Kemudian Copy paste  kode berikut ini dan untuk judul dikosongkan saja.

<div class="success ono-wae">
<style scoped="scoped" type="text/css">
.ono-wae {
font-family: 'Oswald', Tahoma, Sans-serif;
text-transform: uppercase;
font-weight: normal;
font-size: 16px;
margin: 20px 0;
padding: 0 0 0 8px;
border-left: 5px solid #3498DB;
}
.success {
color: #666;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoALWU390XgL9qpI9aDOQEt4CjATTl10NGdAQ8sdz0aOita59chenXaIgNaIniDBoq4FojLQsCy9TIGOH4XJbTDdwhZoQmHoDiONi-swTGb29_CNSptEZpU_kU_Q5Tgi0cD2noWDkHG-E/s1600/tickslas.png") 10px center no-repeat scroll #E8F6D2;
font-style: normal;
padding: 15px 18px 15px 48px;
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media screen and (max-width:974px) {
.ono-wae{ margin:10px 0 0 0;}}
</style>
<script type="text/javascript">
 var now = new Date();
 var hours = now.getHours();
if (hours >= 16 && hours <= 17){
document.write("<marquee>Selamat menantikan berbuka Puasa</marquee>");
 } else if (hours >= 18 && hours <= 21){
document.write("<marquee>Selamat malam sahabat</marquee>");
 } else if (hours >= 22 || hours <= 2){
document.write("<marquee>Kok belum tidur sih udah malam</marquee>");
 } else if (hours >= 2 && hours <= 4){
document.write("<marquee>Sahur! Sahur! Sahur!</marquee>");
 } else if (hours >= 5 && hours <= 8){
document.write("<marquee>Selamat pagi, selamat menjalankan Ibadah Puasa..</marquee>");
 } else if (hours >= 9 && hours <= 15){
document.write("<marquee>Selamat menunaikan ibadah puasa, semoga amal ibadah kita di terima di sisi Allah SWT.</marquee>");
 }
</script></div>

Atau bisa anda coba kode lainnya dengan perhitungan mundur :

<style scoped="scoped" type="text/css">
.puasa1 {
    color:#FFC200;}
.lebaran {color:#FFC200;}
.puasa {background: #603B24; font-size: 120%;
text-transform: uppercase;text-align: center;
margin: 2%;
padding: 1.5%;}
.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>

Save widget.

Selesai, Widget Pesan Pada Jam Tertentu