Tunjuk Dan Sembunyi Teks Dalam Pos Blog
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...
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>
Lepas tu cari kod </head>
Kemudian pastekan kod javascript ni sebelum/diatas kod </head>
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:
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
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}
.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>
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>
<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
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
Replymenarik gak terutama nak kenekan org kan2?
ReplyLatest Entry :
-> Tingkatkan Trafik Blog Dengan Sistem Autopost Entry Terbaru Di Malaysia Blogger United !
-> Lubang Terbesar Di Dunia Terletak Di Siberia
-> Bila Isu Bertunang Tanpa Sedar Itu Salah, Harap Maklum !
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.