Judul : Auto Slide Pada Sidebar Blog
link : Auto Slide Pada Sidebar Blog
Auto Slide Pada Sidebar Blog
D
asar adminnya baik apa yang di mintak ya saya kasih selama saya bisa,nah berdasar dari pemintaan pengunjung website ini maka pada postingan kali ini Full Blog design akan share tentang cara membuat Auto Slide Pada Sidebar Blog sebagai demonya coba sobat lihat di bagian sidebar kanan bawah (widget Komentar Terbaru)atau coba sobat lihat sreenshot gambar di samping kiri postingan ini.ide ini timbul saat saya melihat kurangnya widget yang saya pasang sehingga nampak bolog dan kosong saat di scroll ke bawah apa lagi postingan nya panjang di tambah lagi panjang nya komentar nah ,apabila saya pasang /tambah widget lagi ..ya sobat tau sendiri lah itu sangat berpengaruh terhadap looding blog itulah mengapa saya juga menggunakan trik sembunyikan widget sidebar | untuk mempercepat looding blog ,oke kembali ke topik untuk mengatasi bolong/kosong itulah ide untuk membuat sidebar blog menjadi Auto Slide /Naik Turun seperti demo yang sudah saya lakukan ,dengan ini sobat bisa melakukan 2 hal mau semua sidebar menjadi auto slide apa hanya widget tertentu saja yang menjadi auto slide dalam hal ini saya menggunakan hanya widget komentar Terbaru yang menjadi Autoslide dengan alasan letaknya yang pailng bawah .Untuk Cara membuat Auto Slide Pada Sidebar Blog kalian harus kenali dulu dari bentuk sidebar sobat karena di setiap template biasanya namanya berbeda beda seperti : #ssidebar ,lsidebar sedang pada template ini kodenya adala #sidebar-wrapper maka yang saya jadikan demo tentunya nama sideabr template ini yaitu #sidebar-wrapper- Cara yang kesatu membuat semua sidebar bisa naik turun/Auto Slide gunakan kode di bawah ini taruh tepat di atas kode </head>:
- Cara membuat hanya widget tertentu yang naik turun /auto slide(Komentar Terbaru) ,maka untuk melakukan trik ini sobat harus cari dulu nama kode HTML nya ,sebagai contoh kita akan membuat widget komentar terbaru menjadi auto slide maka sobat cari dengan bantuan Ctrl +F (jangan lupa expand widget template )cari kode Komentar Terbaru maka sobat akan menemui kode kurang lebih seperti di bawah ini :
- Coba sobat perhatikan kode yang di seleksi berwarna Kuning adalah hasil pemanggilan tadi (ctrl + F),tapi unutk kode yang di gunakan adalah kode yang disamping kirinya yang diseleksi berwarna PINK yaitu HTML5 tambahkan kode (#)didepan nya hingga menjadi seperti ini #HTML5 ,nah kode inilah yang nantinya yang akan menggantikan kode yang berwarna biru di atas ( #sidebar-wrapper) hingga nantinya akan menjadi seperti di bawah ini
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(function(){var offset=$("#sidebar-wrapper").offset();var topPadding=10;$(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>Jika pada template sobat sudah ada kode jquery seperti pada text yang berwarna
merah
di atas hapus saja kode nya dan gunakan salah satu saja sedangkan untuk teks yang berwarna biru
sesuaikan dengan kode sidebar sobat sendiri.. <b:widget id='HTML5' locked='false' title='Komentar Terbaru' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<script type='text/javascript'>
$(function(){var offset=$("#HTML5").offset();var topPadding=10;$(window).scroll(function(){if($(window).scrollTop()>offset.top){$("#HTML5").stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$("#HTML5").stop().animate({marginTop:0})}})});
</script>
Demikianlah Artikel Auto Slide Pada Sidebar Blog
Sekian Auto Slide Pada Sidebar Blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.