Membuat Daftar Isi pada Halaman Blogger Blogspot

Daftar Isi Blogspot ? apakah di perlukan, bagi saya tentu aja di perlukan, agar pengunjung web blog dapat lebih mudah mengakses halaman-halaman yang ada , apalagi jika blog yang kita kelola sudah memiliki banyak artikel.

Pada situs-situs blog dari blogger atau blogspot, ada beberapa trik menampilkan daftar isi blog baik melalui widget sidebar, entry post atau dari jenis halaman. Post kali ini akan mengungkap bagaimana membuat halaman daftar isi (Table of Content) pada halaman blogger. Dengan memanfaatkan javascript yang bersumber dari http://bloggergadgets.googlecode.com , anda dapat menaruhnya pada isi artikel di halaman blogspot anda. Kode sumber hasil tweak saya dapatkan dari situs www.bloggerplugins.org , dengan tweak tersebut anda dapat menampilkan daftar hingga 500 judul artikel pada halaman tersebut.

Berikut ini beberapa kelebihan yang ditawarkan dari versi tweak yang dibuat oleh admin situs diatas :
1. Dapat menampilkan hingga 500 judul artikel.
2. Ditampilkan dalam bentuk tabel dengan 3 kolom dan memiliki opsi sorting pada ke tiga kolom tersebut.
3. Contoh hasil dari halaman daftar isi ini, dapat anda lihat di halaman ini.

Langkah 1 - Buat Halaman dengan judul yang anda inginkan.

Copy paste kode dibawah ini dalam mode edit HTML pada halaman tersebut.

<div id="bp_toc">Loading TOC. Please wait....</div>
<script src="http://bloggergadgets.googlecode.com/files/blogtoc_orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>


Kemudian Publish halaman tersebut. Halaman ini sudah dapat memuat daftar isi blog anda, hanya saja tampilan tabel nya belum tersusun baik. Agar tabel tersebut tersusun baik, anda harus membuat pengaturan CSS bagi tabel ini. Silahkan ikuti tahapan-tahapan tersebut dibawah ini.

Langkah 2 - Menambah Parameter CSS Blogspot anda

Buka Dashboard anda, jika anda sudah menggunakan User Interface Blogger terbaru, silahkan cari dan buka Template, dan setelah itu buka Customize. Selanjutnya pilih Advanced >> Add CSS

Tambahkan kode dibawah ini ke kotak CSS tersebut :

#bp_toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
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:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}

Views