Kali ini saya akan membahas tentang Accordion, yang mana ini adalah salah satu bentuk menu mulanya..
Tapi setelah diracik, bisa juga buat widget di blog saya..

Mengapa saya namakan All in One widget ??!!

Karena ternyata memang bisa dipakai untuk memasukan widget blog kita loh..
Lihat demo nya pada sidebar blog saya..


Apabila di klik, maka sub menu atau widget yang dipasang didalamnya akan muncul..
Coba saja diklik..

Cuman ada kekurangan nya sedikit neg sob..
Acordion or All in One widget ini tidak bisa langsung membuka link, tapi harus mengklik kanan link tersebut, lalu open in new tab.. baru bisa kebua link yang terpaut didalam link tersebut.
Coba saja lagi pada widget All in One punya saya tersebut !!

Untuk membuat All in One widget tersebut, cukup lumayan rumit..
Harus sedikit faham tentang CSS dan jQuery.

Tapi apa salahnya dicoba..
Langkah-langkahnya :
1. Seperti biasa login dulu ke blogger.com
2. Cari menu LAYOUT ->> Edit HTML, centang kotak kecil disamping teks Expand Template Widget
3. Cari kode ]]></b:skin>
Dan taruh kode berikut di atas kode ]]></b:skin>

/* First Level UL List */
#accordion {
    margin:0;
    padding:0;   
    list-style:none;
}
    
    #accordion li {
        width:267px;
    }
    
    #accordion li a {
        display: block;
        width: 268px;
        height: 43px;   
        text-indent:-999em;
        outline:none;
    }
       
    /* Using CSS Sprite for menu item */
    #accordion li a.girant1 {
        background:url(url gambar) no-repeat 0 0;   
    }
    #accordion li a.girant1:hover, .popularOver {
        background:url(url gambar) no-repeat 0 0;    
    }
       
    #accordion li a. {
        background:url(menu.jpg) no-repeat 0 0;    
    }
    #accordion li a.girant2:hover, .categoryOver {
        background:url(url gambar) no-repeat 0 0;    
    }
       
    #accordion li a.girant3 {
        background:url(url gambar) no-repeat 0 0;    
    }
    #accordion li a.girant3:hover, .commentOver {
        background:url(url gambar) no-repeat 0 0;    
    }
       
       
    /* Second Level UL List*/
    #accordion ul {
        background:url(url gambar) repeat-y 0 0;
        width:268px;
        margin:0;
        padding:0;
        display:none;   
    }
       
        #accordion ul li {
            height:30px;
        }
           
        /* styling of submenu item */
        #accordion ul li a {
            width:240px;
            height:25px;
            margin-left:15px;
            padding-top:5px;
            border-bottom: 1px dotted #777;
            text-indent:0;
            color:#ccc;
            text-decoration:none;
        }

        /* remove border bottom of the last item */
        #accordion ul li a.last {
            border-bottom: none;
        }   
 

Ganti kode barwarna merah dg url gambar anda..
Saya sarankan untuk memakai format .png dg ukuran 200px X 40px. atau sesuai dg lebar kolom sidebar sobat.

Ingat gambar ini harus diisikan, karena pada #accordion ul nya tidak bisa di bubuhi text.

Lihat pada contoh di sidebar blog saya yang bertuliskan Category, Recent Post dan My Friend itu semuanya adalah format gambar.

jadi terserah sobat semua, nantinya akan memasukan widget apa, sesuaikan gambarnya dengan nama widgetnya.


4. Cari kode </head>
Dan taruh kode berikut di atas kode </head>
    

$(document).ready(function () {            $('#accordion li').click(function () {        /* FIRST SECTION */        //slideup or hide all the Submenu        $('#accordion li').children('ul').slideUp('fast');                        //remove all the "Over" class, so that the arrow reset to default        $('#accordion li > a').each(function () {            if ($(this).attr('rel')!='') {                $(this).removeClass($(this).attr('rel') + 'Over');                }        });                    /* SECOND SECTION */                        //show the selected submenu        $(this).children('ul').slideDown('fast');                    //add "Over" class, so that the arrow pointing down        $(this).children('a').addClass($(this).children('li a').attr('rel') + 'Over');                    return false;    });   
});

5. Layout --> Page Elements
Pilih tempat yang kamu inginkan kemudian Add a Gadget
pilih HTML/JavaScipt dan taruh code dibawah didalamnya
<ul id="accordion">
    <li>
        <a href="#" class="girant1" rel="girant1">girant1</a>
        <ul>
            <li><a href="#">Nama Link</a></li>
            <li><a href="#">Nama Link</a></li>
            <li><a href="#" class="last">Nama Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="girant2" rel="girant2">girant2</a>
        <ul>
            <li><a href="#">Nama Link</a></li>
            <li><a href="#">Nama Link</a></li>
            <li><a href="#" class="last">Nama Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="girant3" rel="girant3">girant3</a>
        <ul>
            <li><a href="#">Nama Link</a></li>
            <li><a href="#">Nama Link</a></li>
            <li><a href="#" class="last">Nama Link</a></li> <center>By: <strong><a href="http://agoezimoetz.blogspot.com/">Girant_31</a></ul>
    </li>
</ul>
Ganti kode barwarna merah dg url link yg dituju..
Ganti kode barwarna biru dg nama yg akan dipakai untuk menunjukan link diatas..
Kode berwarna Pink adalah isi dari Widget pertama.
Kode berwarna Hijau adalah isi dari Widget kedua.
Kode berwarna Orange adalah isi dari Widget ketiga.

6. Selesai..

Selamat mencoba..

Oy ada yg lupa, dan ini sangat Penting :
Tambahkan kode dibawah ini sebelum dan sesudah kode pd langkah no.4

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type='text/javascript'>

================

</script>

Maka nantinya akan terbentuk seperti dibawah ini :

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type='text/javascript'>

================
Kode no.4
================

</script>
Langkah ini, adalah trik memasukan kode java script pada template kita,
agar tidak susah payah lagi mengupload file.js nya.

Ok.. Insya Allah sobat semua akan berhasil membuat All in Widget Ini,
jika mengikuti langkah-langkah diatas dg baik dan teliti..