Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger / Tutorial

Membuat Ucapan Selamat Pagi Siang Sore dan Malam Otomatis di Blogger

Diposting oleh Arief Setiawan Posting Komentar

Dalam lanskap digital yang terus berkembang, personalisasi menjadi kunci utama dalam membangun interaksi yang bermakna dengan audiens daring. Sebuah blog, sebagai jendela informasi dan interaksi, memiliki potensi besar untuk menciptakan pengalaman pengguna yang lebih hangat dan personal.

Membuat Ucapan Selamat Pagi Siang Sore dan Malam Otomatis di Blogger

Salah satu cara sederhana namun efektif untuk mencapai hal ini adalah dengan mengimplementasikan ucapan selamat yang dinamis, berubah secara otomatis menyesuaikan dengan waktu kunjungan. Fitur ini, meskipun tampak kecil, mampu memberikan sentuhan personal yang signifikan, membuat pengunjung merasa lebih disambut dan dihargai.

Artikel ini bertujuan untuk memberikan panduan komprehensif mengenai cara membuat dan memasang ucapan selamat otomatis (pagi, siang, sore, malam) di platform Blogger. Kami akan membahas langkah-langkah teknis secara mendalam, memberikan penjelasan teoritis mengenai implementasi JavaScript, serta mengulas manfaat fitur ini dari sudut pandang SEO dan pengalaman pengguna. Lebih dari sekadar tutorial teknis, artikel ini akan mengeksplorasi bagaimana personalisasi sederhana dapat berkontribusi pada kesuksesan jangka panjang sebuah blog.

Mengapa Ucapan Selamat Otomatis Penting untuk Blog Anda?

  1. Peningkatan Pengalaman Pengguna (User Experience - UX): Ucapan selamat yang dipersonalisasi menciptakan kesan pertama yang positif. Pengunjung merasa disambut secara khusus, layaknya memasuki ruang fisik di mana tuan rumah menyapa mereka. Sentuhan kecil ini dapat meningkatkan kenyamanan dan keinginan pengunjung untuk menjelajahi lebih lanjut konten blog Anda.
  2. Meningkatkan Keterlibatan (Engagement): Sapaan yang relevan dengan waktu kunjungan dapat menarik perhatian pengunjung dan membuat mereka merasa lebih terhubung dengan blog Anda. Keterlibatan yang lebih tinggi berpotensi meningkatkan waktu tinggal di halaman (dwell time) dan mengurangi tingkat pentalan (bounce rate), metrik penting dalam algoritma penilaian kualitas situs web oleh mesin pencari.
  3. Personalisasi Sederhana yang Efektif: Dibandingkan dengan teknik personalisasi yang kompleks, implementasi ucapan selamat otomatis relatif mudah dilakukan. Namun, dampaknya terhadap persepsi pengunjung bisa sangat signifikan. Fitur ini menunjukkan perhatian terhadap detail dan upaya untuk menciptakan interaksi yang lebih manusiawi.
  4. Diferensiasi dari Kompetitor: Di tengah lautan blog dengan konten serupa, sentuhan personal seperti ucapan selamat otomatis dapat menjadi pembeda yang subtil namun efektif. Blog Anda akan terasa lebih unik dan berkesan di mata pengunjung.
  5. Potensi Peningkatan SEO (Search Engine Optimization): Meskipun tidak secara langsung mempengaruhi peringkat, peningkatan UX dan engagement yang dihasilkan oleh fitur ini dapat memberikan dampak positif jangka panjang pada SEO. Mesin pencari cenderung memberikan preferensi kepada situs web yang memberikan pengalaman pengguna yang baik.

Konsep Dasar: Memanfaatkan JavaScript untuk Dinamisme

Untuk menciptakan ucapan selamat yang berubah secara otomatis berdasarkan waktu, kita akan memanfaatkan kekuatan bahasa pemrograman sisi klien, JavaScript. JavaScript memungkinkan kita untuk memanipulasi elemen HTML dan CSS di halaman web secara dinamis, tanpa perlu melakukan permintaan ulang ke server.

