Membuat Daftar Isi Blog

Ada yang bertanya kepada su bagaimana membuat daftar isi seperti di blog su ini.Ngeh ngeh ngeh rupanya ada gaks yang berminat yer..K lah..sebenarnya dengan adanya daftar isi ini,ianya menjimatkan ruang blog korang.Yelah cuba korang bayangkan jika post korang dah sampai 300 post,takkanler korang nak biarkan pelawat korang scroll sampai ke bawah..huhuhuhu..sian kat pelawat korang.Yang paling penting,setiap kali korang post posting terbaru,ianya akan secara automatik berada didalam daftar isi korang.

Caranya mudah sahaja:

Langkah Pertama

1.Login ke blog korang
2.Klik Layout
3.Klik Edit HTML
4.Cari kod
]]></b:skin>

5.Letakkan kod berikut

#toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;}

.toc-header-col1, .toc-header-col2,

.toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}

.toc-header-col2 { width:75px;}

.toc-header-col3 { width:125px;}

.toc-header-col1 a:link, .toc-header-col1 a:visited,

.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,

.toc-header-col3 a:visited { font-size:100%; text-decoration:none;}

.toc-header-col1 a:hover,

.toc-header-col2 a:hover,

.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}

diatas kod ]]></b:skin>

6.Kemudian Save.


Langkah Kedua

1.Klik Page Elements

2.Klik A Gadget

3.Pilih JavaScript/HTML

4.Copy kod <div id="toc"></div> didalamnya

5.Kemudian Save.


Langkah Ketiga

1.Klik A Gadget
2.Pilih JavaScript/HTML

3.Copy kod

<ul><a href="javascript:void(0);" onclick="expandcollapse('Isi Blog')"> <h4>Isi Blog</h4></a></ul>

<ul id="Isi Blog" class="texthidden"><div style="border: 1px solid #000; overflow: auto; height: 220px; ">
<script style="text/javascript" src="http://mizwar.blog.googlepages.com/daftar_isi.js"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://galeriazmas.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&max-results=999
&callback=showrecentposts"></script>
</div></ul>

gantikan url blog dengan url blog korang sendiri

4.Save.

Akhirnya siaplah daftar isi blog korang tue.

Luangkanlah sedikit masa korang untuk memberi komen di blog ini kerana setiap komen yang dibuat oleh korang amat bermakna dan secara tidak langsung ianya memberi suntikan semangat untuk saya terus menulis di blog ini...