pada artikelku kali, saya akan menjawab pertanyaan dari seseorang yang tidak mau disebut namanya. pertanyaan yang dia ajukan kepada saya adalah.
"bagaimana cara membuat Sidebar Auto Slider/Scroll seperti di blog ini?"
kebetulan juga, blog tersebut, adalah blog milik saya yang sudah lama tidak diurus. jadi, cukup mudah bagi saya untuk menjawab pertanyaan orang yang tidak mau disebutkan namanya itu.
Sebelum menyampaikan step-by-step cara membuat Sidebar Auto Slider/Scroll, saya akan menjelaskan dulu, apa itu Sidebar Auto Slider/Scroll.
Sidebar Auto Slider/Scroll fungsinya adalah, memungkinkan Sidebar bergerak keatas atau kebawah mengikuti bergesernya Scroll Browser, sehingga, sidebar akan tetap terlihat dikanan atau dikiri postingan meskipun Scroll Browser telah di geser keatas maupun kebawah.
silahkan lihat beberapa gambar dibawah ini, untuk lebih memahami apa yang dimasud Sidebar Auto Slider/Scroll.
Mau dengan Sidebar yang bisa geser-geser seperti diatas ? silahkan ikuti petunjuk dibawah ini.
- login ke blogger
- click tab "rancangan" (kalau dalam bahasa indonesia)
- terus click sub tab "Edit HTML"
- Sebelum edit template kamu, ada baiknya untuk membackup template kamu
- Copy code dibawah ini dan paste code tersebut tepat di " dibawah ]]></b:skin> "
<script type='text/javascript'> $(function(){var offset=$("#sidebar-wrapper").offset();var topPadding=35;$(window).scroll(function(){if($(window).scrollTop()>offset.top){$("#sidebar-wrapper").stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$("#sidebar-wrapper").stop().animate({marginTop:0})}})}); </script>
Ganti
#sidebar-wrapper pada script diatas dengan tag id sidebarmu.
contoh:
#sidebar-wrapper
jika tag id sidebarmu seperti ini:
maka, script Auto Slider/Scrollnya berubah menjadi.
<script type='text/javascript'> $(function(){var offset=$("#right-sidebar").offset();var topPadding=35;$(window).scroll(function(){if($(window).scrollTop()>offset.top){$("#right-sidebar").stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$("#right-sidebar").stop().animate({marginTop:0})}})}); </script>
Itulah Tutorial Membuat Sidebar Auto Slider/Scroll
Ditulis oleh:
Riou Hato -
Saturday, July 7, 2012 - Rating:
4.5
Terima kasih sudah membaca artikel kategori Blogspot /
Javascript /
Widget
dengan judul Cara membuat Sidebar Auto Slider/Scroll (Sticky Widget). Anda bisa bookmark halaman ini dengan URL http://platorial.blogspot.com/2012/07/sidebar-auto-slider-atau-scroll.html?m=0. Jangan lupa share ke teman-teman ya.
