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>
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>
Judul Artikel :Auto Slide Pada Sidebar Blog
44 komentar
heee makasih mas :-bd permintaanku dikabulkan coba tak praktekan :yaya:
tapi bingung ya mas :-bd setelah kasih kode # jawabanya ID widget baru "#HTML1" tak valid untuk tipe berikut: HTML
Error 500
alamatnya urlnya mana
url alamat blognya apa widgetnya mas :-bd
alamat blog jenengan
http://www.mencintaisederhana.com
ok coba coba sendiri dulu ya ingat download lengkap dulu template ,saya akan pelajari dulu letak kesalahannya nanti saya konfirmasi
mantep dech sobat, ijin save dulu sobat, maklum lagi BW via hp nih hehehehe
setelah diperhatika demonya beberapa saat, beneran sungguh terpesona saya dibuatnya, superduper keren kang triks nya..simpen dulu ah, ntar tak pasang diblog saya yang lain.
tengkyu setengkyu tengkyunya yah...ilmu yang keren.
salam sehat selalu untuk akang sekeluarga
setelah saya pelajari ternyata masalahnya ada di sidebar jenengan yang masih menggunakan fungsi dropdown jadi sangat kesulitan menggunakan trik ini ,saya kasih solusi gunakan kode ini dan pasang di atas kode </head> berikut kodenya:
<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})}})}); maka hasil nya kunjungi ini :
http://kumpulanbiodata.blogspot.com/2012/08/download-mp3-coboy-junior-jendral-kancil.html
Maaf ada kesalahan gunakan kode ini :
<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>
Terima Kasih Mas motifasinya
Terima kasih mas
dua2 nya mas xixixixi
aduh ada kesalah juga bos xixixixix
'y bagi2 hadian,ni bang hahaha asik juga tuh bisa ngikutin kemanah aq pergi
Yoi sob kayak nya malam gini butuh copi hangat nich..he he
monggo di ambil di warung terdekat bayar sendiri hehehe
monggo ambil di warung terdekat bayar sendiri xixixi
ijin di praktekin mas :D
Silahkan
Silahkan..sob
Maaf OOT Lagi bang!semalam pas edit template belum di save malah mati lampu.
ukuran main wrapper nya sudah di rubah.saya mau tanya juga cara merubah warna garis tepi nya ada di kode apa?(warna yang biru tua).terimakasih
warna garis yang mana sob apa yang di main wrapper itu ya
sekalian ijin follow+menambahkan link abang ke daftar sahabat saya
Ia bang.yang biru tua
kurangi width di bagian Main-wrapper dari 690px jadi 670px atau sesuaikan karena kayaknya terlalu rapat ama sidebar di bagian post page sedang untuk merubah warna garis di bagian main-wrappar/postingan coba sobat cari bagian ini .post{......cari bagian border:0 solid #0000CD } ganti yang bagian #0000CD
Berhasil !pokok nya klo untuk masalah template abang jago nya dh.klo rumah abang dekat pasti saya kirimin kopi he he...
satu lagi bang sebelum berangkat jum'atan -untuk merubah warna judul posting di kode apa?jawab nya boleh kapan saja.
cari kode .post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong {color:#0A2E56......dst}rubah kode #0A2E56 ganti dengan yang sobat suka..
berkunjung sambil baca tutor bagus dimari gan,,,,salam kenal dan selamat sore
oke bang.trims
assalamualiakum om :-bd , saya mau tanya .. sidebar punya ane yang mana ya ?? saya coba semua kok gag bisa ?
nih url saya aktivis-islam.com
coba gunakan kode ini taruh di atas kode </head> berikut kodenya :
<script type='text/javascript'>
$(function(){var offset=$("#sidebarwrap").offset();var topPadding=10;$(window).scroll(function(){if($(window).scrollTop()>offset.top){$("#sidebarwrap").stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$("#sidebarwrap").stop().animate({marginTop:0})}})});
</script>
preview dulu sebelum disave
masih tidak bisa om , kalau boleh saya minta di editkan nih HTML template ane http://www.sharebeast(dot)com/sob3h900kqvm pass : 123
mohon bantuannya om, bila berkenan :)
ternyata letak kesalahan ada pada kode jquery :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
seharusnya kode ini ada di atas kode </head> bukan di bawah kode </head> saya kasih alternatif setelah kode jquery di perbaiki letakkan kode di bawah ini tepat di bawahnya kode jquery tadi atau di atas kode </head> berikut kode nya :
<script type='text/javascript'>
$(function(){var offset=$("#Followers1").offset();var topPadding=10;$(window).scroll(function(){if($(window).scrollTop()>offset.top){$("#Followers1").stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$("#Followers1").stop().animate({marginTop:0})}})});
</script> dalam hal ini yang akan berfungsi slide adalah kode follower karena kalau perubahan ada di kode #sidebarwrap maka follower nya tidak akan kelihatan..
maaf om , masih tidak bisa , udah saya coba pindah keatas , trus saya review ndak bisa , saya masih belum paham saat pembetulan menu jquery nya ..
saya lihat kode <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> masih ada di bawah kode </head> kan saya sudah bilang pindahkan di atas kode </head> kalau belum paham juga silahkan download templatenya disini :http://www.mediafire.com/?to9jsfdso2z3uld
pertama saya mau ucapin terima kasih ya om , dan satu lagi pertanyaan saaya , kalau saya nambah satu lagi widget di bawah Follow itu apa kah juga akan jadi auto slide ??
secara otomatis ya karena terdorong oleh widget di atasnya
makasi om :-bd , atas semua bantuannya yang sangat sangat membantu , skali lagi saya ucapkan terima kasih sekali ,, kapan2 ane bakal mampir lagi dimari om ,, wassalamualaikum Wr.Wb
izin copot gan
follback ya
http://arung jonga.blogspot.com
Thanks gan, infonya sangat bermanfaat.....
DOWNLOAD GAME ANDROID TERBAIK
weh,,
kayake keren ki widget...
tak cobain dulu ya mas...
blogwalking'
http://apkfree-download.blogspot.com
izin coba gan di => downloadallinfo.com
Posting Komentar
Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>