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.

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.

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

Berita Lebih Baru Berita Lebih Lama
  • Iwan Efendi
    Profil: https://www.blogger.com/profile/16390541995541443065
    21 Mei, 2023

    keren kang, nanti dicobain kalau sudah sempat.

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      21 Mei, 2023

      Siap kang... Silahkan

    • Iwan Efendi
      Profil:https://www.blogger.com/profile/16390541995541443065
      28 Mei, 2023

      Req yang buat tulisan ini dibawah judul itu kang, nampilinnya pakai scrip apa ya..?


      Realtime Welcome Greeting Message for Visitor with JavaScript

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      29 Mei, 2023

      pake ini mas <data:blog.metaDescription/>

    • Iwan Efendi
      Profil:https://www.blogger.com/profile/16390541995541443065
      29 Mei, 2023

      Gak butuh script lain-lain ya kang..? Tinggal di atur aja di template mau di letak dimana gitu ya..?

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      29 Mei, 2023

      Komentar ini telah dihapus oleh Kang Ismet sebagai penulis.

    • Iwan Efendi
      Profil:https://www.blogger.com/profile/16390541995541443065
      29 Mei, 2023

      Setelah di pelajari dah aman kang, dah saya pasang di blog. hihi

    • Iwan Efendi
      Profil:https://www.blogger.com/profile/16390541995541443065
      29 Mei, 2023

      Cek kang, sudah saya pasang..

  • Komptik.
    Profil: https://www.blogger.com/profile/12539447420583352703
    21 Mei, 2023

    Terimakasih kang, sudah terpasang

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      21 Mei, 2023

      siap.. sama sama kang

  • Amir
    Profil: https://www.blogger.com/profile/05062274712424026395
    28 Mei, 2023

    lama lama capek kang. pengin ubah blog ke bawaan blogspot aja domainnya biar selamanya bisa diakses. gara gara kepikiran sama tulisan yg di corkismet, biar tulisannya terus ada bisa diakses selama platform blogger tetap ada 🥲

    • Amir
      Profil:https://www.blogger.com/profile/05062274712424026395
      28 Mei, 2023

      biar tetap terkenang beuh. kalo custom domain kudu terus jaga buat renew terus

    • Iwan Efendi
      Profil:https://www.blogger.com/profile/16390541995541443065
      28 Mei, 2023

      Cuma kalau pakai blogspot kayak kurang semangat mas ngeblognya, cobain lah, saya pernah di fase seperti mas.

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      29 Mei, 2023

      nah emang dilema.. disisi lain domain blogspot kurang trusted, kaya kurang serius gitu ngeblognya.. tapi disisi lain akan terus ada.. mungkin solusinya artikel dibagi 2 hehe

    • Amir
      Profil:https://www.blogger.com/profile/05062274712424026395
      29 Mei, 2023

      ah bimbang

    • Iwan Efendi
      Profil:https://www.blogger.com/profile/16390541995541443065
      29 Mei, 2023

      Saya pernah di fase itu mas, saran saya pertahankan TLD nya, karena saya sampai nyesal ngelepas domain saya yang pertama kali. Sampai sekrang masih kepikiran sama tuh domain.

      Domain bersejarah padahal, pertama kali gajian dari domain itu. hihi

    • Amir
      Profil:https://www.blogger.com/profile/05062274712424026395
      29 Mei, 2023

      @IwnEfndi.com kalau domainnya sih saya nggak lepas, akan tetap saya renew, mau dijadikan bio link, untuk blog pake domain bawaan biar lifetime. biar nggak ada lagi domain expired, index ulang lagi. lagian blogku tulisan personal, dan ya, adsense bakal dicopot. kalau topik nice selain personal sih tetep pake custom domain. lagian adsense lebih dari 1 site, gak ngarep juga sih. intinya nulis personal fokus cerita dan biar lifetime dibaca lintas generasi suatu saat, dan tetap aktif ketika gak ada lagi jangkauan karena gak harus renew domain. gimana pendapatnya mas? galau.

Tambahkan Komentar
comment url
Terima kasih telah berkomentar di Blog Kang Ismet.
  • Untuk menyisipkan Gambar, Kode, atau Kutipan silahkan klik Tab Sisipkan di atas.
  • Emoji yang bisa digunakan pada komentar :), :D, :( <3, :love dan :top
  • Untuk melihat Komentar yang telah ditambah sisipan kunjungi DEMO
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Klik tombol Salin Kode! lalu paste ke kolom komentar.


image quote pre code
17 Komentar