Tutorial : Jquery Accordion Navigasi

Okay, karena sekarang saya sudah move ke simple template, jadi edit-edit lagi, cuy! 

Walaupun melelahkan dan menguras banyak pikiran, tapi cukup MENYENANGKAN.

Kali ini saya hanya mau share sebuah tutorial Navigasi di sidebar yang bisa menghemat ruangan sidebar. Mau, kan blognya jadi gak berat? Makanya, kurangi penggunaan sidebar. *inilahresikopakaisimpletemplate

Salah satu cara meringankan blog adalah membuat cara agar satu sidebar itu bisa digunakan oleh beberapa widget. 

Nah, seperti gambar di bawah ini :

click image for ZOOM

Nah, itu namanya jquery accordion tab menu. Kita biasa menemukannya di sidebar blog seseorang.(Lihat sidebar saya.)  

Jika kita meng- hover navigasi itu, maka widgetnya jadi terbuka/terlihat. Jadi, sebelum di-hover, widgetnya masiih tersembunyi.  *ahhribet.  Yang jelas, kalian pasti sudah tahu tab menu ini.

Steps :

<style>
.accTab {
width: 225px;
padding: 1px;}
.accTab2 {
padding:3px;
display:block;
height:17px;
width:225px;
background:#fff;
-webkit-transition-duration:.8s;
-moz-transition-duration:.8s;
overflow:hidden;}
.accTab2:hover {height: 200px;}
tfqh01{
background: #CCE2F1;
letter-spacing:2px;
font-family:consolas;
font-size:11px;
color:#fff;
text-align:center;
padding-top:1px;
text-transform :uppercase;
height:16px;
display:block;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;}
</style>
<div class="accTab"><div class="accTab2"><tfqh01>JUDUL</tfqh01>
<div style="font:10px arial; height:150px; overflow:auto;margin-top:2px;">
ISI WIDGET 1
</div></div></div>
<div class="accTab"><div class="accTab2"><tfqh01>JUDUL</tfqh01>
<div style="font:10px arial; height:130px; overflow:auto;margin-top:2px;">
ISI WIDGET 2
</div></div></div>
<div class="accTab"><div class="accTab2"><tfqh01>JUDUL</tfqh01>
<div style="font:10px arial; height:130px; overflow:auto;margin-top:2px;">
ISI WIDGET 3
</div></div></div>

1. Copy code di atas, dan pastekan di widget.
2. For Template Designer : Paste di 'Add widget > Html Javascript'
3. For Classic Template/blogskin :  Paste di ruangan sidebar.
4. Preview
5. Save

Blue  :  Code Widgetmu.

Ask if not understand (y)

src : faqihahhusni