Dalam konteks ini, JavaScript akan bertugas untuk:

  • Mendapatkan Informasi Waktu: Mengakses waktu saat ini dari sistem komputer pengunjung melalui objek Date().
  • Menganalisis Jam: Mengekstrak informasi jam dari objek Date() untuk menentukan rentang waktu (pagi, siang, sore, malam).
  • Memilih Ucapan yang Sesuai: Berdasarkan analisis jam, JavaScript akan memilih ucapan selamat yang relevan dari serangkaian pilihan yang telah ditentukan.
  • Memperbarui Tampilan: Memanipulasi elemen HTML tertentu di halaman untuk menampilkan ucapan selamat yang telah dipilih.

Langkah Demi Langkah: Implementasi Ucapan Selamat Otomatis di Blogger

Berikut adalah langkah-langkah detail untuk mengimplementasikan fitur ucapan selamat otomatis di blog Blogger Anda:

Langkah 1: Akses Dasbor Blogger

Langkah pertama adalah masuk ke akun Blogger Anda melalui peramban web. Kunjungi situs web Blogger (www.blogger.com) dan masukkan alamat email serta kata sandi akun Google Anda. Setelah berhasil masuk, Anda akan diarahkan ke dasbor Blogger, tempat Anda dapat mengelola semua blog yang Anda miliki.

Langkah 2: Pilih Blog yang Akan Diimplementasikan

Jika Anda memiliki lebih dari satu blog, pastikan Anda memilih blog yang ingin Anda tambahkan fitur ucapan selamat otomatis ini. Anda dapat melakukannya dengan mengklik nama blog yang bersangkutan di dasbor.

Langkah 3: Navigasi ke Menu "Tata Letak" (Layout)

Setelah memilih blog, langkah selanjutnya adalah mengakses menu "Tata Letak" yang terletak di panel navigasi sebelah kiri dasbor. Menu ini memungkinkan Anda untuk mengatur struktur dan elemen-elemen visual blog Anda, termasuk penambahan widget atau gadget.

Langkah 4: Pilih Lokasi Penempatan Widget

Di halaman "Tata Letak", Anda akan melihat berbagai bagian atau area di mana Anda dapat menambahkan widget. Pilih lokasi yang strategis untuk menampilkan ucapan selamat, misalnya di bagian atas sidebar, di bawah header blog, atau di bagian footer yang terlihat di setiap halaman. Klik tombol "Tambahkan Gadget" (Add a Gadget) di area yang Anda pilih.

Langkah 5: Pilih Gadget "HTML/JavaScript"

Setelah mengklik "Tambahkan Gadget", akan muncul jendela pop-up yang berisi daftar berbagai jenis gadget yang tersedia untuk Blogger. Cari dan pilih gadget dengan nama "HTML/JavaScript". Gadget ini memungkinkan Anda untuk menambahkan kode HTML dan JavaScript kustom ke blog Anda.

Langkah 6: Masukkan Kode HTML dan JavaScript

Di jendela konfigurasi gadget "HTML/JavaScript", Anda akan melihat dua kolom utama: "Judul" (Title) dan "Konten" (Content).

  • Judul (Opsional): Anda dapat mengisi kolom judul dengan nama widget ini, misalnya "Ucapan Selamat" atau biarkan kosong jika Anda tidak ingin menampilkan judul.
  • Konten: Di kolom "Konten" inilah Anda akan memasukkan kode HTML dan JavaScript berikut:
<div id="ucapanSelamat"></div>

<script>
function tampilkanUcapan() {
  const waktu = new Date();
  const jam = waktu.getHours();
  let ucapan;

  if (jam >= 0 && jam < 4) {
    ucapan = "Selamat dini hari!";
  } else if (jam >= 4 && jam < 11) {
    ucapan = "Selamat pagi!";
  } else if (jam >= 11 && jam < 15) {
    ucapan = "Selamat siang!";
  } else if (jam >= 15 && jam < 18) {
    ucapan = "Selamat sore!";
  } else if (jam >= 18 && jam < 20) {
    ucapan = "Selamat petang!";
  } else {
    ucapan = "Selamat malam!";
  }

  document.getElementById("ucapanSelamat").textContent = ucapan;
}

