Taukah sobat dengan yang namanya sticky?, mungkin yang sering didengar adalah sticky notes, yaitu catatan yang ditempelkan pada dekstop komputer. tapi untuk kali ini sticky yang saya maksud adalah sticky widget, yaitu widget yang ditempelkan pada bagian sidebar dan selalu mengikuti pergeseran halaman dengan start yang sudah ditentukan.
Untuk pembuat gadget yang satu ini sobat membutuhkan lumayan pengetahuan tentang kode HTML, dan silahkan dicoba-coba sendiri karena saya disini hanya akan sedikit menjelaskan.
Untuk contoh dari sticky widget adalah gadget Followers & Fans Page yang ada pada bagian sidebar blog ini, atau lebih jelasnya silahkan lihat screenshot berikut ini :
gadget tersebut etaknya paling bawah sendiri, tapi apabila sudah dirolling sampai ke gadget ini dan diteruskan di roll ke bawah, maka secara automatis gadget ini mengikuti sampai ke bawah, dan jika dikemalikan keatas lagi, maka gadget ini akan kembali ke posisi awal seperti semula.
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.
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.
Okelah semoga udah paham, dan sekarang mari kita membuat gadget sticky seperti yang dijelaskan diatas :
- Masuk dulu ke blogger sobat
- 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
- 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
- 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,
- jangan lupa untuk menutup kode tersebut dengan benar, sehinngga akan seperti ini
- kemudian pilih lagi gadget yang akan dijadikan sticky, dan taruh kode berikut tepat diatas gadget tersebut
- sekali lagi jangan lupa untuk menutupnya dengan tepat, sehingga akan menjadi seperti berikut
- Dan save pekerjaan sobat, kemudian lihat hasilnya
untuk contoh sederhana menaruh catcher dan sticky akan seperti ini
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
- 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
