Kalau kamu pengen blog kamu jadi lebih hidup dan terasa personal, menambahkan salam dinamis bisa jadi pilihan yang pas. Dengan fitur ini, pengunjung blog bakal disambut dengan pesan yang sesuai dengan waktu mereka mampir. Misalnya, kalau mereka datang di pagi hari, akan muncul ucapan “Good Morning!” atau kalau di malam hari, muncul “Good Night!”. Cara kerjanya cukup sederhana, karena kita cuma perlu mengatur beberapa kode HTML, CSS, dan JavaScript. Di panduan ini, akan dijelaskan langkah demi langkah supaya kamu bisa menerapkannya di Blogger.
Langkah-langkah Memasang Salam Dinamis
Langkah 1: Masuk ke Akun Blogger
Pertama-tama, pastikan kamu sudah masuk ke akun Blogger yang kamu miliki. Buka dashboard Blogger dan pilih blog yang ingin kamu ubah tampilannya. Jangan lupa untuk selalu membuat backup tema blog sebelum mulai mengedit. Ini penting supaya kalau nanti terjadi kesalahan, kamu bisa dengan mudah mengembalikan tampilan seperti semula.
Langkah 2: Buka Menu Tema
Setelah berada di dashboard, cari menu Tema yang biasanya ada di sisi kiri layar. Di menu ini, kamu bisa mengubah tampilan blog sesuai dengan keinginan. Masuklah ke menu Tema karena di sinilah semua pengaturan visual blog berada. Di sini kamu juga bisa menemukan berbagai opsi untuk menyesuaikan tampilan blog kamu sesuai selera.
Langkah 3: Edit HTML Tema
Di halaman Tema, kamu akan menemukan tombol Sesuaikan. Tepat di samping tombol tersebut, ada ikon drop down yang bisa kamu klik. Setelah itu, pilih opsi Edit HTML. Dengan memilih opsi ini, kamu akan masuk ke bagian kode HTML dari tema blog kamu. Pastikan untuk membaca setiap bagian kode dengan cermat, dan ingatlah untuk membuat backup terlebih dahulu agar jika terjadi kesalahan, kamu bisa kembali ke versi sebelumnya.
Langkah 4: Tambahkan Kode CSS untuk Salam Dinamis
Setelah masuk ke mode edit HTML, cari bagian kode yang mengandung tag ]]></b:skin>. Di atas tag tersebut, kamu perlu menambahkan kode CSS berikut ini. Kode CSS ini berfungsi untuk mengatur tampilan elemen salam dinamis, mulai dari ukuran ikon, warna latar, bayangan, padding, hingga gaya teks.
/* Dynamic Greetings Bar */
.it {
width: var(--svg-size, 18px);
height: var(--svg-size, 18px);
stroke: currentColor;
stroke-width: var(--svg-stroke, 2);
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.greetings {
background-color: #ffff;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
padding: 12px 15px;
border-radius: 5px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.greetings::after {
content: attr(data-text);
}
Dengan kode tersebut, elemen yang nantinya akan menampilkan pesan salam dinamis akan memiliki tampilan yang rapi dan menarik. Kamu bebas mengubah nilai-nilai di dalam kode CSS jika ingin menyesuaikan dengan desain blog kamu.
Langkah 5: Tambahkan Kode JavaScript
Langkah berikutnya adalah menambahkan kode JavaScript agar pesan salam bisa tampil secara otomatis berdasarkan waktu kunjungan. Carilah tag </body> di dalam kode HTML tema kamu. Tempelkan kode JavaScript berikut tepat di atas tag tersebut:
<script type='text/javascript'>/*<![CDATA[*
/* Dynamic Greetings Bar */
function greetings() {
var message = ["Have a Sweet Dreams!", "Good Morning!", "Good Afternoon!", "Good Evening!", "Good Night!", "It's time to sleep!"];
var dataText = "";
var time = new Date().getHours();
if (time < 4) {
return (dataText = message[0]);
} else if (time < 12) {
return (dataText = message[1]);
} else if (time < 17) {
return (dataText = message[2]);
} else if (time < 19) {
return (dataText = message[3]);
} else if (time < 22) {
return (dataText = message[4]);
} else {
return (dataText = message[5]);
}
}
document.querySelector(".greetings").setAttribute('data-text', greetings());
/*]]>*/</script>
Script tersebut bekerja dengan mengambil waktu saat ini menggunakan new Date().getHours(). Berdasarkan nilai jam yang didapat, script memilih pesan yang sesuai dari array message dan mengatur pesan tersebut sebagai atribut data-text pada elemen dengan kelas greetings. Kamu juga bisa mengganti pesan-pesan di dalam array tersebut jika ingin menyesuaikannya dengan tema blog kamu.
Langkah 6: Tempelkan Kode HTML Salam Dinamis
Setelah menambahkan kode CSS dan JavaScript, kamu perlu menambahkan kode HTML yang akan menampilkan salam dinamis di blog kamu. Tempelkan kode HTML berikut di tempat yang kamu inginkan, misalnya di bagian header atau sidebar:
<div class="greetings">
<svg class="it i-face-smile" viewBox="0 0 24 24">
<path d="M9 9h.01M15 9h.01M8 14q4 4 8 0"></path>
<circle cx="12" cy="12" r="10"></circle>
</svg>
</div>
Kode ini membuat sebuah elemen <div> dengan kelas greetings yang nantinya akan menampilkan pesan sesuai dengan waktu. Di dalamnya, terdapat juga ikon SVG yang menambah nilai estetika pada tampilan pesan. Kamu bebas untuk menyesuaikan posisi dan letak kode HTML ini di dalam template blog kamu agar sesuai dengan layout yang diinginkan.
Langkah 7: Simpan Perubahan dan Cek Hasilnya
Setelah semua kode sudah ditempel dengan benar, langkah terakhir adalah menyimpan perubahan yang kamu buat. Klik tombol SIMPAN yang ada di editor HTML Blogger. Setelah itu, buka blog kamu di browser untuk melihat hasilnya. Periksa apakah pesan salam dinamis sudah tampil sesuai dengan waktu saat pengunjung mengakses blog. Jika belum muncul atau terdapat kesalahan, cek kembali apakah setiap langkah sudah dilakukan dengan benar.
Beberapa Tips Tambahan
Menambahkan salam dinamis di blog memang cukup simpel, tapi ada beberapa hal yang bisa kamu perhatikan agar hasilnya semakin maksimal:
Kustomisasi Pesan
Kamu bisa dengan mudah mengganti pesan yang tampil dengan mengubah isi array message di kode JavaScript. Misalnya, kamu bisa menambahkan pesan dengan nuansa bahasa yang lebih santai atau bahkan humor sesuai dengan karakter blog kamu. Pastikan pesan yang kamu buat tetap mudah dipahami dan sesuai dengan audiens yang kamu targetkan.
Penyesuaian Tampilan dengan CSS
Jika tampilan salam dinamis belum sesuai dengan keinginan, jangan ragu untuk mengutak-atik kode CSS-nya. Kamu bisa mengubah warna latar, ukuran font, atau bahkan menambahkan efek bayangan yang lebih menarik. Penyesuaian tampilan ini dapat membuat elemen salam dinamis menjadi lebih menyatu dengan desain keseluruhan blog kamu.
Penempatan yang Strategis
Letakkan kode HTML untuk salam dinamis di posisi yang mudah terlihat oleh pengunjung, seperti di bagian atas blog (header) atau di sidebar. Dengan begitu, setiap kali pengunjung membuka blog, mereka langsung disambut dengan pesan yang sesuai dengan waktu kunjungan mereka.
Backup Tema Sebelum Edit
Selalu ingat untuk membuat backup tema blog sebelum melakukan pengeditan kode. Backup ini akan sangat berguna jika terjadi kesalahan atau jika kamu ingin mengembalikan tampilan blog ke kondisi semula. Kebiasaan ini penting untuk menjaga kestabilan blog kamu.
Kesimpulan
Menambahkan salam dinamis di blog adalah salah satu cara yang cukup sederhana namun memiliki dampak yang signifikan. Dengan langkah-langkah di atas, kamu sudah bisa menyajikan pesan otomatis yang berubah sesuai dengan waktu pengunjung membuka blog. Fitur ini tidak hanya membuat tampilan blog menjadi lebih menarik, tetapi juga memberikan kesan personal sehingga pengunjung merasa dihargai.
Selain memberikan nilai tambah dari segi estetika, salam dinamis juga bisa membuat blog kamu terasa lebih interaktif. Pengunjung yang disambut dengan ucapan yang relevan akan lebih cenderung untuk menjelajahi isi blog kamu dan merasa nyaman selama berada di sana. Kustomisasi pesan dan tampilan juga memungkinkan kamu untuk menyesuaikan fitur ini dengan karakteristik blog yang kamu jalani, baik itu blog pribadi, profesional, maupun blog dengan tema tertentu.
Jangan ragu untuk bereksperimen dengan kode yang sudah ada. Kamu bisa menambahkan logika tambahan atau mengubah tampilan visual sesuai dengan ide-ide kreatif yang kamu miliki. Selain itu, dengan menguasai dasar-dasar HTML, CSS, dan JavaScript, kamu akan lebih leluasa untuk mengembangkan fitur-fitur lain di blog kamu di masa mendatang.
Semoga panduan ini membantu kamu dalam menambahkan salam dinamis di blog. Jika ada kendala atau pertanyaan, kamu bisa mencari referensi tambahan atau berdiskusi di forum komunitas Blogger. Selamat mencoba dan semoga blog kamu semakin menarik untuk dikunjungi!