Cara Membuat Sticky Widget di Sidebar Blog
Jika sobat menggunakan kode ini maka sidebar sobat akan dibagi menjadi 2 yaitu catcher dan sticky. Catcher adalah gadget pada sidebar yang menempel atau tidak ikut berjalan jika di roll kebawah dan letaknya berada di atas sticky. Sedangkan sticky adalah yang ikut kebawah jika diroll, dan letaknya berada di bagian paling bawah. Jika sobat menambahkan lagi gadget dibawah sticky maka gadget tersebut akan terhitung sebagai sticky dan akan ikut bergerak mengikuti roll.
- kemudian masuk pada Template -> Edit HTML
- oh iya sebaiknya download dulu template sobat, buat cadangan kalau ada yang eror
- centang pada Expand Template Widget
- copy code berikut
#catcher{Ket : Sesuaikan 300 dengan lebar sidebar sobat
height:Auto;
}
#sticky{
width:300px;
height:auto;
}
- paste kode tersebut pada CSS Template, letaknya antara <b:skin> dan </b:skin>, saran saya letakkan dibawah CSS sidebar saja supaya lebih mudah jika lain hari ingin mengeditnya lagi
- kemudian kita beralih pada kode scriptnya
- copy kode berikut
<!--Catcher dan Sticky by Pro Duck Start-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
function isScrolledTo(elem) {
var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top; //num of pixels above the elem
var elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewTop));
}
var catcher = $('#catcher');
var sticky = $('#sticky');
$(window).scroll(function() {
if(isScrolledTo(sticky)) {
sticky.css('position','fixed');
sticky.css('top','0px');
}
var stopHeight = catcher.offset().top + catcher.height();
if ( stopHeight > sticky.offset().top) {
sticky.css('position','absolute');
sticky.css('top',stopHeight);
}
});
});
</script>
<!--Catcher dan Sticky by Pro Duck End-->
- Letakkan kode tersebut antara kode <body> dan </body>, saran saya letakkan pada bagian paling bawah saja tepat diatas kode </body>.
Lah ini nih bagian yang membutuhkan sedikit keahlian pengeditan HTML, sobat harus jeli dalam memilih tempat untuk menaruh kode ini, sobat juga harus bisa menutup kode dengan benar, karena jika tidak maka akan terjadi eror dan hasilnya akan gagal, makanya diatas saya sudah sarankan untuk mendownload dulu HTML sobat sebagai cadangan. Dan berikut penjelasannya, saya harap sobat mengerti.
- pilih dulu gadget sidebar yang akan dijadikan catcher (yang gak tau catcher silahkan baca dari atas lagi)
- kemudian taruh kode berikut diatas gadget yang akan dijadikan catcher tadi,
<div id='catcher'>
- jangan lupa untuk menutup kode tersebut dengan benar, sehinngga akan seperti ini
<div id='catcher'>
Gadget yang dijadikan catcher
</div>
- kemudian pilih lagi gadget yang akan dijadikan sticky, dan taruh kode berikut tepat diatas gadget tersebut
<div id='sticky'>
- sekali lagi jangan lupa untuk menutupnya dengan tepat, sehingga akan menjadi seperti berikut
<div id='sticky'>
Gadget yang dijadikan catcher
</div>
- Dan save pekerjaan sobat, kemudian lihat hasilnya
untuk contoh sederhana menaruh catcher dan sticky akan seperti ini
<div id='sidebar-wrapper'> /* pembuka sidebar */
<div id='catcher'> /* pembuka catcher */
<b:widget id='HTML7' locked='false' title='' type='HTML'/> blabla </b:widget> /* Gadget catcher */
<b:widget id='HTML3' locked='false' title='' type='HTML'/> blabla </b:widget> /* Gadget catcher */
</div> /* Penutup catcher */
<div id='sticky'> /* pembuka sticky */
<b:widget id='HTML3' locked='false' title='' type='HTML'/> blabla </b:widget> /* Gadget Sticky*/
</div> /* penutup sticky */
<div> /* penutup sidebar */
dan gambar sederhananya akan menjadi seperti ini
Sekian saja yang dapat saya sampaikan semoga artikel diatas bermanfaat, mungkin kalau ada kesulitan silahkan mengisi kotak komentar dibawah, kalau ada waktu akan saya bantu. Terima kasih telah berkunjung.
^_^
Keyword :
cara membuat sticky widget
cara mudah membuat sticky widget
trik membuat sticky widget