Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat toast notif di blogger muncul saat di klik
Info: oke sobat jika kamu sudah penasaran dengan pembajakan kita kali ini yuk lang aja kita bahas bersama sama
Toast notif
Apa itu toast notif? toast notif adalah sebuah notifikasi atau pesan yang muncul pada halaman web, entah itu saat pengunjung mengklik tombol tertentu ataupun muncul secara otomatis saat mengunjungi halaman tertentu, dan biasanya tampilan dari toast notif tersebut standar dan simple namun elegan ketika di tampilkan
Pesan Custom
Menariknya pesan yang muncul di dalam toast notif tersebut bisa apa saja, sesuai si kehendak pemilik webiste ataupun blog, semisal saat mengklik tombol icon tertentu, pesan toast notif bisa di selipkan alias di tampilkan secara bersamaan dengan icon yang di klik tersebut
Menggunakan Javascript
Nah dalam membuat dan menampilkan toast notif di blogger di perlukan penggunaan kode javascript, karena menggunakan fungsi klik untuk memunculkan toast notif tersebut, jadi kalau pengguna tidak mengklik tombol yang berisi perintah dari kode javascript maka tampilan toast notif tidak akan muncul alias tampil, sedangkan untuk membuat tampilan dari toast notif di blogger diperlukan penggunaan kode CSS
Contoh Tampilan
Jika sobat penasaran dengan tampilan dari toast notif tersebut silahkan periksa menggunakan tombol di bawah ini ok
Info: Bagaimana sobat keren kan toast notif nya
Cara pembuatan
Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjabarkan mengenai bagaimana caranya membuat Toast notif di blogger, silahkan ikuti setiap arahan yang admin jabarkan di bawah ini
Kode CSS
Seperti biasanya kamu harus menginstall terlebih dahulu kode CSS di bawah ini, terdapat dua style toast notif yang bisa kamu gunakan dan kamu terapkan di dalam template blogger milikmu
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 toast notif 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 toast notif style2 tersebut akan muncul pada bagian atas blog
Kode HTML
Langkah selanjutnya sobat bisa menyalin lagi kode HTML di bawah ini kemudian ketakkan di atas kode <body>
<div class='rahtsNtf' id='rahtsNtf'>
</div>Info: Fungsi kode HTML di atas adalah untuk menampilkan toast notif tersebut
Kode Javascript
Langkah selanjutnya adalah sobat bisa menyalin lagi 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, ubah aja text yang tertera di dalam kode javascript di atas ok
Cara penggunaan
Setelah menginstall kode CSS, HTML, dan juga Javascript, langkah selanjutnya untuk menampilkan fungsi toast notif tersebut, silahkan gunakan element kode onclick='toastNt()', atau jika bingung lihat contoh kode di bawah ini
<div class='tombol' onclick'toastNt'>
<!-- svg -->
</div>Info: Bagaimana sobat semoga bermanfaat yak
