Cara Membuat Sticky Widget Keren Pada Blogger/Blogspot

Sticky Widget adalah suatu cara yang berguna untuk membuat suatu Widget disuatu Blog/Blogger agar bisa  melayang/Sticky dan akan selalu mengikuti arah Kursor kita secara Vertikal. Jadi Tutorial ini juga bisa berguna untuk mempermudah Pengunjung agar tidak bosan berada didalam Blog kalian. Tutorial ini sebenarnya saya dapatkan dari Blogger Sentar, dan kemudian saya tulis ulang dengan Cara dan tentunya Bahasa yang berbeda pula. Sebemarnya saya Jarang membuat Tutorial yang asli saya buat Karena saya bukan Ahli IT.

Untuk Demonya Kalian bisa melihat blog ini, dan yang saya Sticky adalah Widget Menu. Yaitu Widget yang selalu mengikuti Kursor Mouse Kalian, yang bergerak secara Vertikal.

Baiklah, langsung saja kita ikuti Tutorial ini dengan seksama :

Langkah-langkah Pembuatan Sticky :

1. Buka Blogger.
2. Klik Template.
3. Pilih Edit HTML, Kemudian cari kode </body> . Setelah itu Letakan kode Script dibawah ini dan letakan tepat Diatas/Sebelum kode </body> .

<script>
// Sticky widget Buatan http://mas-arie69.blogspot.com

//<![CDATA[
bs_makeSticky("Masukan Id Widget Kalian Disini, Contoh : HTML2, HTML3, dsb"); // 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:#000000 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style>

4. Setelah Memasang kode Script itu. Silahkan ganti pada tulisan "Masukan Id Widget Kalian Disini" ganti dengan ID Widget kalian Masing2. Contohnya : HTML2, dsb.

NB : Sampai saat ini saya belum menemukan cara agar Dua Widget bisa Sticky Bersama-sama. Tetapi Jika saya sudah menemukan caranya saya akan segera Share kepada kalian.

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit