Cara Membuat Pesan Pada Jam Tertentu Dengan Efek Berjalan [ Marquee ]

Marquee | Pada kesempatan ini saya yang akan membagikan tutorial cara membuat Pesan pada jam tertentu yang pernah di post oleh Mbak Dian.

Didalam tutorial ini sudah saya edit sedikit sehingga menjadi seperti di atas home page saya. Saya hanya menambahkan efek marquee yang pernah di share oleh Blog Kang Rian dan beberapa CSS untuk mempercantiknya.

Sobat juga dapat menambahkan Countdown timer untuk hari raya atau yang lain. dan juga dapat ditampilkan pada halaman tertentu seperti punya saya, yang hanya tampil pada homepage.

Berikut Tutorialnya

Langkah 1 : Tambahkan CSS diatas kode </style> / </b:skin>

.judulpesan{background:none repeat scroll 0% 0% #EDEFF1;line-height:2em;font-family:"Oswald",Tahoma,Sans-serif;text-transform:uppercase;font-weight:normal;font-size:16px;margin:20px 0;padding:0 0 0 8px;border:3px solid #ED6351;border-radius:5px}

Langkah 2 : Tambahkan Script diatas kode </head>

<script src='//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js' type='text/javascript'/>

Langkah 3 : Buat widget baru, kemudian pastekan kode berikut di dalamnya (judul dikosongkan saja)

<div class='bg-pesan judulpesan'>
    <script type='text/javascript'>
//<![CDATA[
    var now = new Date();
    var hours = now.getHours();
    // Jam 4 Sore - 6 Sore
    if (hours >= 16 && hours <= 18){
    document.write("<marquee>Selamat menantikan berbuka Puasa</marquee>");
    // Jam 7 Malam - 9 Malam
    } else if (hours >= 19 && hours <= 21){
    document.write("<marquee>Selamat menjalankan Sholat Tarawih</marquee>");
    // Jam 10 Malam - 2 Dini Hari
    } else if (hours >= 22 || hours <= 2){
    document.write("<marquee>Kok belum tidur? udah malam bro..</marquee>");
    // Jam 2 Dini Hari - 4 Dini Hari
    } else if (hours >= 2 && hours <= 4){
    document.write("<marquee>Sahur! Sahur! Sahur!</marquee>");
    // Jam 5 Pagi - 8 Pagi
    } else if (hours >= 5 && hours <= 8){
    document.write("<marquee>Selamat pagi, semoga puasanya Lancar..</marquee>");
    // Jam 9 Pagi - 3 Sore
    } 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>

Langkah 4 : Tambahkan Javascript diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Settingan Default Marquee nya disini bro!
$('marquee')marquee({
    //Atur kecepatan marquee ( Hitungan Milisecond ) :
    duration: 9000,
    //Atur 'Delay' Waktu Sebelum Marquee dimulai :
    delayBeforeStart: 0,
    //Atur Arah Marquee 'left' atau 'right' :
    direction: 'left',
    //Aktifkan Duplikat Marquee 'true' atau 'false'
    duplicated: false,
    //Atur Jarak Duplikat Marquee ( Hitungan Pixel ) :
    gap: 10,
    //Hentikan Marquee ketika di sentuh 'true' atau 'false'
    pauseOnHover: true
});
//]]>
</script>

Kalau masih bingung bisa tanya lagi untuk yg saya tanda itu adalah pesan.. sobat bisa ganti sesukannya. Untuk mencobanya tanpa menunggu waktu tertentu bisa dengan merubah jam yg ada di Laptop atau PC kalian..

Selamat mencoba....
Semoga bermanfaat..

the-anarchyta.blogspot.com/2014/07/menampilkan-pesan-pada-jam-tertentu.html