Cara Menambahkan Salam Dinamis di Blog

Menambahkan salam dinamis adalah cara terbaik untuk menyapa pengunjung dengan pesan yang disesuaikan berdasarkan faktor seperti waktu.

Seperti memberikan ucapan selamat pagi, siang, sore, malam secara realtime bergantung pada waktu mereka mengunjungi situs web tersebut.

Dalam panduan ini, kita akan membahas bagaimana menampilkan salam ataupun pesan Ucapan tersebut secara otomatis. Tentunya dengan kode javascript sederhana, HTML dan CSS.

Cara Menambahkan Pesan Otomatis di Blogger

Langkah #1: Masuk ke akun Dasbor Blogger kalian

Langkah #2: Di Dasbor Blogger, Buka menu Tema

Langkah #3: Sekarang klik ikon drop down tepat di samping tombol 'Sesuaikan' lalu Klik 'Edit HTML'

Langkah #4: Cari ]]></b:skin> dan simpan CSS berikut diatasnya

/* 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);
}

Langkah #5: Cari </body> dan simpan Javascript berikut diatasnya

<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>

Langkah #6: Terakhir salin kode HTML di bawah ini dan tempatkan sesuai keingin kalian.

<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>

Langkah #7: Klik 'SIMPAN' jika sudah selesai dan lihat hasilnya.

Widget Jadwal Sholat Menggunakan API myQuran [Update]

Cara Memasang Widget waktu sholat menggunakan API MyQuran untuk Blog.

www.inputekno.com

Penutup

Menambahkan salam dinamis ke blog dapat meningkatkan pengalaman pengguna yang baik, lebih interaktif dan personal. Kalian bisa menyesuaikan pesan yang akan ditampilkan sesuai kebutuhan.

Nah itu tadi artikel tentang Cara Menambahkan Salam Dinamis di Blog. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan.