Membuat Menu Show Hide Sederhana

Langsung saja, silahkan ikuti langkah-langkah berikut.
1. Login ke Blogger
2. Design (Rancangan)
3. Edit HTML
4. Download dulu template sobat.
5. Carikan kode </Head> tekan ctrl + F utnuk mempermudah pencarian,
6. Sisipkan berikut  ini di atas code </Head>.

<style type='text/css'>

.texthidden {display:inline}

.shown {display:block}

</style>

<script type='text/javascript'>

document.write(&#39;<style>.texthidden {display:none} </style>&#39;);

</script>

<script type='text/Javascript'>

function expandcollapse (postid) {

whichpost = document.getElementById(postid);

if (whichpost.className==&quot;shown&quot;) {

whichpost.className=&quot;texthidden&quot;;

}

else {

whichpost.className=&quot;shown&quot;;

}

}

</script>

7. Carikan Kode ]]></b:skin> untuk mempermudah tekan ctrl_
Sisipakkan Kode di bawah ini tepat di atas Kode ]]></b:skin>

h4 {
background: #00FF00;
background: -webkit-gradient(linear, left top, left bottom, from(#00FF00), to(#0000FF));
 /* CSS gradient */ background: -moz-linear-gradient(top,#0000FF, #00FF00); /* CSS gradient */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8A2BE2', endColorstr='#00FF00'); /* CSS gradient ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF00', endColorstr='#555555'); /* CSS gradient ie8 */ zoom: 1; /* hack untuk ie7 */ border: solid 1px #555555;
padding: 3px 5px;
color: white;
font-size: 12px;
margin-bottom: 1px;
margin-left: -1px;
margin-right: -1px;
margin-top: 0px;
padding-bottom: 5px;
padding-left: 5px;
padding-top: 5px;
}

Teks yang berwarna Ungu merupakan warna gabungan yang bisa sobat sesuaikan dengan keinginan, silahkan sobat ganti jika tidak sesuai dengan kode warna yang saya berikan diatas.

8. Simpan Template.

Kemudian kita lanjut kan menyisipkan di sidebar. 1. Masih di Design > Page Element > Add A Gadget > HTML/JavaScrip  2. Masukkan code dibawah ini 

<ul><a href="javascript:void(0);" onclick="expandcollapse('keyword1')"> <h4> NAMA TAMPILAN MENU1</h4></a></ul>

<ul class="texthidden" id="keyword1">

<li>

<a href='http://siniput.blogspot.com/' target='_blank'> Tutorial Blog</a>

<a href='http://link.com/' target='_blank'> My Web</a>

</li></ul>

<ul><a href="javascript:void(0);" onclick="expandcollapse('keyword2')"> <h4> [+/-] NAMA TAMPILAN MENU2</h4></a></ul>

<ul class="texthidden" id="keyword2">

<li>Isikan Code/Text yang ingin ditampilkan</li></ul>

<ul><a href="javascript:void(0);" onclick="expandcollapse('keyword3')"> <h4>[+/-] NAMA TAMPILAN MENU3</h4></a></ul>

<ul class="texthidden" id="keyword3">

<li>isikan Code/Text yang ingin ditampilkan </li></ul>

Keterangan:
1. Teks yang berwana hijau harus sama di masing masing menu. jangan sampai berbeda!
2. Teks yang berwarna merah silalahkan sobat ganti dengan nama-nama masing-masing menu.
3. Teks yang berwarna Biru bisa sobat ganti dengan  link Blog,link label, kode, atau apapun yang ingin di tampilan didalam menu.

Artikel Terkait: