Sembunyi & Lihat HTML Code


Setelah sekian lama aku menulis entri tentang Windows 7 dan aplikasi. Kini aku kembali unyuk menulis sedikit tutorial untuk pengguna blogger. Plugin kali ini mempunyai fungsi sama seperti read more. Tetapi ia tidak membuka page lain apabila di klik. Satu drop down menu akan terhasil seperti contoh dibawah. Setelah anda mengikut cara dibawah, blog anda akan mempunyai post yang seperti Biskut Chipsmore. Sekejap ada, sekejap tak de.

Contoh :

Klik Disini Untuk Melihat Contoh...


Bagaimana Mahu Menggunakannya :


01. Tambahkan Css dan Javascript Code dibawah. Pastikan korang meletakkannya sebelum </head>


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



02. Cara Untuk Menggunakannya.
  • Letak la kat mana yang korang suka.
  • Pastikan korang tukar "UniqueName" kepada perkataan lain. Apa-apa pun boleh.
  • Link Title untuk ayat yang korang nak gunakan sebagai link untuk memperlihatkan code yang korang buat nanti.
  • Expanded Content untuk code/ayat yang korang nak sembunyikan.




<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')"
>Link Title</a><br />
<div class="commenthidden" id="UniqueName"
>Expanded Content</div>



03. Sample


<a aiotitle="" href="javascript:togglecomments('hideshowdemo')">Klik Disini Untuk Melihat Contoh...</a>
<div class="commenthidden" id="hideshowdemo"><ul><li><a href="http://mrpiratz.blogspot.com/feeds/posts/default">Subscribe My Blog</a></li><li><a href="http://mrpiratz.blogspot.com/search/label/Tutorial">Lihat Tutorial Blogger Lain</a></li><li><a href="http://www.twitter.com/piratz">Follow My Twitter</a></li></ul>
</div>



Selamat Mencuba!!

4 Comments

Previous Post Next Post