Kode JavaScript Interaktif Menampilkan Ucapan Selamat Pagi Malam Sesuai Jam Pengunjung

4/07/2026
Kode JavaScript Menampilkan Ucapan Selamat Pagi Siang Sore Malam Sesuai Waktu Pengunjung

Website atau blog dapat dibuat lebih interaktif dengan menampilkan ucapan otomatis berdasarkan waktu pengunjung. Dengan bantuan JavaScript, kita dapat membuat teks yang berubah sesuai dengan jam ketika halaman dibuka, misalnya menampilkan Selamat Pagi, Selamat Siang, Selamat Sore, atau Selamat Malam.

Fitur sederhana ini dapat digunakan pada berbagai jenis website, termasuk Blogger atau Blogspot. Selain membuat tampilan lebih dinamis, sapaan berdasarkan waktu dapat memberikan sentuhan personal kepada pengunjung tanpa membutuhkan sistem server khusus.

Pada tutorial ini, kita akan membahas cara membuat ucapan otomatis sesuai jam pengunjung di Blogger menggunakan HTML, CSS, dan JavaScript. Kode dibuat sederhana sehingga dapat dipelajari dan dimodifikasi oleh pemula.

Apa Itu Script Ucapan Sesuai Waktu Pengunjung?

Script ucapan sesuai waktu adalah kode JavaScript yang membaca waktu lokal dari perangkat pengunjung ketika halaman web dimuat. JavaScript dapat mengambil nilai jam menggunakan objek Date(), kemudian menentukan teks yang akan ditampilkan berdasarkan rentang waktu yang telah ditentukan.

Secara sederhana, alurnya seperti berikut:

Pengunjung membuka halaman
        ↓
JavaScript membaca jam perangkat
        ↓
Jam diperiksa berdasarkan kondisi
        ↓
Teks ucapan ditentukan
        ↓
Ucapan ditampilkan pada halaman

Karena waktu dibaca dari perangkat pengunjung, hasil yang ditampilkan mengikuti pengaturan waktu lokal perangkat tersebut.

Manfaat Membuat Ucapan Otomatis di Blogger

Walaupun sederhana, fitur sapaan otomatis dapat memberikan variasi pada tampilan blog dan membuat elemen tertentu terasa lebih interaktif.

  • Membuat blog terasa lebih interaktif karena teks dapat berubah secara otomatis.
  • Memberikan sentuhan personal kepada pengunjung.
  • Tidak membutuhkan database untuk menentukan ucapan.
  • Dapat diterapkan menggunakan JavaScript sederhana.
  • Mudah dimodifikasi sesuai kebutuhan desain dan gaya bahasa blog.
  • Dapat digunakan pada berbagai bagian halaman seperti header, sidebar, atau area konten.

Fitur ini sebaiknya dipandang sebagai elemen tambahan untuk pengalaman pengguna. Sapaan otomatis bukan faktor yang secara langsung menentukan peringkat SEO sebuah halaman.

Contoh Ucapan Berdasarkan Jam

Dalam contoh script ini, waktu dibagi menjadi empat periode.

  • 00.00–10.59: Selamat Pagi.
  • 11.00–14.59: Selamat Siang.
  • 15.00–18.59: Selamat Sore.
  • 19.00–23.59: Selamat Malam.

Rentang tersebut dapat Anda ubah dengan mudah melalui kondisi pada kode JavaScript.

Kode Membuat Ucapan Otomatis di Blogger

Untuk membuat fitur ini, kita akan menggunakan tiga bagian utama, yaitu CSS untuk tampilan, HTML sebagai tempat ucapan, dan JavaScript sebagai logika pendeteksi waktu.

1. Kode CSS Kotak Sapaan

CSS berikut digunakan untuk membuat kotak sapaan agar terlihat lebih rapi. Anda dapat mengubah warna dan ukuran sesuai dengan desain template Blogger.

<style>
.kotak-sapaan-waktu {
  background-color: #f0fdf4;
  color: #166534;
  padding: 15px 20px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  border: 1px solid #bbf7d0;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.kotak-sapaan-waktu:hover {
  background-color: #dcfce7;
  transform: translateY(-2px);
}
</style>

2. Kode HTML Kotak Ucapan

Selanjutnya, buat elemen HTML sebagai tempat JavaScript menampilkan ucapan.

<div id="tempatUcapanWaktu" class="kotak-sapaan-waktu">
  Menyiapkan sapaan...
</div>

Bagian id="tempatUcapanWaktu" sangat penting karena JavaScript akan mencari elemen tersebut untuk memasukkan teks ucapan.

3. Kode JavaScript Pendeteksi Waktu

Berikut kode JavaScript yang membaca jam perangkat pengunjung dan menentukan ucapan secara otomatis.