tampilkanUcapan();
</script>

Penjelasan Kode:

  • <div id="ucapanSelamat"></div>: Baris ini menciptakan sebuah elemen div dengan ID "ucapanSelamat". Elemen ini akan menjadi wadah tempat ucapan selamat ditampilkan di halaman blog Anda.
  • <script> dan </script>: Tag ini menandai bagian kode JavaScript.
  • function tampilkanUcapan() { ... }: Ini adalah sebuah fungsi JavaScript yang bernama tampilkanUcapan. Fungsi ini berisi logika untuk menentukan ucapan selamat berdasarkan waktu.
  • const waktu = new Date();: Baris ini membuat sebuah objek Date yang berisi informasi tanggal dan waktu saat ini dari sistem pengunjung.
  • const jam = waktu.getHours();: Baris ini mengambil informasi jam (dalam format 24 jam, 0-23) dari objek waktu.
  • let ucapan;: Baris ini mendeklarasikan sebuah variabel bernama ucapan yang akan menyimpan teks ucapan selamat.
  • Blok if-else if-else: Blok kode ini melakukan pengecekan terhadap nilai variabel jam untuk menentukan rentang waktu yang sesuai dan menetapkan nilai variabel ucapan dengan ucapan selamat yang relevan. Pembagian waktu di sini adalah:
    • 00:00 - 03:59: Selamat dini hari!
    • 04:00 - 10:59: Selamat pagi!
    • 11:00 - 14:59: Selamat siang!
    • 15:00 - 17:59: Selamat sore!
    • 18:00 - 19:59: Selamat petang!
    • 20:00 - 23:59: Selamat malam!
  • document.getElementById("ucapanSelamat").textContent = ucapan;: Baris ini mencari elemen HTML dengan ID "ucapanSelamat" dan mengubah teks kontennya (textContent) menjadi nilai yang tersimpan dalam variabel ucapan.
  • tampilkanUcapan();: Baris ini memanggil fungsi tampilkanUcapan() untuk menjalankan logika dan menampilkan ucapan selamat saat halaman dimuat.

Langkah 7: Simpan Gadget dan Tata Letak

Setelah memasukkan kode, klik tombol "Simpan" (Save) di jendela konfigurasi gadget "HTML/JavaScript". Kemudian, jangan lupa untuk mengklik tombol "Simpan Tata Letak" (Save Arrangement) di bagian bawah halaman "Tata Letak" agar perubahan yang Anda buat diterapkan pada blog Anda.

Langkah 8: Lihat Hasilnya di Blog Anda

Sekarang, kunjungi blog Anda melalui peramban web. Anda akan melihat ucapan selamat yang ditampilkan di lokasi widget yang Anda pilih. Ucapan tersebut akan berubah secara otomatis sesuai dengan waktu saat Anda atau pengunjung lain mengakses blog Anda.

JavaScript Menampilkan Hari Tanggal Dan Ucapan Text Berjalan

berikut masih ada beberapa javascript yang bisa anda coba untuk mempercantik tampilan blog anda, mulai dari ucapan salam dengan text bisa berjalan, menampilkan hari dan tanggal yang bisa berganti secara otomatis, nah tentu sangat keren kan.

JavaScript Menampilkan ucapan salam dengan text Berjalan


<marquee>
<script>

var Digital=new Date()

var hours=Digital.getHours()


//Kata katanya silahkan di sesuaikan dengan pesan yang Anda inginkan

if (hours>=5&&hours<=11) //pesan pagi hari (05.00-11.00)

document.write('<b>Selamat Pagi Sobat Blogger! Terima Kasih Pagi-Pagi Sudah Berkunjung</b>')

else if (hours==13) //pesan siang hari (12.00-14.00)

document.write('<b>Selamat Siang dan Selamat Makan Siang Sobat! Terima Kasih atas Kunjungannya</b>')

else if (hours>=14&&hours<=17) //pesan sore hari(15.00-17.00)

document.write('<b>Selamat Sore Sobat! Terima Kasih Sudah Berkunjung ya.</b>')

else if (hours>=18&&hours<=20) //pesan petang hari (18.oo-20.00)

