Dan adapun langkah - langkah pembuatanya adalh:
1. Log in ke blogger Dasbor Di Sini
2. Pilih Rancangan atau Tata Letak dan back up dulu templete anda.
3. Pilih Edit HTML.
4. Centang tulisan "expand template widget".
5. Cari kode ]]> dan tambahkan kode dibawah Kemudian Pastekan diatas kode ]]>
#catcher{
height:880px;/* tinggi catcher */
}
#sticky{
width:320px;/* lebar sticky */
height:auto;
}
height:880px;/* tinggi catcher */
}
#sticky{
width:320px;/* lebar sticky */
height:auto;
}
Keterangan :
catcher merupakan penjumlahan tinggi dari keseluruhan widget utama di tambah jarak antar widget sebelum stiky sidebar widget.
6. Cari kode <body> dan copy kode di bawah ini kemudian pastekan diatas kode <body> .
.
<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>
<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>
7. Cari kode kode di bawah ini gunakan Ctrl + F untuk memudahkan pencarian.
<div id='sidebar'>
</div>
</div>
8. Kemudian copy kode di bawah ini dan tempatkan diantara kode diatas tadi(no.7).
<div id='catcher'>
Widget utama pada sidebar
Widget utama pada sidebar
Keseluruhan widget utama selain Sticky sidebar
</div>
<div id='sticky'>
isi sticky widget, baik iklan,adsense,google plus badgage dan lain-lain sesuai dengan keinginan anda
</div>
Widget utama pada sidebar
Widget utama pada sidebar
Keseluruhan widget utama selain Sticky sidebar
</div>
<div id='sticky'>
isi sticky widget, baik iklan,adsense,google plus badgage dan lain-lain sesuai dengan keinginan anda
</div>
9. Lihat contoh di bawah ini ( pengaplikasian no 8 dan 7.
<div id='sidebar'>
<div id='catcher'>
Widget utama pada sidebar
Widget utama pada sidebar
Keseluruhan widget utama selain Sticky sidebar
</div>
<div id='sticky'>
isi sticky widget, baik iklan,adsense,google plus badgage dan lain-lain sesuai dengan keinginan anda
</div>
</div>
<div id='catcher'>
Widget utama pada sidebar
Widget utama pada sidebar
Keseluruhan widget utama selain Sticky sidebar
</div>
<div id='sticky'>
isi sticky widget, baik iklan,adsense,google plus badgage dan lain-lain sesuai dengan keinginan anda
</div>
</div>
Selamat mencoba dan semoga bermanfaat......
| 
Kok ga disebutkan sumbernya gan? Pertama saya nemu disini:
BalasHapushttp://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html
oh gitu yah kayanya sih saya juga nyonteknya dari bapa ismet soalnya di blog pa ismet ada di http://blog.hartleybrody.com/wp-content/uploads/2011/05/sticky-demo.html juga ada.....
BalasHapusane coba ah :D
BalasHapuslebarnya kok gak pas terus yah
BalasHapusLebarnya samakan dengan lebar sidebar anda.......ok...
HapusMantap kang, ane udah coba...
BalasHapus