[+/-] 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 :

1. Login ke blogger
2. Pilih Layout --> Edit HTML
3. Cari code ini </head> cara mudah mencari, gunakan CTRL + F
   
4. 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>



save template anda..


5. Pergi ke Page Element --> Add Page Element --> HTML/Javascript
6. 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>




7. Keyword yang anda gunakan hendaklah sama.
8. 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"><!-- Begin ShoutMix - http://www.shoutmix.com
--><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;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;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;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;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;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;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;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;
amp;gt;</iframe>
<!-- End ShoutMix --></a></p>

</ul>








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


Tambahan disini, jika anda boleh lakukan, anda buatlah, Jika hendak menambah boader,size font, dan sebagainya pada tajuk/title, anda buat seperti ini
**tidak digalakkan bagi newbie**


12. Cari code seperti ini Layout --> Edit HTML, cari di bahagian #heading bagi template minima
    

    h2 {
    -------
    -------
    -------
    -------
    }

    
    
13. Tambahkan Code ini dibawahnya



h4 {
-------
-------
-------
-------
}


*jika code h4 sudah ada,anda jgn usik code itu, anda masukkan code td tetapi ditukar dengan h5 atau h6 & sebagainya..


14. Anda masukkanlah code untuk background, size dan sebagainya.
15. Save & lihat hasil kerja anda

semoga berjaya mengeditnya..
credit:teratak muncit