Beranda Blogger

Cara membuat notifikasi toast di blogger

Ar-rahim 🇵🇸
Ar-rahim 🇵🇸
Diperbarui: • 0 • menit membaca
Daftar Isi

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai cara membuat notifikasi toast di blogger

Info: Oke sobat jika kamu sudah penasaran dengan pembajakan kita kali ini yuk lang aja kita bahas bersama sama

Notifikasi Toast

Apa itu Notifikasi toast? Notifikasi toast adalah pesan singkat yang muncul di layar pengguna untuk memberi tahu mereka tentang suatu peristiwa atau informasi penting terkait dengan situs web tersebut, notifikasi ini biasanya muncul sebagai pop-up kecil di salah satu sudut layar atau di bagian atas atau bawah pada halaman website, entah itu saat pengunjung mengklik tombol tertentu ataupun muncul secara otomatis saat mengunjungi halaman tertentu di dalam website, notifikasi toast pada website dapat digunakan untuk memberi tahu pengguna tentang pesan baru, pemberitahuan penting, pembaruan situs web, atau informasi lainnya yang memerlukan perhatian segera

Contoh Tampilan

Jika kamu penasaran dengan bagaimana tampilan dari notifikasi toast di blogger tersebut silahkan periksa menggunakan tombol di bawah ini ok

Cara pembuatan

Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjabarkan mengenai bagaimana cara membuat notifikasi toast di blogger, silahkan baca dan ikuti setiap arahan yang baka admin jelaskan di bawah ini

Kode CSS

Seperti biasanya kamu harus menginstall terlebih dahulu kode CSS di bawah ini, terdapat dua tampilan berbeda dari notifikasi toast di blogger, silahkan pilih salah satu

Style1

Silahkan cari kode ]]></b:skin> kemudian letakkan kode CSS style1 berikut ini tepat di atasnya

/* Toast Notification style1 by ICloudice.com */
.rahtsNtf div{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:rahsldwrds 2s ease forwards;-webkit-animation:rahsldwrds 2s ease forwards}
@media screen and (max-width:500px){
.rahtsNtf div{margin-bottom:20px;left:20px;right:20px;font-size:13px}}@keyframes rahsldwrds{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}@-webkit-keyframes rahsldwrds{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.drK .rahtsNtf div{box-shadow:0 10px 40px rgba(0,0,0,.2)}

Info: Nantinya tampilan dari notifikasi toast style1 tersebut akan muncul pada bagian bawah blog

Style2

Silahkan cari kode ]]></b:skin> kemudian letakkan kode CSS style2 berikut ini tepat di atasnya

/* Toast Notification style2 by ICloudice.com */
.rahtsNtf div{position:fixed;left:24px;top:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-top:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:rahsldwrds 2s ease forwards;-webkit-animation:rahsldwrds 2s ease forwards}
@media screen and (max-width:500px){
.rahtsNtf div{margin-top:20px;left:20px;right:20px;font-size:13px}}@keyframes rahsldwrds{0%{opacity:0}20%{opacity:1;top:0}50%{opacity:1;top:0}80%{opacity:1;top:0}100%{opacity:0;top:-70px;visibility:hidden}}@-webkit-keyframes rahsldwrds{0%{opacity:0}20%{opacity:1;top:0}50%{opacity:1;top:0}80%{opacity:1;top:0}100%{opacity:0;top:-70px;visibility:hidden}}
.drK .rahtsNtf div{box-shadow:0 10px 40px rgba(0,0,0,.2)}

Info: Nantinya tampilan dari notifikasi toast style2 tersebut akan muncul pada bagian atas blog

Kode HTML

Langkah selanjutnya sobat bisa menyalin lagi kode HTML di bawah ini kemudian letakkan di atas kode <body>

<div class='rahtsNtf' id='rahtsNtf'></div>

Info: Fungsi kode HTML di atas adalah untuk menampilkan notifikasi toast di dalam website

Kode Javascript

Langkah selanjutnya adalah sobat bisa menyalin kode javascript di bawah ini kemudian letakkan di atas kode </body>

<script>
 /*<![CDATA[*/ 
function toastNt(){document.querySelector("#rahtsNtf").innerHTML="<div>Your text here!</div>"};
/*]]>*/
</script>

Info: Nah pada tahap ini sobat bisa menggunakan kode javascript di atas sesuai keperluan aja, misal menggunakan nya pada postingan artikel juga bisa, atau menggunakan nya di dalam template juga bisa, silahkan ubah teks yang tertera di dalam kode javascript di atas okay

Cara penggunaan

Setelah measang kode CSS, HTML, dan juga Javascript, langkah selanjutnya untuk mem-fungsikan notifikasi toast tersebut, silahkan gunakan kode onclick='toastNt()' pada kode tombol yang kamu inginkan, atau jika bingung lihat seperti contoh kode di bawah ini

<div class='tombol' onclick='toastNt()'>
<!-- svg -->
</div>

Info: Begitulah sobat cara membuat notifikasi toast di blogger, semoga bermanfaat yak

Ar-rahim 🇵🇸
Ar-rahim 🇵🇸 Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar