Menu Buka Tutup Di Sidebar

Budak bernama Firdaus telah meminta penulis agar mengajar cara untuk membuat menu buka tutup atau lebih dikenali sebagai hide show. Untuk itu, penulis akan memberi tutorial yang lengkap agar mudah difahami. Bersedialah untuk membaca entri yang agak panjang.


Sila Download Full Template sebelum memulakan sebarang pengubahsuaian pada blog. Berikut adalah cara² untuk membuatnya.

1. Login ke Blogspot.

2. Layout - Edit HTML.

3. Download Full Template sebelum mengedit blog.

4. Cari kod </head>, tambahkan kod ini di atasnya.

<style type="text/css">
.texthidden {display:inline}
.shown {display:block}
</style>


<script type="text/javascript">
document.write('<style>.texthidden {display:none} </style>');
</script>


<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="shown") {
whichpost.className="texthidden";
}
else {
whichpost.className="shown";
}
}
</script>
5. Kemudian, cari pula kod h2 {

Contoh :-

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
6. Tambahkan kod baru di bawah tanda }

h4 {
background: #ffdddd;
color: #666666;
margin-left: -1px;
margin-right: -1px;
margin-top: 0px;
margin-bottom: 1px;
padding-left: 10px;
padding-bottom: 5px;
padding-top: 5px;
border: 2px solid #996666;
font-size: 11px;
}
7. Save template.

Sekarang, kita perlu memasukkan kod ke Sidebar pula.

1. Page Element - Add A Gadget - HTML / Javascript.

2. Masukkan pula kod² di bawah ini.

<ul><a href="javascript:void(0);" onclick="expandcollapse('keyword')"> <h4>[+/-] Web Blog</h4></a></ul>

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

<li><a href="http://link.com">Link 1</a></li>

<li><a href="http://link.com">Link 2</a></li>

<li><a href="http://link.com">Link 3</a></li>

<li><a href="http://link.com">Link 4</a></li>

<li><a href="http://link.com">Link 5</a></li>

</ul>
Penting!!! Anda mesti meletakkan katakunci yang sama pada onclick="expandcollapse ('keyword') dan <ul class="texthidden" id="keyword">

Penulis akan memberikan contoh agar anda lebih faham.

<ul><a href="javascript:void(0);" onclick="expandcollapse('Sources')"> <h4>Sumber Rujukan</h4></a></ul>

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

<li><a href="http://muncet.blogspot.com/" target="_blank">Ien</a></li>

<li><a href="http://makeuseof.com/" target="_blank">Make Use Of</a></li>

<li><a href="http://sembangkomputer.com/" target="_blank">Sembang Komputer</a></li>

</ul>
3. Save.

Siap. Anda perlu teliti sewaktu memasukkan kod untuk mengelakkan widget bermasalah. Selamat mencuba. Semoga berjaya.

Update 20 Februari 2009

Sekiranya anda ingin menambah ikon seperti sebelum perkataan Sumber Rujukan, anda perlu memasukkan kod gambar selepas <h4>.

<ul><a href="javascript:void(0);" onclick="expandcollapse('Sources')"> <h4><img src="http://www.gambar.com/icon.png">[+/-] Sumber Rujukan</h4></a></ul>
Via : Muncet