document.write('<b>Selamat Petang dan Selamat Bersantai-santai Sobat! Terima Kasih Sudah Berkunjung</b>')

else if (hours>=21&&hours<=11) //pesan malam hari (21.00-23.00)

document.write('<b>Selamat Malam Sobat Blogger! Terima Kasih Sudah Berkunjung</b>')

else //pesan malam mejelang pagi(00.00-04.00)

document.write('<b>Selamat malam sobat, jangan lupa ngopi dulu biar nggak spaning</b>')

//edit by https://www.otakcerdas.com

</script>
  </marquee>

Berikut adalah hasil dari kode di atas:

JavaScript Menampilkan Hari Dan Tanggal Otomatis:


<div id="tanggalOtomatis"></div>

<script>
function perbaruiTanggal() {
  const waktuSekarang = new Date();
  const hariIndonesia = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
  const namaHari = hariIndonesia[waktuSekarang.getDay()];
  const tanggal = waktuSekarang.getDate();
  const bulanIndonesia = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
  const namaBulan = bulanIndonesia[waktuSekarang.getMonth()];
  const tahun = waktuSekarang.getFullYear();

  const formatTanggal = `${namaHari}, ${tanggal} ${namaBulan} ${tahun}`;
  document.getElementById("tanggalOtomatis").textContent = formatTanggal;
}

// Panggil fungsi perbarui Tanggal saat halaman dimuat
perbaruiTanggal();
</script>

Berikut adalah hasil dari kode di atas:

JavaScript Menampilkan Ucapan Salam Beserta Hari Tanggal Dan Tahun


<div id="ucapanLengkap"></div>

<script>
function tampilkanUcapanLengkap() {
  const waktu = new Date();
  const jam = waktu.getHours();
  const hariIndonesia = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
  const namaHari = hariIndonesia[waktu.getDay()];
  const tanggal = waktu.getDate();
  const bulanIndonesia = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
  const namaBulan = bulanIndonesia[waktu.getMonth()];
  const tahun = waktu.getFullYear();
  let bagianWaktu;

  if (jam >= 0 && jam < 11) {
    bagianWaktu = "pagi";
  } else if (jam >= 11 && jam < 15) {
    bagianWaktu = "siang";
  } else if (jam >= 15 && jam < 18) {
    bagianWaktu = "sore";
  } else {
    bagianWaktu = "malam";
  }

  const ucapan = `Selamat ${bagianWaktu}, hari ini hari ${namaHari}, tanggal ${tanggal} ${namaBulan} ${tahun}.`;
  document.getElementById("ucapanLengkap").textContent = ucapan;
}

tampilkanUcapanLengkap();
</script>

Berikut adalah hasil dari kode di atas original tanpa modifikasi

JavaScript Menampilkan Ucapan yang bisa berubah saat halaman di Load


<div id="ucapanOtomatis"></div>

<script>
const daftarUcapanOtomatis = [
  "Selamat datang!",
  "Hai pengunjung!",
  "Terima kasih sudah berkunjung!",
  "Semoga Anda menikmati konten kami!",
  "Selamat membaca!",
  "Salam hangat dari kami!",
  "Apa kabar hari ini?",
  "Senang Anda mampir!",
  "Jangan ragu untuk menjelajahi!",
  "Semoga hari Anda menyenangkan!"
];

function tampilkanUcapanAcak() {
  const randomIndex = Math.floor(Math.random() * daftarUcapanOtomatis.length);
  document.getElementById("ucapanOtomatis").textContent = daftarUcapanOtomatis[randomIndex];
}

// Panggil fungsi tampilkanUcapanAcak saat halaman dimuat
tampilkanUcapanAcak();
</script>

Berikut adalah hasil dari kode di atas:

Opsi Kustomisasi Lebih Lanjut

