Menyembunyikan Comentar dengan Accordion Menu jQuery

Nah... posting lagi deh..

Sekarang saya akan share gimana cara menyembunyikan komentar pada posting di blog dengan teknik expand collaps . Udah bisa temen2 liat gimana tampilan komentar pada blog q ini . Lumayan kan ? buat nyembunyi'in komentar yg terasa terlalu banyak atau sekedar mempercantik tampilan commentar pada blog .

Disini saya akan coba share dari awal gimana cara buat accordion menu sampai gimana cara penerapannya pada commentar .


Untuk contoh dari Accordion menunya bisa teme2 liat di sebelah kiri blog saya,,

trus cara buatnya ?? ini tutorial saya ambil dari sini


1. Masukan script jquery ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

NB: Kalo udah punya biarkan saja biar ga double .

2. masukan script ini dibawah script diatas .
<script src='http://granoblog.googlecode.com/files/acordion.js' type='text/javascript'/>

<script src='http://granoblog.googlecode.com/files/acordion2.js' type='text/javascript'/<

Nb : Sebaiknya dihostingkan sendiri ke hostingan favorit sobat yg sekiranya lebih cepat


3. ini css nya..

.arrow{
width: 425px; /*width of accordion menu*/
}

.arrow .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(http://i25.tinypic.com/2885cih.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;
}

.arrow .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(http://i28.tinypic.com/24mw0n5.jpg);
}

#main .box1 .arrow 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*/
}

.arrow ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrow ul li a{
color: #A70303;
background: url(http://i27.tinypic.com/eldzxd.png) 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 #dadada;
font-size: 90%;
}

.arrow ul li a:visited{
color: #A70303;
}

.arrow ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

NB: Sesuaikan sama kebutuhan yah..

4. Sekarang penempatanya...

<div class="arrow">

<h3 class="menuheader expandable">Judul</h3>
<ul class="categoryitems">
isi..
</ul>

<h3 class="menuheader expandable">Judul</h3>
<ul class="categoryitems">
isi..
</ul>

<h3 class="menuheader expandable">Judul</h3>
<ul class="categoryitems">
isi..
</ul>


</div>


jadi deh accordion menu nya..

sekarang gimana caranya mengapplikasikan accordion menu pada kotak komentar..

1. Masuk Edit-HTML jangan lupa centang Expand Template Widget . lalu cari kode

<DL id='comments-block'>

lalu tambahkan script dibawah ini tepat diatas kode di atas,
<div class="arrow">

<h3 class="menuheader expandable">Judul</h3>
<ul class="categoryitems">

2. Lalu cari kode </DL> dan masukan kode ini tepat dibawah nya,
</ul>


</div>

nah selesai.. temen2 juga bisa pakai expand-collaps lain atau memakai accordion menu lain, asalkan benar dalam memasang/mengapplikasikannya pada comentar blog.

nah.. semoga postingan kali ini cukup bermanfaat.. kalo ada salah tolong di kasih comment.. soalnya saya bukan malaikat yg selalu benar.. hoahoahoa...