[+/-] hide/show element or gadget

Kali ini kita buat hide/show elements [+/-] seperti yang ada di blog solehpolysas ini. Permintaan dari Dba Ghani dapat ditunaikan pada hari ini. Nah, khas untuk Dba. Kelebihan kita membuat hide/show elements ini ialah, blog kita lebih cepat untuk di loading. Ini membolehkan blog kita menjadi blog yang terbaik.

Mari kita mulakan tutorialnya :

Login ke blogger
Pilih Layout --> Edit HTML
Cari code ini </head> cara mudah mencari, gunakan CTRL + F
Kemudian copy coding ini dan letakkan sebelum code </head>

<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>

Pergi ke Page Element --> Add Page Element --> HTML/Javascript
Masukkan coding hide/show elements ini

<ul><a href="javascript:void(0);" onclick="expandcollapse('keyword')"> [+/-] Kategori</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>

Keyword yang anda gunakan hendaklah sama.
Lihat contoh ini jika anda ingin hide/show shout box seperti yang saya lakukan.

<ul><a href="javascript:void(0);" onclick="expandcollapse('chat')"> <h9>[+/-]
Shout Box</h9></a></ul>
<ul id="chat" class="texthidden">

<p align="center"><a>
<iframe scrolling="auto" width="350" frameborder="1" src="http://www4.shoutmix.com/?solehpolysas"
height="550" title="solehpolysas">&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a
href="http://www4.shoutmix.com/?solehpolysas"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;View
shoutbox&amp;amp;amp;amp;
amp;amp;amp;amp;amp;amp;amp;amp;amp;
amp;amp;amp;
amp;amp;amp;amp;amp;amp;amp;amp;amp;
amp;amp;amp;amp;amp;amp;amp;lt;/a&
amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
amp;amp;amp;amp;amp;amp;amp;amp;amp;
amp;amp;gt;&amp;amp;amp;amp;amp;amp;
amp;amp;amp;amp;amp;amp;amp;amp;amp;
amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
amp;amp;amp;amp;amp;amp;lt;br&
amp;amp;amp;amp;amp;amp;amp;amp;amp;
amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
amp;gt;</iframe>
</a></p>

</ul>

Code yang bewarna merah adalah code shout box saya.
Begitulah caranya. Harap, dengan contoh ini, lebih mudah untuk anda faham.
save kerja anda.

Cari code seperti ini Layout --> Edit HTML, cari di bahagian #heading bagi template minima
h2 {
-------
-------
-------
-------
}
Tambahkan Code ini dibawahnya