Cara Membuat Daftar Isi di Blog

Cara pasang daftar isi otomatis di blogspot sangatlah mudah, Oke langsung saja mari mencoba untuk membuat daftar isi otomatis. Caranya adalah masuk ke blogspot- elemen halaman - tambah gagdet - tambah java script. Letaknya code dibawah ini disidebar anda pokoknya yang bisa ditambahi gagdet dan sesuaikan dengan selera anda. Berikut kode html untuk memasang daftar isi otomatis di blogspot. Silahkan copy paste kode berikut kedalam blogspot anda di bagian sidebar maupun footer pokoknya seenaknya dipandang aja nantinya.




Awal Kode


<div style="border: 1px solid #000; overflow: auto; height: 300px;">
 <script style="text/javascript" src="http://hensblog.googlecode.com/files/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="/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
 </div>


Akhir Kode


Sedikit keterangan dari saya:
 Tulisan code html yang diwarnai biru bisa anda ganti sesuai selera anda
var numposts = 1000; = merupakan banyak maxsimal jumlah postingan blog yang akan ditampilkan dalam daftar isi otomatis.
var numchars = 100; = merupakan jumlah maxsimal judul dalam daftar isi otomatis anda
 auto; height: 300px;"> = Merupakan tinggi dari daftar isi otomatis anda.






Sebelum mencoba cara diatas ada baiknya membaca keterangan di bawah ini:
So sekarang cobalah memasukan kode diatas kedalam blog anda. Namun perlu diketahui cara diatas memiliki beberapa kelemahan dan kelebihan.


 Kekurangan dari daftar isi otomatis jika di pasang di blogspot
 1. Memperlama loading blog saat pengunjung masuk kedalam blog, namun ini berlaku hanya bagi blog yang memiliki banyak postingan. Kalau untuk blog yang memiliki postingan di bawah 100 menurut kami tidak masalah jika menggunakan daftar isi otomatis.
 2. Sesuai namanya, daftar isi otomatis tidak dapat mengurutkan judul daftar isi. Jadi semua postingan akan membaur menjadi satu, sangat tidak cocok bagi blog yang memiliki konten blog campuran. Namun untuk blog dengan satu topik bahasan tidak masalah.


 Kelebihan
 1. Mempermudah kita dalam melihat jumlah seluruh postingan kita, karena daftar isi otomatis secara otomatis mengurutkan postingan kita dengan nomer urut.
 2. Membuat kita lebih mudah melihat isi dari blog kita, terutama bagi pemilik blog dengan satu topik,




Cara pasang daftar isi manual di blogspot


 Berikut saya sertakan juga cara membuat datar isi manual, seperti yang dapat anda lihat disamping kanan blog ini. Pada bagian"istilah blogger" dan" semoga bermanfaat" berikut langsung saya copykan langsung dari blog saya sebagai contoh.


Awal code:
<div style="border: 0px solid rgb(153, 153, 153);
 overflow: auto;
 width: 230px;
 height: 180px;
 text-align: left; ">




 <img src="http://www.iconarchive.com/images/win.gif"/>
 <a href=" http://www.jasa-pembuatan-blog.com/2009/12/pengertian-user-friendly.html ">Apa pengertian user friendly </a> <br/>




 <img src="http://www.iconarchive.com/images/win.gif"/>
 <a href=" http://www.jasa-pembuatan-blog.com/2009/11/apa-itu-pengertian-blog.html ">Apa pengertian blog? </a> <br/>


 <img src="http://www.iconarchive.com/images/win.gif"/>
 <a href="http://www.jasa-pembuatan-blog.com/2009/11/apa-itu-hosting.html">Apa pengertian Hosting?</a> <br/>


 <img src="http://www.iconarchive.com/images/win.gif"/>
 <a href=" http://www.jasa-pembuatan-blog.com/2009/11/apa-pengertian-seo.html ">Apa Pengertian Seo? </a> <br/>


 <img src="http://www.iconarchive.com/images/win.gif"/>
 <a href=" http://www.jasa-pembuatan-blog.com/2009/11/apa-pengertian-domain.html ">Apa Pengertian Domain? </a> <br/>


 <img src="http://www.iconarchive.com/images/win.gif"/>
 <a href="http://www.jasa-pembuatan-blog.com/2009/11/apa-pengertian-sandbox-google.html">Apa pengertian Sandbox? </a> <br/>


 <img src="http://www.iconarchive.com/images/win.gif"/>
 <a href="http://www.jasa-pembuatan-blog.com/2009/11/pengertian-dofollow-dan-nofollow-serta.html">Apa itu dofollow nofollow? </a> <br/>




 <img src="http://www.iconarchive.com/images/win.gif"/>
 <a href="http://www.jasa-pembuatan-blog.com/2009/11/perbedaan-blog-dan-website-serupa-namun.html">Apa beda web dan blog? </a> <br/>




 <img src="http://www.iconarchive.com/images/win.gif"/>
 <a href="http://www.jasa-pembuatan-blog.com/2009/12/pengertian-toko-online-jasa-pembuatan.html">Apa pengertian toko online? </a> <br/>


 </div>


Akhir code






Ganti kode-kodenya seperti alamat link gambar, alamat link url blog, dan juga judul blog. Sedikit keterangan:


 <div style="border: 0px solid rgb(153, 153, 153);
 overflow: auto;
width: 230px; = Merupakan lebar dari kotak daftar isi manual, dan harus anda sesuaikan
 height: 180px; = Merupakan tinggi dari kotak daftar isi manual, dan harus anda sesuaikan,
 text-align: left; ">