<script>
document.addEventListener("DOMContentLoaded", function() {

  var jamSekarang = new Date().getHours();
  var teksUcapan = "";
  var elemenUcapan = document.getElementById("tempatUcapanWaktu");

  if (elemenUcapan) {

    if (jamSekarang >= 0 && jamSekarang < 11) {
      teksUcapan = "Selamat Pagi! Selamat memulai aktivitas Anda.";

    } else if (jamSekarang >= 11 && jamSekarang < 15) {
      teksUcapan = "Selamat Siang! Tetap semangat menjalani hari.";

    } else if (jamSekarang >= 15 && jamSekarang < 19) {
      teksUcapan = "Selamat Sore! Waktunya bersantai sejenak.";

    } else {
      teksUcapan = "Selamat Malam! Selamat beristirahat dengan tenang.";
    }

    elemenUcapan.innerText = teksUcapan;
  }

});
</script>

Bagaimana Cara Kerja JavaScript Ini?

Kode JavaScript tersebut menggunakan new Date().getHours() untuk mendapatkan angka jam saat ini. Nilai yang diperoleh kemudian dibandingkan menggunakan struktur if dan else if.

Contohnya, ketika nilai jam adalah 08, kondisi pertama terpenuhi sehingga teks yang ditampilkan adalah:

Selamat Pagi! Selamat memulai aktivitas Anda.

Jika nilai jam menunjukkan 20, kondisi pertama, kedua, dan ketiga tidak terpenuhi sehingga JavaScript menggunakan kondisi else dan menampilkan ucapan malam.

Cara Memasang Ucapan Otomatis di Blogger

Jika Anda ingin menampilkan sapaan pada bagian tertentu dari blog, salah satu cara yang praktis adalah menggunakan gadget HTML/JavaScript melalui menu Tata Letak Blogger.

Langkah 1: Buka Dashboard Blogger

Masuk ke dashboard Blogger dan pilih blog yang ingin Anda modifikasi.

Langkah 2: Buka Menu Tata Letak

Pilih menu Tata Letak. Pada halaman tersebut Anda akan melihat berbagai bagian layout seperti header, sidebar, footer, dan area lainnya.

Langkah 3: Tambahkan Gadget HTML/JavaScript

Pilih Tambahkan Gadget, kemudian cari dan pilih HTML/JavaScript.

Anda dapat mengosongkan judul gadget jika tidak ingin menampilkan judul tambahan.

Langkah 4: Masukkan Kode

Masukkan CSS, HTML, dan JavaScript yang telah disediakan ke dalam area konten gadget.

Urutan kode yang disarankan adalah:

CSS
↓
HTML
↓
JavaScript

Langkah 5: Simpan Perubahan

Klik Simpan, kemudian buka blog untuk melihat hasilnya. Ucapan akan ditentukan secara otomatis berdasarkan jam perangkat yang digunakan pengunjung.

Cara Menempatkan Sapaan di Area Artikel

Jika Anda hanya ingin menampilkan fitur tersebut pada artikel tertentu, kode dapat ditempatkan langsung di area konten melalui mode HTML Blogger.

Buka artikel, pilih mode HTML, kemudian masukkan struktur berikut pada lokasi yang diinginkan:

<div id="tempatUcapanWaktu" class="kotak-sapaan-waktu">
  Menyiapkan sapaan...
</div>

Pastikan CSS dan JavaScript juga tersedia agar elemen tersebut dapat bekerja sebagaimana mestinya.

Cara Mengubah Teks Ucapan

Anda dapat mengganti kalimat ucapan sesuai karakter blog. Bagian yang perlu diubah adalah nilai pada variabel teksUcapan.

Contohnya:

teksUcapan = "Selamat Pagi! Semoga aktivitas Anda hari ini berjalan lancar.";

Untuk siang:

teksUcapan = "Selamat Siang! Terima kasih sudah berkunjung ke blog kami.";

Untuk sore:

teksUcapan = "Selamat Sore! Semoga informasi di blog ini bermanfaat.";

Untuk malam:

teksUcapan = "Selamat Malam! Selamat menikmati waktu istirahat Anda.";

Cara Mengubah Warna Kotak Sapaan

Warna kotak dapat diubah melalui properti background-color dan color.

Contohnya:

.kotak-sapaan-waktu {
  background-color: #f0fdf4;
  color: #166534;
}

Anda dapat menyesuaikan warna tersebut dengan warna utama template Blogger agar kotak sapaan terlihat menyatu dengan desain website.

Cara Menghilangkan Efek Hover

Jika Anda tidak ingin kotak berubah ketika kursor diarahkan ke atasnya, bagian hover dapat dihapus.

Hapus kode:

.kotak-sapaan-waktu:hover {
  background-color: #dcfce7;
  transform: translateY(-2px);
}

Dengan demikian, kotak akan tetap menggunakan tampilan yang sama ketika kursor berada di atasnya.

Cara Menguji Script Ucapan Berdasarkan Waktu

Setelah memasang kode, Anda dapat mengujinya dengan membuka halaman Blogger dan melihat teks yang muncul.

Jika ingin menguji periode waktu yang berbeda tanpa menunggu, Anda dapat mengubah sementara waktu pada perangkat untuk melihat bagaimana JavaScript merespons perubahan jam.

