Hide/show Navigation Elemen

Ini code hack yang saya dapat dari bu Annie's di blognya bloggeruniversity.blogspot.com.

Hide/Show Navigation Elemen ini sendiri, di gunakan bisa  untuk menganti A drop-down menu atau Archive drop-dwon menu, dan bisa juga di pakai ke dalam postingan. Saya sendiri dari mulai punya blog sampai sekarang suka pake hack dari bu Annie ini, terutama saya sering gunakan untuk menyederhanakan Blogroll yang sering terlalu panjang sampai memanjang ke bawah, contohnya seperti banner button di sidebar blog ini.

Step 1...+/-

Dalam halaman TEMPLATE tekan tulisan Edit Html.

kemudian simpan code di bawah ke dalam bagian code Css.  atau sebelum tag ]]></b:skin>.

.commenthidden {display:none}
.commentshown {display:inline}

Step 2...+/-

Simpan Code di bawah sebelum code atau tag </head>

<script type="text/Javascript"> function togglecomments (postid) { var whichpost = document.getElementById(postid); if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; } } </script>

Step 3...+/-

Dan code di bawah merupakan kode yang akan kita simpan baik itu di Sidebar, postingan atau di mana saja selama kode hack ini memungkin untuk di gunakan.

<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">Title
</a><br /> <div class="commenthidden" id="UniqueName">..isi..</div>

Inga- Inga !!

UniqueName : tulisan yg berwarna merah di atas, ganti dengan nama yang uniq artinya  tidak boleh nama yang sama dalam dua pengunaan.
Contohnya, jika saya mengunakan hack ini ke dalam blogroll link teman-teman dengan nama UniqueName-nya "LinkSatu", maka untuk blogroll link Situs Favorit misalnya, namanya harus "LinkDua".(ngga boleh sama ).

Title : merupakan judul atau tombol ( bisa berupa tulisan atau image ). yang apabila di tekan akan menampakan atau meyembunyikan sebuah elemen.

Isi  : merupakan Elemen yang di sembunyikan. bisa berupa postingan, linklist dll.

untuk pengunaan hack Hide/Show Navigation Elemen ini, anda bisa melihat contoh-contonya.

Contoh 1...+/-

Untuk megunakan hack ini ke dalam postingan. Pertama  dalam Editor blog kita harus menulis dalam bentuk Html jadi tekan Edit html.

kemudian contoh penulisan kodenya seperti ini.

<a aiotitle="click to expand" href="javascript:togglecomments('CONTOHPERTAMA')">
Postingan...+/-</a><br /> <div class="commenthidden" id="CONTOHPERTAMA">Untuk megunakan hack ini ke dalam postingan. Pertama dalam Editor blog kita harus nulis dalam bentuk Html jadi tekan Edit html.</div>

Contoh 2...+/-

Untuk di gunakan ke dalam elemen widget LinkList atau blogroll. pertama cari dulu kode html LinkList kita. caranya dalam halaman TEMPLATE buka EDIT HTML kemudian tandai Expand Template Widget.

Setelah itu cari kode html LinkList. misalkan kodenya seperti di bawah.dan lihat tulisan berwarna merupakan kode hack Hide/Show Elemen, yang saya tambahkan dan tempatkan di antara kode html LinkList.

<b:widget id='LinkList1' locked='false' title='Photoshop' type='LinkList'> <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'>
<a aiotitle='click to expand' href='javascript:togglecomments("Basic")'>
Blogroll...(+/-)
</a><br/> <div class='commenthidden' id='Basic'>
<ul>
<b:loop values='data:links' var='link'>
<li><aexpr:href='data:link.target'><data:link.name/>
</a></li>
</b:loop>
</ul></div>
<b:include name='quickedit'/>
</div>
</b:includable> </b:widget>

catatan :
Basic : merupakan uniqname
Blogroll...(+/-) : merupakan title atau semacam tombol.

Contoh3...+/-

Contoh4...+/-