Hello sobat IcloudZer kali ini admin akan membahas seputar dunia blogging untuk anda lebih tepatnya membahas mengenai, sebuah Script yang bisa menampilkan pesan jika sudah waktunya (Jamnya)
Misal: Jika sudah waktunya Pukul 14:30 WIB, maka pesan yang disetel sebelumnya akan muncul secara otomatis, munculnya ya tergantung dimana anda meletakkannya
Ok mungkin udah pada penasaran ini yak, baiklah admin akan mulai membahas mengenai script untuk menampilkan pesan jika sudah waktunya tiba
Dibuat menggunakan Javascript
Pesan yang bisa muncul saat sudah waktunya ini jika kamu terapkan pada blogger, maka sesuai sekali karena didalam pembuatannya menggunakan unsur javascript dan juga text, yang mana seperti yang kita ketahui blogger menggunakan unsur tiga elemen yakni CSS, Javascript, dan juga HTML
Info : Nah semua element tersebut bisa dikolaborasikan jika dirasa memungkinkan
Cara Pembuatan
Baiklah sekarang admin akan mulai membahas Mengenai element script tersebut, mulai dari Script kodenya beserta penjelasan singkat, kemudian pengabungan antara kode CSS dengan javascript untuk membuat tampilannya semakin menarik, ok
Contoh Tampilan
Jika kamu telah menggunakan kode script untuk menampilkan text ketika sudah waktunya diblogger, maka tampilannya akan seperti contoh dibawah ini
Pesan: Text nya bisa kamu ubah kok sesuai keperluan kamu pastinya
Script kode
Dibawah ini admin sudah meletakkan sebuah script kode, yang berunsur JavaScript dan juga Text, kamu bisa menyalinnya kemudian letakkan atau guankan sesuai keperluan kamu
<script>//<![CDATA[
var now = new Date();
var hours = now.getHours();
// Jam 4 Sore - 6 Sore
if (hours >= 16 && hours <= 18){
document.write("Jangan lupa mandi dan sholat sudah sore ");
// Jam 3 Sore - 4 Sore
} else if (hours >= 15 && hours <= 16){
document.write("Sudah waktunya Sholat Ashar ya, keburu entar waktu sholatnya habis");
// Jam 8 Malam - 9 Malam
} else if (hours >= 20 && hours <= 21){
document.write("Selamat malam kalau capek istirahat ya");
// Jam 10 Malam - 2 Dini Hari
} else if (hours >= 22 || hours <= 2){
document.write("Sudah larut malam , jangan lupa istirahat ");
// Jam 2 Dini Hari - 4 Dini Hari
} else if (hours >= 2 && hours <= 4){
document.write("Waktu dini hari manfaatkan untuk sholat tahajud ya");
// Jam 6 Pagi - 8 Pagi
} else if (hours >= 5 && hours <= 8){
document.write("Buruan mandi sebelum kesiangan dan selamat berangkat kerja ");
// Jam 7 Malam - 8 Malam
} else if (hours >= 19 && hours<= 20){
document.write("Sudah waktunya Sholat Isya' ya, keburu entar waktu sholatnya habis");
// Jam 5 Malam - 6 Malam
} else if (hours >= 5 && hours<= 6){
document.write("Sudah waktunya Sholat Subuh ya, keburu entar waktu sholatnya habis");
// Jam 9 Pagi - 12 Siang
} else if (hours >= 9 && hours <= 12){
document.write("Selamat siang , jangan lupa makan siang ");
// Jam 12 siang - 1 siang
} else if (hours >= 12 && hours<= 13){
document.write("Sudah waktunya Sholat Zhuhur ya, keburu entar waktu sholatnya habis");
// Jam 2 siang - 3 sore
} else if (hours >= 14 && hours<= 15){
document.write("Sudah makan belum, makan dulu deh entar kamu sakit lagi");
}
//]]></script>Warning: Sebagai contoh mengkin kamu bisa meletakkannya didalam menu "Add Widget" kemudian lihat Tampilannya
Penjelasan Script
Bang jika aku mau menambahkan Text lainnya bagiamana? Ya bisa... tapi ingat bahwa text ini akan tampil sebagi sebuah pesan mengikuti batas waktu yang telah ditentukan, dengan memasukkan sebuah nilai hours <= (nilai) && hours <=(nilai) )
Maksud nilai disini adalah Tentukan nilai dari waktu Jam yang akan menjadi pertanda akses pesan tersebut bisa muncul
Jam disini menggunakan format waktu siang dan malam, contohnya adalah misal anda menentukan nilai Jam 11 siang maka nilai hours nya adalah 11, dan begitu pula sebaliknya jika nilai (Jam) yang kamu tentukan 11 malam maka nilai yang harus kamu masukkan kedalam hours adalah 23, paham tak
Penggabungan kode CSS
Kode CSS disini mempunyai peranan untuk membantu membuat tampilan text dari javascript tersebut semakin menarik
Sebagai contoh mungkin kamu bisa melihat kode CSS dibawah ini
.icloudice-msg{display:block; background-color:#ebeced;color:red;font-size:14px; font-style:normal; padding:12px;margin-buttom:8px;margin-left:2px;margin-right:2px;top:0px;}
.icloudice-msg:before{content:'@message :'}Kemudian untuk penggunaan Javascript, kamu bisa sertakan class='icloudice-msg', Jika masih bingung lihat script kode javascript dengan menggunakan class dibawah ini
<div class='icloudice-msg'><script>//<![CDATA[
var now = new Date();
var hours = now.getHours();
// Jam 4 Sore - 6 Sore
if (hours >= 16 && hours <= 18){
document.write("Jangan lupa mandi dan sholat sudah sore ");
// Jam 3 Sore - 4 Sore
} else if (hours >= 15 && hours <= 16){
document.write("Sudah waktunya Sholat Ashar ya, keburu entar waktu sholatnya habis");
// Jam 8 Malam - 9 Malam
} else if (hours >= 20 && hours <= 21){
document.write("Selamat malam kalau capek istirahat ya");
// Jam 10 Malam - 2 Dini Hari
} else if (hours >= 22 || hours <= 2){
document.write("Sudah larut malam , jangan lupa istirahat ");
// Jam 2 Dini Hari - 4 Dini Hari
} else if (hours >= 2 && hours <= 4){
document.write("Waktu dini hari manfaatkan untuk sholat tahajud ya");
// Jam 6 Pagi - 8 Pagi
} else if (hours >= 5 && hours <= 8){
document.write("Buruan mandi sebelum kesiangan dan selamat berangkat kerja ");
// Jam 7 Malam - 8 Malam
} else if (hours >= 19 && hours<= 20){
document.write("Sudah waktunya Sholat Isya' ya, keburu entar waktu sholatnya habis");
// Jam 5 Malam - 6 Malam
} else if (hours >= 5 && hours<= 6){
document.write("Sudah waktunya Sholat Subuh ya, keburu entar waktu sholatnya habis");
// Jam 9 Pagi - 12 Siang
} else if (hours >= 9 && hours <= 12){
document.write("Selamat siang , jangan lupa makan siang ");
// Jam 12 siang - 1 siang
} else if (hours >= 12 && hours<= 13){
document.write("Sudah waktunya Sholat Zhuhur ya, keburu entar waktu sholatnya habis");
// Jam 2 siang - 3 sore
} else if (hours >= 14 && hours<= 15){
document.write("Sudah makan belum, makan dulu deh entar kamu sakit lagi");
}
//]]></script></div>Contoh demo penggabungan CSS
Nah dibawah ini bisa kamu lihat dari penggabungan antara kode CSS dan javascript tersebut
Info : Kamu bisa merubah tampilannya didalam kode CSS yang telah saya jabarkan sebelumnya