Pastikan setelah selesai melakukan pengujian, pengaturan waktu perangkat dikembalikan ke mode otomatis.

Kesalahan yang Sering Terjadi

1. Ucapan Tidak Berubah

Periksa apakah JavaScript berhasil dimuat dan pastikan elemen HTML memiliki ID yang sama dengan yang dicari JavaScript.

ID yang digunakan adalah:

tempatUcapanWaktu

2. Tulisan Tetap "Menyiapkan Sapaan"

Jika tulisan awal tidak berubah, kemungkinan JavaScript mengalami error atau terdapat kesalahan penulisan kode. Periksa kembali tanda kurung, tanda kutip, dan nama variabel.

3. CSS Tidak Berfungsi

Pastikan class HTML sama dengan selector CSS:

kotak-sapaan-waktu

Jika template memiliki aturan CSS yang lebih kuat, Anda mungkin perlu menyesuaikan selector agar gaya dapat diterapkan.

4. Jam Pengunjung Tidak Sesuai

JavaScript pada contoh ini mengambil waktu dari perangkat pengunjung. Jika pengaturan tanggal, waktu, atau zona waktu pada perangkat tidak benar, hasil sapaan juga dapat berbeda dari waktu sebenarnya.

Tips Membuat Sapaan Otomatis Tetap Ringan

Script ini relatif sederhana karena hanya melakukan pembacaan jam dan mengubah teks pada satu elemen halaman. Namun, tetap hindari menambahkan terlalu banyak efek JavaScript yang tidak diperlukan.

  • Gunakan JavaScript secukupnya.
  • Hindari animasi yang terlalu berat.
  • Gunakan CSS sederhana.
  • Pastikan kotak sapaan tidak menutupi konten penting.
  • Uji tampilan pada smartphone dan desktop.

Apakah Script Ini Membutuhkan Server?

Tidak. Contoh script ini bekerja di sisi browser atau client-side. JavaScript membaca waktu dari perangkat pengunjung ketika halaman dibuka.

Karena tidak membutuhkan database atau proses server untuk menentukan teks ucapan, implementasinya relatif sederhana dan dapat digunakan pada halaman Blogger.

Apakah Script Ini Bisa Digunakan di Selain Blogger?

Ya. Karena menggunakan HTML, CSS, dan JavaScript standar, konsepnya dapat digunakan pada berbagai website yang mengizinkan JavaScript, bukan hanya Blogger.

Anda dapat menyesuaikan selector HTML dan lokasi penempatan kode dengan struktur website yang digunakan.

FAQ Script Ucapan Otomatis Blogger

Apakah ucapan otomatis bisa dibuat berdasarkan jam pengunjung?

Ya. JavaScript dapat membaca jam lokal perangkat menggunakan objek Date kemudian menentukan teks berdasarkan rentang waktu yang telah dibuat.

Apakah script ini bisa digunakan di Blogger?

Ya. Script HTML, CSS, dan JavaScript seperti contoh ini dapat digunakan pada Blogger dengan penempatan yang sesuai dengan struktur template.

Apakah waktu yang ditampilkan mengikuti lokasi pengunjung?

Script contoh ini membaca waktu lokal dari perangkat pengunjung. Oleh karena itu, hasilnya mengikuti pengaturan tanggal, waktu, dan zona waktu pada perangkat tersebut.

Apakah script ucapan otomatis membutuhkan database?

Tidak. Script ini tidak membutuhkan database karena proses penentuan ucapan dilakukan langsung di browser pengunjung.

Apakah teks ucapan bisa diganti?

Ya. Anda dapat mengganti isi variabel teksUcapan dengan kalimat yang sesuai dengan gaya dan kebutuhan website.

Apakah script ini meningkatkan SEO Blogger?

Tidak secara langsung. Script ucapan otomatis merupakan elemen interaktif untuk pengalaman pengguna dan bukan faktor yang secara otomatis meningkatkan peringkat SEO.

Kesimpulan

Cara membuat ucapan otomatis sesuai jam pengunjung di Blogger dapat dilakukan dengan HTML, CSS, dan JavaScript sederhana. JavaScript membaca jam lokal perangkat menggunakan new Date().getHours(), kemudian memilih teks berdasarkan rentang waktu yang telah ditentukan.

Dengan teknik ini, blog dapat menampilkan Selamat Pagi, Selamat Siang, Selamat Sore, atau Selamat Malam secara otomatis. Fitur tersebut dapat ditempatkan di header, sidebar, halaman, maupun artikel tertentu sesuai kebutuhan.

Anda juga dapat memodifikasi warna, ukuran, desain kotak, serta kalimat sapaan agar sesuai dengan identitas visual blog. Pastikan kode tetap sederhana dan lakukan pengujian pada perangkat desktop maupun smartphone.

Walaupun fitur ini bukan faktor SEO secara langsung, elemen interaktif seperti sapaan waktu dapat menjadi sentuhan tambahan yang membuat tampilan Blogger terasa lebih hidup dan personal bagi pengunjung.

Baca Artikel Lainnya

Kembali ke Beranda
Link profil berhasil disalin!