Membuat Slide Panel Di Blog. seperti halnya menu accordion, slide panel bisa dipasang di sidebar ataupun di area posting. menghemat penggunaan tempat pada blog dan simple membuatnya. kemudian meletakkan gadget didalamnya.
Layaknya Simple Accordions, menu slide panel ini menyembunyikan content yang ada didalamnya kemudian akan ditampilkan setelah diklik.
Silahkan lihat demo menu Slide Panel berikut :
Cara membuat Slide Panel DI Blog adalah sebagai berikut :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Gunakan JQuery versi 1.2.3 berikut pada template anda. copy paste JQuery berikut dibawah <head> :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Gunakan JQuery versi 1.2.3 berikut pada template anda. copy paste JQuery berikut dibawah <head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>
- Copy paste script berikut dan letakkan dibawah JQuery 1.2.3 tadi :
<script type='text/javascript'>
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
});
</script>
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
});
</script>
- Masukan code CSS berikut dan letakkan diatas ]]></b:skin> :
#panel {background: #fff;border:2px solid #f0f0f0;border-bottom:none;text-align:left;padding:10px;width:280px;height:200px;display: none;}
.slide {margin: 0;padding: 0;width:304px;border-top: solid 4px #422410;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAwR29mn1aDwLySH7t5jiaYD-NZZQ86s6XWA5Vo52BBAw77i0D7XHNzbQuCH2WobCeqVWM263anTq3COsOO3N-TM1U42a0ILivo-SAsEu8AuGdzOvqGpy956c7aWDUW4uEAtJnbNmRkKg/s1600/btn-slide.gif) no-repeat center top;}
.btn-slide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPCzyBxECRGT61HmncUVZwT92Df6dkyZcSVaiLIxSlikKnCGCDrRuHuuQkTId0hSjxcL15OQUhXQv27RftLqmN_8MCu2ETMGsFCv04qK-RFGcU5Di6QVbW2q1nUNx6uKbgPzXw2Lx1PDY/s1600/white-arrow.gif) no-repeat right -50px;text-align:center;width: 144px;height: 31px;padding: 10px 10px 0 0;margin: 0 auto;display: block;font: bold 120%/100% Arial, Helvetica, sans-serif;color: #fff;text-decoration: none;}
.active {background-position: right 12px;}
.slide {margin: 0;padding: 0;width:304px;border-top: solid 4px #422410;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAwR29mn1aDwLySH7t5jiaYD-NZZQ86s6XWA5Vo52BBAw77i0D7XHNzbQuCH2WobCeqVWM263anTq3COsOO3N-TM1U42a0ILivo-SAsEu8AuGdzOvqGpy956c7aWDUW4uEAtJnbNmRkKg/s1600/btn-slide.gif) no-repeat center top;}
.btn-slide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPCzyBxECRGT61HmncUVZwT92Df6dkyZcSVaiLIxSlikKnCGCDrRuHuuQkTId0hSjxcL15OQUhXQv27RftLqmN_8MCu2ETMGsFCv04qK-RFGcU5Di6QVbW2q1nUNx6uKbgPzXw2Lx1PDY/s1600/white-arrow.gif) no-repeat right -50px;text-align:center;width: 144px;height: 31px;padding: 10px 10px 0 0;margin: 0 auto;display: block;font: bold 120%/100% Arial, Helvetica, sans-serif;color: #fff;text-decoration: none;}
.active {background-position: right 12px;}
- Simpan template.
Untuk langkah berikutnya adalah sebagai berikut :
- Copy paste code berikut dan letakkan ditempat yang anda inginkan (postingan atau sidebar) :
Untuk langkah berikutnya adalah sebagai berikut :
- Copy paste code berikut dan letakkan ditempat yang anda inginkan (postingan atau sidebar) :
<div id="panel" style="font-weight:bold;">
</div><div class="slide"><a class="btn-slide" href="#">Slide Panel</a></div>
</div><div class="slide"><a class="btn-slide" href="#">Slide Panel</a></div>
- Simpan.
# width:280px;height:200px; adalah lebar dan tinggi area content.
# width:304px; adalah lebar border pada code class slide.
# Slide Panel adalah tulisan pada tombol slide panel.
Untuk tutorial originalnya silahkan kunjungi postingan berjudul jQuery Tutorials for Designers.
Selamat mencoba dan happy blogging.
# width:280px;height:200px; adalah lebar dan tinggi area content.
# width:304px; adalah lebar border pada code class slide.
# Slide Panel adalah tulisan pada tombol slide panel.
Untuk tutorial originalnya silahkan kunjungi postingan berjudul jQuery Tutorials for Designers.
Selamat mencoba dan happy blogging.
Jangan tanyakan apakah menu ini memberatkan loading blog atau tidak. Bijaklah dalam mendesain blog anda. buatlah apa yang memang anda butuhkan untuk blog anda. Semua content dalam dunia blogger berpotensi membuat loading blog bertambah. jangan asal memasang dan membuat. sehingga anda tidak akan lagi menanyakan apakah ini memberatkan blog atau tidak !!!
ku simpan dulu deh tutorialnya
Wah kerennn demonya... Muantapp Hapiah!!
bagus ini... biar kagak melorot, rapi sobat jadinya...
btw kira2 ada g yah sobat TOP POSTINGAN with thumnail
terimaksih sobat.. langsung dipraktekin moga aja lancar.. :D
ijin disimpan dulu sahabat, makasih sudah berbagi. Salam
kren mas slidenyanya..
thank tipsnya..
artistik, membuat blog makin menarik
keren aq dah lihat demonya, oy aq request bisa nggak, bikin page navigation dengan Jquery / paka ajax ? kl bisa d tunggu jawabannya
Makasih, udah nambah ilmu nih.. ^_^
Hebat... infonya mantap... ^_^
thanks infonya..tapi ane masih belum mudeng...
keren nich tutornya ikut belajar juga achh
tutornya,, diamankan kang,, disimpen nich,,,
thx
Wach mantap dan keren nich mas tutorialnya mudah dimengerti serta simpel bgt,ijin simpan dulu kpn2 langsung dipraktekan slm knl...:D
Tutorial yang sangat berguna untuk saya dan pastinya untuk temen-temen yang lainnya juga.
Terima kasih telah berbagi
Ini postingan yang saya cari. Thanks
maju terus . tetap semangat
tutorial nya mantep juga ya...
thx thx =D
mas hapia selalu kreatif dengan Jquerynya :)
salut
kunjungan senin..:)
kunjungan senin..;)
ternyata keren abiz sobat.. pas saya cobat..
loadnya juga kgk bermasalah..
sekali lagi terimakasih banyak sobat :D
sukses bwt Anda
Tutorialnya bagus banget bisa membuat blog kita tampil elegan, kapan-kapan aku coba.
wah sy JQuery lover, suka semua dgn effect yg dihasilkan.
makasih tutorialnya.
thanks sobat atas infonya
ntar aku coba dulu ya
Kurang lebih sama dengan widget HIDE and SHOW.
Cuma Kalo Widget Hide And Show lebih praktis, karena memasangnya cukup dengan Add A Gadget, jadi tidak perlu masuk ke pengeditan HTMl..
But..it's a nice article..
ya..memang lebih praktis widget hide and show..
Tapi yang ini juga keren kok desainnya..
mantap tutorialnya hehe....tapi memperberat blog nggak ?
saya pelajari dulu bro
mau coba juga nih......