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

Membuat notifikasi mengambang (sticky) di blogger

Hello sobat IcloudZer kali ini admin akan memberikan informasi seputar Blogger, mengenai cara membuat notifikasi mengambang atau sticky diblogger dengan tampilan yang keren

Mode Sticky

Notifikasi ini memiliki tampilan Sticky atau disebut juga memiliki gaya mengambang, ketika disrcoll ataupun tidak

Telah banyak website yang menerapkan gaya mengambang atau sticky didalam websitenya, mulai dari penerapan pada header, back to top, gambar, text atau juga pada Element tertentu diblogger

Hanya Tampil di Postingan

Nan informasi yang terpenting lagi nih dari notifikasi mengambang atau stiky ini, apabila telah anda terpakan pada blog anda, maka tampilannya hanya muncul pada halaman postingan artikel saja, jadi pada halaman berandanya gak akan muncul, datu lagi informasi bahwa setiap kali kamu merefresh halaman tersebut, maka notifikasi mengambang nya akan muncul secara otomatis

Sebagai informasi: Yang mengambang notifikasinya ya, bukan hidung kamu yang ngambang, hadeh 🤥😆

CSS dan HTML

Notifikasi Sticky ini dibuat menggunakan element CSS dan Blogger sehingga tidak mempengaruhi performa blog anda secara keseluruhan

Info: Jadi jangan khawatir Notifikasi Mengambang ini benar benar Responsif

Cara pembuatan

Baiklah sobat kali ini saya akan langsung Mulai membahas bagaiamana caranya membuat notifikasi Sticky yang keren diblogger/

Kode CSS

Yang pertama anda bisa menyalin kode CSS dibawah ini, kemudian letakkan diatas kode ]]<>b:skin> atau sebelum kode ]]<>b:skin>

#box-icloudice{background-color:#fff;z-index:9;position:fixed!important;top:33%;left:50%;width:280px;transform:translateX(-50%);box-shadow:0 0 8px 0 rgba(0,0,0,.15);border-radius:4px}.close-icloudice{font-size:33px;border-radius:50%;cursor:pointer;display:block;text-align:center;position:absolute;right:0;color:#999;top:0;width:30px;height:30px;line-height:1}.close-icloudice:hover{transform:rotate(180deg);top:3px}.notification-icloudice{width:auto;height:auto;padding:12px 30px 12px 16px;font-size:16px;font-weight:700;color:#f80000;line-height:24px}.fa-refresh::before{content:&quot;\f021&quot;}.notification-icloudice a{background-color:#f80000;padding:4px 12px;font-size:12px;text-transform:uppercase;color:#fff;border-radius:4px;float:right;line-height:16px}.notification-icloudice a:hover{opacity:.85}.post-body ul li,.post-body ol li{margin:0 0 18px 18px}

Info: Kode CSS diatas bisa mengatur tampilan notifikasi nya ok

Kode Html

Oke setelah anda meyimpan kode CSS diatas, kemudian kamu bisa salin lagi kode HTML dibawah ini, kemudian letakkan diatas kode </body> atau sebelum kode </body>

<b:if cond='data:view.isPost'><div id='myNotification'>
<div id='box-icloudice'>
<a class='close-icloudice' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'>&#215;</a>
  <div class='notification-icloudice'>Berita Terbaru <a href='https://icloudice.com'>Update</a>
  </div>
</div>
</div></b:if>

Info: Disini kamu bisa mengubah Kalimat yang mau kamu tampilkan tersebut

Contoh Tampilan

Contoh Tampilan kamu bisa lihat aja sendiri ketika halaman yang sedang kamu baca ini direfresh, ok bagaimana keren bukan

×
Berita Terbaru Update

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.