Cara Membuat Accordion Menu Daftar Isi

Posted by Tips Trick Blogger Sunday, February 20, 2011 0 comments

Beberapa Kawan-kawan blogger menanyakan bagaimana membuat menu accordion vertikal yang nantinya dapat digunakan sebagai pengganti Tab Menu View. Sebenarnya ini pernah ane gunakan...dan kelebihannya tidak memperberat loading page. Accordion menu kali ini penggabungan dengan menggunakan jQuery jadi tampilannya lebih elastis sehingga gampang di gunakan. Accordion Menu ini besarnya akan menyesuaikan dengan lebar sidebar anda secara otomatis. Kelebihan lainnya daftar isi dibuat berdasarkan tanggal posting secara otomatis, disamping itu accordion ini dapat memuat beberapa atribut blog, seperti rescent comment, rescent post, widget ranking, dan lain sebagainya...jadi gak perlu banyak makan tempat karena dapat diwadahi dalam satu accordion...Sebuah tampilan kecil namun dapat memuat beberapa aplikasi atau widget dalam jumlah besar....anda penasaran dan ingin tahu....ikuti langkah berikut!!!!!

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut setelah kode ]]></b:skin>

<link href='http://bloekoetoek-blogonol.googlecode.com/files/blogonol.css' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://blackkapuas.googlecode.com/files/ddaccordion.js' type='text/javascript'>
</script>
<style type='text/css'>
.mypets{
cursor: hand;
cursor: pointer;
padding: 2px 5px;
border: 1px solid gray;
background: #E1E1E1;
}

.openpet{
background:#A9D0F5;
}

.technology{
cursor: hand;
cursor: pointer;
font: bold 14px Verdana;
margin: 10px 0;
}

.openlanguage{
color: green;
}

.closedlanguage{
color: red;
}

</style>

<script type='text/javascript'>

//Initialize first demo:
ddaccordion.init({
    headerclass: "mypets",
    contentclass: "thepet",
    revealtype: "mouseover",
    mouseoverdelay: 200,
    collapseprev: true,
    defaultexpanded: [0],
    onemustopen: false,
    animatedefault: false,
    persiststate: true,
    toggleclass: ["", "openpet"],
    togglehtml: ["none", "", ""],
    animatespeed: "fast",
    oninit:function(expandedindices){
    },
    onopenclose:function(header, index, state, isuseractivated){
    }
})

//Initialize 2nd demo:
ddaccordion.init({
    headerclass: "technology",
    contentclass: "thelanguage",
    revealtype: "click",
    mouseoverdelay: 200,
    collapseprev: false,
    defaultexpanded: [],
    onemustopen: false,
    animatedefault: false,
    persiststate: false,
    toggleclass: ["closedlanguage", "openlanguage"],
    togglehtml: ["prefix", "<img src='http://i13.tinypic.com/80mxwlz.gif' style='width:13px; height:13px'/> ", "<img src='http://i18.tinypic.com/6tpc4td.gif' style='width:13px; height:13px'/> "],
    animatespeed: "fast",
    oninit:function(expandedindices){
    },
    onopenclose:function(header, index, state, isuseractivated){
    }
})

</script>

Kemudian Simpan Template
Klik Lgi Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan Kode berikut ke dalamnya (perhatikan juga petunjuk editnya)

<h2>DAFTAR ISI</h2> /* silahkan ganti judul dengan keperluan anda */
<h3 class="mypets">Seo</h3> /* silahkan ganti dengan judul anda */
<div class="thepet">
<script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/Daftar-isi-berdasarkan-tanggal.js"></script>
<script src="http://blogonol.blogspot.com/feeds/posts/default/-/seo?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

<h3 class="mypets">Blog Info</h3>
<div class="thepet">
<script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/Daftar-isi-berdasarkan-tanggal.js"></script>
<script src="http://blogonol.blogspot.com/feeds/posts/default/-/blog%20info?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

<h2>Atribut</h2> /* silahkan ganti dengan judul anda */

<div class="technology">Sahabat</div> /* silahkan ganti dengan judul anda */
<div class="thelanguage">
<ul>
<li><a href="http://anehunikgokil.blogspot.com/" target="new">aneh, unik, gokil</a></li>
<li><a href="http://ariawijaya.com/" target="new">ariawijaya</a></li> /* silahkan ganti dengan alamat link atau yang lainnya */
</ul>
</div>

<div class="technology">Links</div> /* silahkan ganti dengan judul anda */
<div class="thelanguage">
<ul>
<li><a href="http://www.allblogtools.com/" target="new" title="HTML allblogtools">allblogtools</a></li>
<li><a href="http://html-color-codes.info/" target="new" title="HTML color codes">color codes</a></li> /* silahkan ganti dengan alamat link atau yang lainnya */
</ul>
</div>

<div class="technology">
Komentar</div> /* silahkan ganti dengan judul anda */
<div class="thelanguage">
<div style="border: 1px solid rgb(0, 0, 0); height: 280px; overflow: auto; text-align: center; width: 100%;">
<div class="imgblock200" style="text-align: center;">
<script src="http://anasmcguire.googlepages.com/recentcomment_indo.js">
</script><script>
var numcomments = 20;var showcommentdate = true;var showposttitle = true;var numchars = 150;var standardstyling = true;
</script><script src="http://blogonol.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script></div>
</div> /* silahkan ganti dengan kode lainnya bila anda perlukan */
</div>

<a href="http://blogonol.blogspot.com/">Back To HOME</a> /* silahkan ganti dengan alamat blog anda */

Catatan
Bila anda ingin menambahkan kategori atau label lagi tinggal copy kategori sebelumnya dan paste di tempat yang anda inginkan. Copy dari kode <h3 class="mypets"> dan seterusnya. Jangan lupa mengganti judul dan kategori yang berwarna orange. Contohnya seperti di bawah ini. (perhatikan tulisan merah)

<h3 class="mypets">Blog Info</h3>
<div class="thepet">
<script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/Daftar-isi-berdasarkan-tanggal.js"></script>
<script src="http://blogonol.blogspot.com/feeds/posts/default/-/blog%20info?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

Label yang lebih dari satu kata maka spasi diganti %20 misalnya blog info menjadi blog%20info. Sekarang anda sudah mempunyai accordion menu daftar isi dengan posting tiap bulan dan menurut kategori yang anda berikan pada posting anda sendiri. Ingat, seluruh posting anda terlebih dahulu disetting berdasarkan kategori atau label dan usahakan jangan terlalu banyak kategori yang anda berikan pada keseluruhan posting anda. Jla tersebut dapat berakibat memperbanyak jumlah kategori dalam accordion nantinya.