Ingin buat floating widget di Blogger Blogspot untuk naruh iklan / banner seperti di website-website besar macam Kompas dll. Ini saya ada kodenya guys.
Kode untuk buat floating widget saya sangat simple. Dan sudah ada tombol Close-nya jadi kalau untuk menaruh iklan Adsense tidak akan di kenakan sangsi.
Ok, langsung saja ya!
Kode <b:section> untuk floating widget Blogger Blogspot
Kita mulai dengan membuat Blogger widget yang nantinya bisa di edit langsung dari dashboard Blogger Blogspot kamu.
Di bawah ini adalah kode-nya. Copy dan paste di template blogger kamu tepat di bawah <body> tag.
<!-- Blogger Floating Widget --> <div class='floating-widget-container' id='floating-widget-container'> <div class='widget-row'> <span id='close-btn'/><div class='floating-widget'> <b:section id='float-widget' maxwidgets='1' name='Floating Widget' showaddelement='yes'> </b:section></div></div></div>
Nah setelah itu, langkah selanjutnya adalah mempercantik tampilan floating widget-nya dengan CSS
Kode CSS untuk floating widget
Agar floating widget-nya bisa berada di bagian bawah halaman blog, kita perlu lumayan banyak CSS kode untuk membuat tampilanya cantik dan responsive.
Copy dan paste kode CSS di bawah ke tema Blogger kamu. Tempatkan di atas atau sebeleum </head> tag.
<style>/* Floating Widget ------------------------- */.floating-widget { position: absolute; margin: auto; padding: 10px 10px 0px 10px; float: none;}.floating-widget h3{ display: none;}.widget-row { background-color: rgba(238, 238, 238,0.97); width: 740px; margin: 0 auto; height: 100px; padding: 0; text-align: center; position: relative; z-index: 1010; display: block;}.floating-widget-container { position: fixed; width: 100%; bottom: 0; text-align: center; padding: 0; z-index: 999;}#close-btn { color: #fff; background-color: rgba(60, 152, 250, 0.98); right: 0; float: right; top: -30px; cursor: pointer; position: relative; z-index: 1110; height: 20px; font-size: 11px; padding: 0 8px 10px 8px; border-radius: 4px 4px 0 0;}#close-btn:after { content: '\f00d'; font-family: 'FontAwesome'; font-size: inherit; vertical-align: middle;}#close-btn:before { content: 'Close Ads'; vertical-align: middle; margin-right: 4px;}@media only screen and (max-width: 768px) {.floating-widget-container { width: 100%; margin-right: 0%; margin-left: 0%; z-index: 1010;}.widget-row { width: 100%; height: 80px !important;}.floating-widget { padding: 0 !important; width: 100%; max-height: 80px;}#close-btn { border-radius: 4px 0 0 0; top: -30px; background-color: rgba(60, 152, 250,0.97);}#close-btn:before { display: none;}}@media only screen and (max-width: 414px) {.widget-row { width: 100%; height: 80px;}.floating-widget { padding: 0 !important; width: 100%; height: 80px;}}</style>Sekarang widgetnya sudah tampil ngambang (floating) di bawah halaman situs kamu dan tetap pada posisinya waktu halaman di scroll (Sticky). Hanya saja, tombol close-nya belum berfungsi tuh guys.
Untuk membuatnya berfungsi, kita memerlukan kode Javascript.
Kode Javascript untuk tombol close floating widget
Langkah terakhir adalah membuat tombol Close berfungsi dengan kode Javascript sederhana agar user bisa menutup iklan.
Dan juga, agar tidak menyalahi aturan Google Adsense jika di pakai untuk memasang iklan Adsense. Penting sekali nih guys!
Ok, di bawah ini adalah link kode Javascript yang bisa kamu tempatkan di atas atau sebelum </body> tag.
Link kode Javascript untuk Blogger Floating Widget saya taruh di Kode Box pribadi yang bisa kamu lihat di sini.
Catatan
Itulah cara buat Floating Widget sederhana yang bisa di close oleh user blog / situs kamu.
Agar tampilannya sesuai dengan template yang kamu pakai, kamu bisa edit kode CSS-nya sesuai selera.
Kalau untuk pasang iklan Adsense pastikan kamu merubah kode Adsense agar sesuai dengan viewport. Artikel tentang ini bisa kamu temukan di halaman support-nya Google Adsense.
Ok, Mudah mudahan bermanfa’at. Salam 🙂
Tidak ada komentar:
Posting Komentar