Sticky All Widget
Siang All
Setiap waktu [OBC] team memikirkan kode sticky yang bisa diterapkan untuk semua widget seperti header, menu navigasi , followers , label dll. Hingga pada akhirnya script itu sukses dibuat dan siap diedarkan hahaha, sticky widget yang akan di share kali ini sama halnya dengan sticky widget pada umumnya , setiap kali melakukan scroll kebawah widget yang diberi efect Sticky ini akan terus mengikutinya . Untuk lebih jelasnya silahkan sobat klik tulisan ( DEMO ) diatas , nanti sobat akan melihat widget Menu yang telah diberi efect sticky.
Kustomisasi :
- Sobat cari kode </body> tempatkan kode dibawah ini tepat diatas kode </body>
<script>
// Sticky widget by [ OBC ]
// Tutorial at http://duniaradioku.blogspot.com/
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("YOUR_WIDGET_ID"); // enter your widget ID here
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0;}
</style>
Langkah selanjutnya sobat ganti tulisan YOUR_WIDGET_ID dengan ID widget yang sobat ingin berikan efect sticky.
Bagi sobat yang belum tahu cara mengetahui ID suatu Widget
- Login ke Bloger , Klik Design/Rancangan > Page Element/Elemen Halaman
- Letakan posisi mouse pada tulisan Edit , sebagai contoh saya gunakan widget Kode Script Tutorial Blog.
- Lalu sobat lihat pada bagian bawah browser , akan terlihat URL Widget , disitu tertulis ID widget tersebut HTML5