25 November 2010
Membina Hide/Show Element
hak milik
Sue
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
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