For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat efek preloader toast notif di blogger

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

Contoh message toast notif

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.