Membuat Ucapan Selamat Pagi, Siang, Sore, Malam di Website / Blog

Ada berbagai cara untuk menyambut visitor Web, diantaranya adalah dengan membuat Ucapan Selamat Datang, atau Selamat Pagi, Siang, Sore, Malam (Realtime sesuai waktu kunjungan). Untuk contohnya bisa lihat di blog ini.

Untuk membuat Ucapan selamat tentunya menggunakan JavaScript dan HTML, dan sedikit sentuhan CSS. Banyak tutorial membuat Ucapan ini dengan menggunakan document.write. Banyak pakar mengatakan hindari penggunaan document.write dalam penulasan javascript di Blog. Silahkan cari dengan keyword Avoid using document.write

Di sini saya akan berikan 2 model JavaScript, silahkan pilih mana suka sesuai selera.

JavaScript Pertama

Simpan JavaScript ini di atas </body>

<script>  
/*<![CDATA[*/
var greetElem = document.querySelector("#greetings"); 
var curHr = new Date().getHours(); 
var greetMes = ["Wow! Masih Begadang?", 
"Selamat Pagi!", 
"Selamat Siang!", 
"Selamat Sore!", 
"Selamat Malam!", 
"Belum Tidur ya?"]; 
let greetText = ""; if (curHr < 4) greetText = greetMes[0]; 
else if (curHr < 10) greetText = greetMes[1]; 
else if (curHr < 16) greetText = greetMes[2]; 
else if (curHr < 18) greetText = greetMes[3]; 
else if (curHr < 22) greetText = greetMes[4]; 
else greetText = greetMes[5]; 
greetElem.setAttribute('data-content', greetText);
/*]]>*/
</script> 

Sedikit penjelasan, pukul 12 malam - 4 pagi akan memunculkan ucapan Wow! Masih Begadang?
pukul 4 pagi - 9 akan memunculkan ucapan Selamat Pagi!
pukul 10 - 15 akan memunculkan ucapan Selamat Siang!
pukul 16 - 17 akan memunculkan ucapan Selamat Sore!
pukul 18 - 21 akan memunculkan ucapan Selamat Malam!
pukul 22 - 23 akan memunculkan ucapan Belum Tidur ya?

Selanjutnya jangan lupa simpan CSS ini (wajib)

#greetings::after {
  content: attr(data-content);
}

CSS bisa ditambah background, margin, padding dll, sesuai selera. Misalkan menjadi seperti ini

#greetings::after {
  content: attr(data-content);
  padding:10px 15px;
  background:#eee;
  border-radius:8px;
}

Simpan kode ini, dimana Ucapan akan ditampilkan. Untuk percobaan bisa ditempatkan di atas <data:post.body/> (Ucapan akan muncul di atas artikel).

<p data-content='Welcome!' id='greetings'/>

p bisa diganti div atau span, sesuai kebutuhan. Silahkan Simpan template, dan lihat hasilnya di dalam Postingan.

Ujicoba Sendiri!

JavaScript ke-2 (bisa ganti background otomatis sesuai waktu)

Sebagai alternatif JS di atas, kamu bisa gunakan kode ini. Kelebihannya ditambahkan Class untuk tiap waktu. Bisa di kustom sesuai kemauan. Lanjut, simpan di atas </body>

<script>
 /*<![CDATA[*/ 
var now = new Date();
var hours = now.getHours();

var greetings = [
   {"waktu": "begadang",
    "greet": "Wow! Masih Begadang?",
    "hr": hours >= 24 || hours <= 3
  }, 
  {"waktu":"subuh",
    "greet": "Mantap! Sudah bangun Subuh!",
    "hr": hours == 4
  },  
  {"waktu":"pagi",
    "greet": "Hallo! Selamat Pagi!",
    "hr": hours >= 5 && hours <= 9
  },
    {"waktu":"siang",
    "greet": "Selamat Siang!",
    "hr": hours >= 10 && hours <= 15
  },
  {"waktu":"sore",
    "greet": "Selamat Sore!",
    "hr": hours >= 16 && hours <= 17
  },
  {"waktu":"malam",
    "greet": "Selamat Malam!",
    "hr": hours >= 18 && hours <= 20
  },
  {"waktu":"malam1",
    "greet": "Selamat Malam! Masih Kerja?",
    "hr": hours >= 21 && hours <= 23
  }
];

var message = document.getElementById("greeting");
message.innerHTML = greetings.find(el=>el.hr).greet;
message.className = greetings.find(el=>el.hr).waktu;
/*]]>*/
</script>

Tambahkan kode CSS, silahkan edit sesuai keinginan.

.subuh, .pagi, .siang, .sore, .malam, .malam1, .begadang {padding:10px 15px;border-radius:8px;display:inline-block;margin-left:20px}
.begadang{
  color: purple;
  background: #ccf;
}
.malam1 {
  color: #ffffdc;
  background: #555;
}
.malam{
  color: #f4f2f1;
  background: #e49c6c;
}
.sore {
  color: red;
  background: #ffdede;
}
.siang {
  color: #6b3696;
  background: #e6e0eb;
}
.pagi {
  color: white;
  background: #eda840;
}
.subuh {
  color: blue;
  background: #yellow;
}

Tempatkan kode ini dimana ucapan akan dimunculkan. Seperti di atas, kalau masih bingung bisa dicoba di atas <data:post.body/> (Ucapan akan muncul di atas artikel).

<p data-content='Welcome!' id='greeting'/>

p bisa diganti div atau span, sesuai kebutuhan. Silahkan Simpan template, dan lihat hasilnya di dalam Postingan.

Demo di Blog Ujicoba Sendiri!

Silahkan ujicoba dengan waktu, desain dll. Kalau masih ada yang perlu didiskusikan silahkan di kolom komentar.