Hey palestine, Allah is enough to be your helper at this time and only in Him should you trust
Bacakan

Cara membuat toast notif di blogger

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

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.com

    Template mirip xmlthemes.com

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

    Template mirip xmlthemes.com

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

    Template mirip xmlthemes.com

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

    Template mirip xmlthemes.com

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

    Template mirip xmlthemes.com

    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.