Memasang Menu Accordion Terbaru pada widget (vertikal)

Membuat menu accordion di widget merupakan satu cara untuk memperindah blog dan menghemat tempat di widget...
Script ini sangat berguna, khususnya bagi sobat yang memiliki banyak konten pada sidebar sobat.
tak usah memikirkan tempat dimana untuk meletakan konten sobat, saya sarankan gunakan lah menu accordion ini...
adapun cara membuat / memasang menu accordion pada widget adalah sebagai berikut...
1. Login ke blog sobat.
2. Masuk ke Template > Edit HTML > centang Expand Template Widget
3.search ]]></b:skin> (gunakan ctrl + F untul mempermudah pencarian sobat) dan pastekan script berikut ini di atasnya

.arrowlistmenu{ width: 320px; /*ukuran lebar dari menu*/ } .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/ font: bold 14px Comic San Ms; color: yellow; background: black url(http://i287.photobucket.com/albums/ll147/rum_marewa/titlebar.png) repeat-x center left; margin-bottom: 10px; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 4px 0 4px 10px; /*header text is indented 10px*/ cursor: hand; cursor: pointer; } .arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/ background-image: url(http://i287.photobucket.com/albums/ll147/rum_marewa/titlebar-active.png); } .arrowlistmenu ul{ /*CSS for UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/ } .arrowlistmenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ } .arrowlistmenu ul li a{ color: #A70303; background: url(http://i1297.photobucket.com/albums/ag22/jeskarex/JeSka_zps91ca5632.gif) no-repeat center left; /*custom bullet list image*/ display: block; padding: 2px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: bold; border-bottom: 1px solid orange; font-size: 90%; } .arrowlistmenu ul li a:visited{ color: #ffff00; } .arrowlistmenu ul li a:hover{ /*hover state CSS*/ color: #ffff00; background-color: #AAAAAA; }  

4. Search  </head> (gunakan CTRL + F untuk mempermudah pencarian sobat) dan pastekan script berikut ini di atasnya

<script src='http://rbcsulsel.googlecode.com/files/ajax.js' type='text/javascript'/> <script src='http://rbcsulsel.googlecode.com/files/menuacordion.js' type='text/javascript'/> <script src='http://rbcsulsel.googlecode.com/files/acordion2.js' type='text/javascript'/>

5. simpan templatenya
6. Masuk ke Tata Letak > Tambah Gadget > pilih HTML/JavaScript dan pastekan script berikut ini

<div class="arrowlistmenu">
<h3 class="menuheader expandable"><center>○ Turtorial BLOGGER ○</center></h3>
<ul class="categoryitems">
<li><ol>
<script src="http://rexroom.blogspot.com/feeds/posts/default/-/Tentang%20BLoG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
 <ol>
<script src="http://rexroom.blogspot.com/feeds/posts/default/-/Tips%20dan%20Trick?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
 </ol>
 </li></ul></div>

keterangan :
Warna merah adalah judul,
warna biru adalah url sobat

jika ingin menambahkan jumlah menu, sobat tinggal copy script dan menambahkannya pada atas </div>

contohnya seperti di bawah ini :

<div class="arrowlistmenu">
<h3 class="menuheader expandable"><center>○ Turtorial BLOGGER ○</center></h3>
<ul class="categoryitems">
<li><ol>
<script src="http://rexroom.blogspot.com/feeds/posts/default/-/Tentang%20BLoG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
 <ol>
<script src="http://rexroom.blogspot.com/feeds/posts/default/-/Tips%20dan%20Trick?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
 </ol>
 </li></ul> 
<h3 class="menuheader expandable"><center>○ Aksesoris blog keren ○</center></h3>
<ul class="categoryitems">
 <li>
<ol>
<script src="http://rexroom.blogspot.com/feeds/posts/default/-/aksesoris%20blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol></li></ul>
</div>

7. Simpan dan lihat hasilnya....
semoga bermanfaat ^^

Related Post: