BlogToC Widget Daftar Isi Terbaik

Hai sobat-sobat blogger di seluruh jagat raya apa kabar? Bersyukur pada Tuhan yang telah memberikan semua kebaikan hingga kita masih bisa ngeblog untuk meraih harapan melalui tulisan.

Apa kalian melihat sesuatu yang baru di Bizril blog? kalau konten dan post-post jangan ditanya karena semuanya baru dan segar-segar, hehe.. Bizril blog gak pernah memuat posting copas dari sumber lain, kalopun ada mungkin cuma ilmunya aja, hehe.. Oh iya sobat ternyata ada beberapa bagian yang berubah di sini, diantaranya perubahan widget Archives (Daftar Isi), sekarang lebih sederhana saja dengan hanya menampilkan sebaris tulisan Tampilkan dan Sembunyikan.


Coba saja lihat di kanan atas blog ini, betul kan? namun walaupun sangat sederhana tetapi kalau diklik akan menghasilkan informasi yang sangat jelas. Ada hubungan dengan SEO juga loh.. yaitu mengenai kecepatan loading sebah blog, dan ternyata itu mempengaruhi juga kualitas SEO sebuah blog.

Widget ini diperoleh saat jalan-jalan (blogwalking) langsung dari pembuatnya (menurut info dari file java scriptnya) yaitu sebuah blog bernama Beautiful Beta. Adapun widgetnya dinamakan BlogToC (Blog Table of Content) yang fungsinya untuk membuat daftar isi dengan tampilan sederhana namun memuat keterangan yang sangat informatif (alamat sumber/pembuat widget : http://beautifulbeta.blogspot.com/2007/04/blogtoc-widget-released.html).

Keberadaan Daftar Isi (Archive) pada sebuah blog sangat diperlukan, hal ini diperlukan untuk memberi keterangan / membantu kepada pengunjung tentang isi posting / artikel-artikel yang dimuat pada sebuah blog, sehingga pengunjung tidak kesulitan untuk mencari artikel yang ia kehendaki. Tentu saja keberadaan artikel pada daftar isi harus mudah untuk dicari oleh pelanggan.

BlogToC sebagai widget untuk menampilkan daftar isi yang sangat lengkap ternyata menggunakan sebuah file javascript yaitu blogtoc.js, file tersebut bisa didownload atau langsung digunakan tanpa didownload, cukup hanya mencantumkan URL sumber file tersebut, bisa langsung dari sumber pembuatnya atau bisa diperoleh dari google ternyata banyak yang menyediakan file ini.

Untuk menyesuaikan dengan kebutuhan informasi yang akan ditampilkan yaitu pengurutan daftar diurutkan sesuai dengan tanggal peosting, posting terbaru disimpan di atas dan berurutan berikutnya ke posting yang lebih lama, menyesuaiakn lebar tabel menjadi dinamis sesuai dengan lebar main-widget pada blog kamu, juga untuk menyesuaikan dengan bahasa blog ini.

Bizril blog telah memodifikasi file tersebut sehingga menggunakan bahasa Indonesia, tentu saja dengan memohon izin pembuatnya, sebelumnya diurutkan berdasarkan abjad dan menggunakan bahasa Inggris, walaupun sebenarnya urutan bisa diatur hanya dengan cara meng-klik judul tabel.

Untuk menggunakan widget ini tidak susah, sama halnya dengan memodifikasi template dan menggunakan widget-widget lainnya, tetapi kalau mau meodifikasi file js harus memiliki sedikit pengetahuan tentang bahasa pemrograman, karena ada struktur data pada proses pengurutan dokumen.

Yuk kita mulai saja pada tahapan-tahapan proses untuk memasang widget tersebut pada blog kita, tetapi jangan lupa sebelum melakukan pengeditan pada template blog lebih baik template dibackup dulu, caranya blok semua script template (CTRL-A) kemudian copy script template yang sudah dblok (CTRL-C), buat sebuah file text ganti nama file menjadi template.txt, kemudian paste script yang sudah dicopy ke file tersebut (CTRL-V) kemudian save file (CTRL-S). Oke lanjut ke proses, begini prosesnya...

1. Login ke dashboard blogger

2. Klik Template

3. Klik Edit HTML

4. Cari kode ]]>

5. Copy dan paste script di bawah ini tepat di atas kode tadi

#toc {border: 1px solid #f0f0f0;background: #ffffff; padding:2px; width:495px; margin-top:10px;} .toc-header-col1, .toc-header-col2,.toc-header-col3 {background: #eeeeee; color: #ffffff; 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; color:#224a7f;} .toc-header-col1 a:hover, .toc-header-col2 a:hover,.toc-header-col3 a:hover {font-size:100%; text-decoration:underline; color:#224a7f;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {padding-left: 5px; font-size:100%; background:#e5e5e5;}
(Kode warna bisa disesuaikan dengan kebutuhan.)





6. Klik Save Template

7. Klik Layout (di sebelah kanan, seperti jika mau menambahkan widget biasa)

8. Klik Add Gadget (yang tepat di atas widget Posting Blog)

9. Klik HTML/JavaScript

10. Copy dan paste kode di bawah ini pada text box widget HTML/JavaScript

<div id="toc"> </div> <div id="toclink"> </div> <script src="https://sites.google.com/site/blogabiz/Home/blogtoc.js"></script> <script src="http://bizril.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
11. Klik Save

12. Pastikan widget yang barusan ditambahkan tepat berada di atas widget Posting Blog

13. Klik Add Gadget (yang berada pada side bar)

14. Klik HTML/JavaScript

15. Copy dan paste kode di bawah ini pada text box widget HTML/JavaScript

<center> <table style="width: 100%px;"><tbody> <tr> <td width="45%"> <div id="toclink"> <center> <b><a href="javascript:showToc();">Tampilkan</a></b></center> </div> </td> <td width="10%"> <center> |</center> </td> <td width="45%"> <div id="toc"> <center> <b><a href="javascript:hideToc();">Sembunyikan</a></b></center> </div> </td> </tr> </tbody></table> <small><small><i>widget created by beautifulbeta.blogspot.com</i></small></small> </center>
16. Klik Save

17. Selesai (pastikan saat Copy-Paste script tidak ada yang berubah dan disimpan di tempat yang tepat)

Sekarang blog kamu sudah memiliki widget Daftar Isi (Archive) yang sama dengan punya Bizril blog. Untuk warna bisa disesuaikan dengan keingingn kamu, tetapi untuk mengubah urutan yang ditampilkan pertama, lebar kolom atau bahasa, kamu harus download dulu file blogtoc.js untuk diedit kemudian diupload ke situs hosting file (untuk hosting file gratis dan bisa upload file dengan ekstensi .js saya gunakan hosting google site dan yourjavascript.com).

Demikian tutorial tentang widget daftar isi BlogToC yang menurut saya sebagai widget daftar isi terbaik, semoga bermanfaat.

Baca juga posting terbaru dari Bizril blog :

+ Tombol Social Bookmark Sejajar Tanggal Posting

+ Trick Mengarahkan Error 404 (Page Not Found)

+ Situs Social Bookmark

+ Backlink Gratis dari BizriL doFollow Blog

+ Pentingnya Ping untuk SEO

daftar isi, widget daftar isi, widget archive, blogger archive, widget blogger, widget archive, widget daftar isi blog, widget archive blog, blogtoc widget, widget arsip blog, arsip blog