Serangkaian dari kode di atas adalah implementasi dasar. Anda dapat melakukan berbagai kustomisasi lebih lanjut untuk membuat tampilanya lebih menarik dan sesuai selera, silahkan di otak atik sendiri ya dan buatlah text nya menjadi lebih unik, lebih menarik agar tidak membosankan.

  • Variasi Ucapan: Anda dapat menambahkan lebih banyak variasi ucapan selamat untuk setiap rentang waktu agar tidak monoton. Misalnya, untuk "Selamat pagi!", Anda bisa menambahkan "Semoga hari Anda menyenangkan!" atau "Selamat beraktivitas!". Caranya adalah dengan membuat array berisi beberapa ucapan untuk setiap kondisi waktu dan memilih salah satu secara acak.
  • Penambahan Nama Pengunjung (Tingkat Lanjut): Jika Anda memiliki sistem keanggotaan atau cara lain untuk mengidentifikasi pengunjung, Anda dapat menambahkan nama mereka dalam ucapan selamat. Namun, implementasi ini lebih kompleks dan memerlukan penanganan data pengguna.
  • Styling dengan CSS: Anda dapat mempercantik tampilan ucapan selamat dengan menambahkan kode CSS. Misalnya, mengubah ukuran font, warna, jenis huruf, atau menambahkan efek visual lainnya. Anda dapat menambahkan tag <style> di dalam gadget HTML/JavaScript atau melalui pengaturan tema CSS blog Anda.
  • Penggunaan Cookie (Tingkat Lanjut): Anda dapat menggunakan cookie untuk menyimpan ucapan terakhir yang dilihat pengunjung dan menampilkannya kembali saat mereka kembali dalam jangka waktu tertentu. Ini dapat memberikan kesan kontinuitas.

Pertimbangan SEO dan Dampak Jangka Panjang

Meskipun ucapan selamat otomatis adalah fitur kecil, implementasinya yang tepat dapat memberikan kontribusi positif terhadap SEO secara tidak langsung:

  • Peningkatan Dwell Time: Pengalaman pengguna yang lebih baik cenderung membuat pengunjung betah berlama-lama di blog Anda, yang dapat meningkatkan dwell time. Ini adalah metrik yang dipertimbangkan oleh mesin pencari dalam menilai kualitas konten dan relevansi situs web.
  • Penurunan Bounce Rate: Sapaan yang personal dan ramah dapat mengurangi tingkat pentalan (bounce rate), yaitu persentase pengunjung yang meninggalkan blog Anda setelah hanya melihat satu halaman. Penurunan bounce rate dapat mengindikasikan bahwa pengunjung menemukan konten Anda menarik dan relevan.
  • Peningkatan Interaksi: Sentuhan personal dapat mendorong pengunjung untuk berinteraksi lebih lanjut, misalnya dengan membaca artikel lain, meninggalkan komentar, atau berbagi konten di media sosial. Interaksi yang lebih tinggi dapat memberikan sinyal positif kepada mesin pencari tentang kualitas dan daya tarik blog Anda.
  • Branding yang Lebih Kuat: Konsistensi dalam memberikan pengalaman pengguna yang positif, termasuk melalui fitur-fitur kecil seperti ucapan selamat otomatis, dapat membantu membangun brand image yang kuat dan positif untuk blog Anda.

Kesimpulan

Mengimplementasikan ucapan selamat pagi, siang, sore, malam otomatis di Blogger adalah cara yang efektif dan relatif mudah untuk menambahkan sentuhan personal pada blog Anda. Fitur ini tidak hanya meningkatkan pengalaman pengguna dan keterlibatan, tetapi juga berpotensi memberikan dampak positif jangka panjang pada SEO. 

Dengan mengikuti panduan langkah demi langkah yang telah dijelaskan dalam artikel ini, Anda dapat dengan mudah mengintegrasikan fitur dinamis ini ke dalam blog Anda dan menciptakan interaksi yang lebih hangat dan bermakna dengan audiens daring Anda. Teruslah berinovasi dan bereksperimen dengan fitur-fitur personalisasi lainnya untuk menjadikan blog Anda unik dan berkesan bagi setiap pengunjung.

Arief Setiawan
Arief Setiawan Blogger Indonesia Yang senang berbagi ilmu, Seputar tutorial blogger, optimasi SEO dan informasi tentang sosial Media

Posting Komentar untuk "Membuat Ucapan Selamat Pagi Siang Sore dan Malam Otomatis di Blogger"