Cara Membuat Drop Down Panel

Posted by Tips Trick Blogger Tuesday, March 1, 2011 0 comments

Drop Down Panel merupakan semacam window atau halaman buka tutup. Drop down panel ini dapat anda sisipkan tulisan, script aksesori blog, dan lain sebagainya. Tampilannya tidak ribet dan cukup menarik. Ok langsung saja ya brada and sista kita lanjut ke cara membuat drop down panel.

Silahkan Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan Script Berikut di atas kode </head>

<link href='http://bloekoetoek-blogonol.googlecode.com/files/dddropdownpanel.css' rel='stylesheet' type='text/css'/>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/dddropdownpanel.js' type='text/javascript'></script>
<script type='text/javascript'>
var testpanel=new ddpanel({
ids: ["mypanel2", "mypanelcontent2", "mypaneltab2"], // id of main panel DIV, content DIV, and tab DIV
stateconfig: {initial: "5px", persiststate: true}, // initial: initial reveal amount in pixels (ie: 5px)
animate: {enabled: true, steps: 5}, //steps: number of animation steps. Int between 1-20. Smaller=faster.
pointerimage: {enabled: true, src: ["arrow-down.gif", "arrow-up.gif"]},
closepanelonclick: {enabled: true} // close panel when links or elements with CSS class="closepanel" within container is clicked on?
})
</script>

Selanjutnya klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML JavaScript
Masukkan Kode di bawah ke dalamnya

<div id="mypanel" class="ddpanel">
<div id="mypanelcontent" class="ddpanelcontent">

<p style="padding:10px">
<img src="http://i1138.photobucket.com/albums/n524/blogonol/blogonol-image.jpg" class="closepanel" style="float:left; width:120px; height:120px; margin:0 10px 10px 0" />masukkan tulisan anda di sini. kalau anda memasukkan kode widget di sini silahkan anda berikan kode <br/> sebelumnya untuk memberi jarak ke bawah gambar, jadi widgetnya gak bertabrak dengan gambar anda. demikian penjelasan singkat tentang cara membuat drop down panel. anda bis mengkreasikan dengan berbagai bentuk untuk mempercantik blog anda. Ok selesai gan semoga bermanfaat. Terima kasih telah berkunjung ke blogonol. Salam persahabatan.
</p>
<br style="clear: center" />
<b>"keep spirits and do the best"</b>

</div>
<div id="mypaneltab" class="ddpaneltab">
<a href="#"><span><button>Buka</button></span></a>
</div>

</div>