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:"\f021"}.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