Hallo guys, kali ini admin Mrchllaja akan membagikan artikel Cara Membuat Widget Salam Dinamis Di Blog untuk kalian.
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.
Ingin melihat tampilan widgetnya? yuk liat demonya dengan cara klik tombol demo dibawah ini.
Cara Menambahkan Widget Salam Dinamis Di Blog
Ikuti langkah - langkah yang ada dibawah ini agar widget berjalan dengan benar.
Penting!
Sebelum memulai, disarankan untuk mencadangkan template blogger kalian. Jika terjadi kesalahan kalian bisa memulihkan template kalian.
Langkah 1: pergi ke Dashboard Blogger
Langkah 2: klik Tema
Langkah 3: pilih Edit HTML
Memasang Kode CSS
Salin kode dibawah ini, lalu paste diatas kode </style> atau ]]></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: #fefefe;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
padding: 12px 15px;
border-radius: 50px;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.greetings::after {
content: attr(data-text);
}
/* CSS Darkmode, Sesuaikan (.darkMode) agar classnya sesuai */
.darkMode .greetings {background-color:#2d2d30}Related Posts
Memasang Kode Javascript
Salin kode dibawah ini, lalu tempel diatas kode </body> atau </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>Memasang Kode HTML(terakhir)
Salin kode dibawah ini, lalu tempel dimanapun kalian ingin menampilkan widget tersebut. Sebagai contoh dibawah kode <data:post.title/>, setiap template blogger memiliki kode <data:post.title/> yang berbeda - beda, kalian tinggal samakan dengan kode tersebut.
<div class="greetings"> <svg viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z' fill-rule='evenodd'></path><path class='svgC' d='M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683z'></path><path class='svgC' d='M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z'></path></svg> </div>
Jika sudah semua klik simpan, dan lihat hasilnya.
Penutup
Menambahkan Widget Salam Dinamis ini dapat meningkatkan pengalaman yang sangat baik. Kalian bisa menyesuaikan pesan yang akan ditampilkan sesuai kebutuhan masing - masing.
Sebagai referensi, semua kode yang ada diatas ini adalah berasal dari www.inputekno.com. Saya hanya memperbaiki dan memperbarui kode tersebut :)
Sekian, artikel Widget Salam Dinamis Untuk Blog ini, semoga bermanfaat bagi kalian.
Jika artikel ini bermanfaat, jangan lupa untuk membagikan artikel ini ke teman - teman kalian. Terimakasih :)
Referensi:
https://www.inputekno.com/2024/02/cara-menambahkan-salam-dinamis-di-blog.html
Apa Reaksimu Setelah Membaca Artikel Ini?