15 Disember 2010

Tunjuk Dan Sembunyi Teks Dalam Pos Blog

2 ulasan:
 
Aku nak kongsi ngan korang cara buat teks Tunjuk/Sembunyi kat dalam pos blog korang.Cara biasa yang digunakan adalah show and hide toggle javascript,tapi cara tu selalunya korang akan dapati bermasalah sikit bila korang nak buat multiple show and hide dalam satu pos...

Dalam contoh ni,aku andaikan korang ada sub topik yang korang nak sembunyikan sehingga pembaca klik pada headline.Tanpa trick show/hide,ia akan kelihatan macam ni...

Tajuk 1

Contoh Teks

Tajuk 2

Contoh Teks

Tajuk 3

Contoh Teks

Ok,memula sekali log in ke dashboard--->gi kat Design-->Edit HTML
Dan cari kod ni :]]></b:skin>

Pastekan kod dibawah ni sebelum/diatas kod ]]></b:skin>

.posthidden {display:none}
.postshown {display:inline}

Lepas tu cari kod </head>

Kemudian pastekan kod javascript ni sebelum/diatas kod </head>

<script type="text/Javascript">

function expandcollapse (postid) {

whichpost = document.getElementById(postid);

if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>

Save template dan sekarang apa yang korang perlu buat pada setiap pos yang korang ingin letak 'expandable' sub topik adalah cipta id unik untuk setiap sub topik dimana kod kelihatan macam ni:

<a href="javascript:expandcollapse('subtopic0001')">
<h4>Tajuk 1</h4></a>
<span class="posthidden" id="subtopic0001">
Contoh Teks</span>

<a href="javascript:expandcollapse('subtopic0002')">
<h4>Tajuk 2</h4></a>
<span class="posthidden" id="subtopic0002">
Contoh Teks</span>

<a href="javascript:expandcollapse('subtopic0003')">
<h4>Tajuk 3</h4></a>
<span class="posthidden" id="subtopic0003">
Contoh Teks</span>


2 ulasan:

  1. Cara ini adalah menarik untuk digunakan jika korang nak buat teka teki atau menulis spoiler bagi filem atau apa-apa menatang lain yang korang boleh fikirkan :k

    BalasPadam

TERIMA KASIH UNTUK KOMENKOMEN TERBARU

 
© 1986. Aideal Fitri - fitri1986 Malaysian Blogger