Label Cloud

Search This Blog

17 March 2010

online counter Hide / Show , Expand / Collapse - Post Element

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaiamana nak buat Hide / Show , Expand / Collapse pada post . Ia adalah untuk menjimatkan ruang .

CONTOH


KLIK UNTUK LIHAT

MASUKKAN APA SAJA YANG KORANG NAK SEMBUNYIKAN SAMAADA TEXT , PICTURE ATAU SEBAIGAINYA .




1. Login ke Blogspot .

2. Klik Layout - Edit HTML(Tandakan pada Expand Widget)

3. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .


body {



4. Copy kod dibawah ini ,


.commenthidden {display:none}
.commentshown {display:inline}



5. Pastekan kod diatasnya

6. Cari kod dibawah ini


</head>



7. Copy kod dibawah ini


<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>



8. Pastekan kod diatasnya

9. Preview dan Save template .

10. Klik Setting - Formatting

11. Cari Post Template





12. Copy kod dibawah ini


<a aiotitle="click to expand" href="javascript:togglecomments('UNIQUE NAME')">KLIK SINI</a><div class="commenthidden" id="UNIQUE NAME"><p>HERE IS WHERE YOU PLACE THE HIDDEN TEXT , PICTURE OR WHATEVER.</div>



Note: Pada highlighlight merah adalah untuk korang nak hidekan samada text , picture atau apa sahaja . Pada highlight biru korang tukarkan mengikut kehendak korang . Pada highlighlight Hijau korang tukarkan ngan nama pape , pastikan kedua2nya nama pada highlighlight hijau tesebut sama setiap kali korang nak buat hide / show pastikan nama UNIQUE NAME tidak sama dengan hide / show post yang sebelum ini .


CONTOH DUA HIDE / SHOW



<a aiotitle="click to expand" href="javascript:togglecomments('EMAILSAYA')">KLIK SINI</a><div class="commenthidden" id="EMAILSAYA"><p>HERE IS WHERE YOU PLACE THE HIDDEN TEXT , PICTURE OR WHATEVER.</div>


<a aiotitle="click to expand" href="javascript:togglecomments('STATISTIC')">KLIK SINI</a><div class="commenthidden" id="STATISTIC"><p>HERE IS WHERE YOU PLACE THE HIDDEN TEXT , PICTURE OR WHATEVER.</div>



13. Save Setting:okay:yahoo




Via - BlogU






Tinggalkan Komen Anda Disini