Label Cloud

Search This Blog

25 November 2010

online counter Membina Hide/Show Element

Assalamualaikum..setelah sekian lama menyepi,kini MsueRoomZ kembali..Kali ini Msue ingin berkongsi ngan korang bagaimana hendak membuat Show/Hide Url atau Elements . Ia macam dropdown menu tetapi yang ini menggunakan fungsi hide/show . Korang boleh gunakan untuk meletakkan korang punya link list ataupun element tertentu untuk menjimatkan ruang di sidebar korang .

1. Login ke Blogspot .

2. Klik Design - Edit HTML(Tandakan pada kotak Expand widget)

3. Cari kod di bawah .


</head>


4. Pastekan kod di bawah ini di atas atau sebelumnya .


<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. Preview dan Save template .

6. Klik pada Add a Gadget - HTML/Javascript .

7. Masukkan kod di bawah ke dalamnya .



<ul><a href="javascript:void(0);" onclick="expandcollapse('KEYWORD')"> [+/-] Kategori</a></ul>

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

<li><a href="http://linkataulinkelement.com">NAMA LINK ATAU NAMA ELEMENT 1</a></li>

<li><a href="http://linkataulinkelement.com">NAMA LINK ATAU NAMA ELEMENT 2</a></li>

<li><a href="http://linkataulinkelement.com">NAMA LINK ATAU NAMA ELEMENT 3</a></li>

<li><a href="http://linkataulinkelement.com">NAMA LINK ATAU NAMA NAMA ELEMENT 4</a></li>

<li><a href="http://linkataulinkelement.com">NAMA LINK ATAU NAMA ELEMENT 5</a></li>

</ul>


Note: Highlight merah - tukarkan yang bersesuaian , Highlight biru -Pada perkataan KEYWORD Gantikan ngan keyword korang sendiri(pastikan keywordnya sama)


Via - Muncet
Tinggalkan Komen Anda Disini