17 March 2010
Hide / Show , Expand / Collapse - Post Element
hak milik
Sue
Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaiamana nak buat Hide / Show , Expand / Collapse pada post . Ia adalah untuk menjimatkan ruang .
KLIK UNTUK LIHAT
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
Via - BlogU
KLIK UNTUK LIHAT
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
Via - BlogU
MASUKKAN APA SAJA YANG KORANG NAK SEMBUNYIKAN SAMAADA TEXT , PICTURE ATAU SEBAIGAINYA .