Hide/Show Elements

1. Login -> Layout -> Edit HTML. 2. Tambahkan script berikut sebelum </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. 3. Pergi ke Page Element -> Add Page Element -> HTML/Javascript 4. Masukkan senarai kod-kod hide/show seperti berikut: <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" hendaklah sama. Tidak boleh lain! Contoh: <ul><a href="javascript:void(0);" onclick="expandcollapse('Links')"> [+/-] Weblogs</a></ul> <ul class="texthidden" id="Links"> <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> <ul><a href="javascript:void(0);" onclick="expandcollapse('News')"> [+/-] Online News</a></ul> <ul class="texthidden" id="News"> <li><a href="http://linkn.com">News 1</a></li> <li><a href="http://link.com">News 2</a></li> <li><a href="http://link.com">News 3</a></li> <li><a href="http://link.com">News 4</a></li> <li><a href="http://link.com">News 5</a></li> </ul> Rujukan: Blogger Hack Updated! Jika korang nak buh background dan border mcm aku punya nie: -Mula2 gi kat Edit HTML dan Cari kod ini di bawah #Headings h2 { ------- ------- ------- ------- } so aku tambahkan code baru di bawahnya.. h4 { ------- ------- ------- ------- } -Buh jek lar background ke, border ker, font-size ker...macam2 lagi... kemudian Save Template. -Kemudian gi kat Page Element, buka balek kod widget navigation yg korang dah letak tu..lepas tu korang tambahkan saje <h4> dan </h4>di setiap tajuknye. -Contoh: <ul><a href="javascript:void(0);" onclick="expandcollapse('News')"> <h4>[+/-] Online News</h4></a></ul> <ul class="texthidden" id="News"> <li><a href="http://linkn.com">News 1</a></li> <li><a href="http://link.com">News 2</a></li> <li><a href="http://link.com">News 3</a></li> <li><a href="http://link.com">News 4</a></li> <li><a href="http://link.com">News 5</a></li> </ul>