Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat efek preloader toast notif di blogger
Info: Oke sobat jika kamu sudah penasaran dengan pembajakan kita kali ini yuk lang aja kita bahas bersama sama
Toast notif
Pada postingan admin sebelumnya sudah membahas bagaimana caranya membuat toast notif di blogger, dan sekarang admin akan membahas cara membuat efek preloader toast notif alias menjadikan toast notuf sebagai preloader, sebenarnya 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
Dalam menampilkan dan membuat efek preloader toast notif tersebut pesan yang muncul di dalam toast notif tersebut bisa apa saja, sesuai si kehendak pemilik webiste ataupun blog, caranya dengan mengedit text melalui kode HTML yang akan admin berikan di bawah ini
Menggunakan CSS
Nah dalam membuat dan menampilkan efek preloader toast notif di blogger hanya menggunakan kode CSS saja tanpa ada unsur penggunaan kode javascript, alias 100% menggunakan kode CSS murni, sehingga tampilan dari efek preloader toast notif tersebut semakin responsif
Contoh Tampilan
Jika sobat penasaran dengan contoh tampilan dari toast notif tersebut silahkan refresh halaman artikel yang sedang kamu baca ini ok, toast notif akan muncul secara otomatis
Info: Bagaimana sobat keren kan toast notif nya
Cara pembuatan
Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjabarkan mengenai bagaimana caranya membuat efek preloader 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:0;left:0;right:0;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:0;left:0;right:0;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>Your text here</div>
</div>Info: Fungsi kode HTML di atas adalah untuk menampilkan efek preloader toast notif tersebut, kemudian jika sudah simpan template dan lihat bagaimana hasilnya
Penjelasan
Jika kamu sudah menginstall kode CSS dan HTML yang admin jabarkan di atas maka secara otomatis efek preloader toast notif tersebut akan tampil alias berfungsi, karena penggunaan unsur kode CSS dalam membuat efek preloader toast notif tersebut sudah menggunakan animasi show and hide secara otomatis, semoga bermanfaat