Cara Membuat Tampilan Salam Pengunjung Blogger

Cara Membuat Tampilan Salam dinamis Pengunjung Blogger yang dimana widget tampilan ini dibuat untuk situs blogger
KudasaiKode
Halo kali ini saya akan memberikan sebuah widget yaitu Cara Membuat Tampilan Salam dinamis Pengunjung Blogger yang dimana widget tampilan ini dibuat untuk situs blogger.


Cara Membuat Tampilan Salam Pengunjung Blogger ini digunakan untuk menyapa pengujung seperti Selamat Pagi, Selamat Siang, Selamat Sore Dan Selamat Malam.

Bagaimana apakah kamu tertarik dengan widget yang keren satu ini ? Tentu dong , widget ini bisa diterapkan di template apapun maka dari itu silahkan ikuti tutorial nya dengan teliti.

Cara Membuat Tampilan Salam Pengunjung Blogger

  1. Silahkan Buka Dashboard Blogger
  2. Pergi ke Tema > Edit Tema
  3. Kemudia cari kode ]]></b:skin> lalu letakan kode CSS dibawah ini tepat diatas ]]></b:skin>.
/* 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);
}
Kemudian cari kode </body> lalu letakan kode Javascript ini tepat diatas </body> 
<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>
info Untuk Kata yang di marking di atas bisa kamu ubah sesuka hati.

Lalu tambahkan kode HTML dibawah ini kemudian letakan sesuai keinginan 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 Terakhir Simpan Tema

Penutupan

Baiklah itulah artikel kali ini Cara Membuat Tampilan Salam Pengunjung Blogger semoga artikel ini bermanfaat jangan lupa berkunjung kembali ya.
KudasaiKode
Hanya seorang yang hobi membuat artikel walau tidak sering banget
Komentar