Membuat Daftar Isi Blog Keren

proBlogiz

---

Table of Contents (ToC) di Blogger

Tentu Anda semua tahu pentingnya membuat Daftar Isi Blog atau Table of Contents (ToC) atau juga disebut Sitemap pada blog/website. Table of Contents merupakan halaman sebuah blog yang berisikan semua link-link posting artikel atau konten yang telah diterbitkan selama ini. Daftar isi juga berupa link-link yang disusun sesuai dengan kategori atau jenis artikel pada sebuah blog. Sitemap atau daftar isi ini bisa dijadikan panduan atau navigasi bagi user atau pengunjung blog untuk mempermudah menemukan artikel atau posting di blog itu sendiri.

Hampir semua website atau blog profesional menyediakan link yang menuju ke halaman Daftar Isi di situs mereka. Bagaimana dengan blog Anda Sob? saya yakin semua sudah memilikinya. Ada banyak sekali tutorial cara membuat Table of Contents (ToC) di Blogger dengan desain dan kelebihan masing-masing. Nah, Desain Blog Problogiz kali ini, ingin juga membagi tutorial cara membuat Daftar Isi (Sitemap) Blog yang Keren untuk Anda sobat blogger.

So, seperti biasa langsung lihat DEMOnya terlebih dahulu :

DEMO TABLE of CONTENTS (ToC) PROBLOGIZ

Gimana Sob, tertarik untuk membuatnya?

Daftar Isi Blog seperti demo diatas (our blog ToC) dibuat dengan CSS dan jQuery yang ringan, dan bekerja secara otomatis memperbarui (update) semua posting artikel baru yang telah diterbitkan. Dengan ditambah lagi Javascript ringan untuk menampilkan semua artikel yang dikelompokkan sesuai dengan kategori atau label di blog. Adanya jQuery script membuat list daftar isi atau susunan artikel terlihat lebih rapi, apik dan tertata secara accordion (sliding) listing.

ToC dengan Accordion jQuery script

ToC tanpa Accordion jQuery script

Lihat perbedaan tampilan gambar Table of Contents dengan Accordion style dan yang tidak, pada ToC tanpa accordion script hasilnya semua post akan tebuka sekaligus. Jika Anda lebih suka tampilan tanpa accordion dengan mudah Anda dapat menghapus scriptnya ( kode Javascript accordion yang berwarna merah)

 CSS

/*--------PROBLOGIZ TOC-----*/ 
.judul-label{ 
background-color:#E5ECF9; 
font-weight:bold; 
line-height:1.4em; 
margin-bottom:5px; 
overflow:hidden; 
white-space:nowrap; 
vertical-align: baseline; 
margin: 0 2px; 
outline: none; 
cursor: pointer; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; 
padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
-webkit-border-radius: .5em; 
-moz-border-radius: .5em; 
border-radius: .5em; 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 1px 1px 4px #AAAAAA; 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
color: #e9e9e9; 
border: 2px solid white !important; 
background: #6e6e6e; 
background: -webkit-gradient(linear, left top, left bottom, from(#0D0101), to(#575757)); 
background: -moz-linear-gradient(top,  #888,  #575757); 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); 
} 
.data-list{ 
line-height:1.5em; 
margin-left:5px; 
margin-right:5px; 
padding-left:15px; 
padding-right:5px; 
white-space:nowrap; 
text-align:left; 
font-family:"Arial",sans-serif; 
font-size:12px; 
} 
.list-ganjil{ 
background-color:#F6F6F6; 
} 
.headactive{ 
    color: #E51E1E; 
    border: 2px solid white !important; 
    background: #1C8DFF; 
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2)); 
    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2); 
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2'); 
}

Disini Anda dapat memberi sentuhan sendiri seperti warna font, background-color, hover, gradient, dll. sesuaikan dengan blog atau selera Anda. Perhatikan kode-kode yang berwarna, keterangan dibawah ini dapat Anda gunakan untuk mempermudah edit CSS :

• kode-kode yang diberi warna BIRU : warna-warna non aktif mode pada tab
• kode-kode yang diberi warna MERAH : warna-warna aktif mode pada tab
• kode warna PINK : warna background list yang bernomor ganjil
• kode warna UNGU : ukuran font dan jenis huruf list konten

Ada 2 metode cara menempatkan CSS di blog, yang pertama letakkan di template langsung atau bisa juga di pasang sekaligus di laman Daftar Isi (mode HTML) di post editor.

Javascript dan jQuery

<script src="https://problogizjs.googlecode.com/files/problogiz.toc.js"></script>
<script src="http://problogiz.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="https://problogizjs.googlecode.com/files/TOCaccordion.js" type="text/javascript"></script>

Pengunaan Javasript dan jQuery diperlukan untuk menampilkan Daftar Isi lebih menarik dan bekerja lebih baik, seperti menuyusun list-list artikel posting, memanggil data-data yang ada (json script), updating post-post baru, dan juga membuat accordion style atau sliding tab bekerja.

keterangan:

• ganti kode berwarna hitam dengan Url alamat blog Anda
• script yang berwarna biru berfungsi agar Table of Contents bekerja.
• script yang berwarna hijau berfungsi untuk memanggil data-data yang ditampilkan dalam hal ini artikel postingan blog yang ada.
• script yang berwarna merah adalah script accordion (tersusun ala sliding vertikal) untuk menu-menu tab daftar isi.

Langkah Memasang Daftar Isi Blog Keren di Blogger

Untuk metode pemasangannya, seluruh kode CSS diletakkan di template dan hanya Javascript di Laman Daftar Isi-nya.

Untuk CSS :

1. Blogger > pilih Template > Edit HTML
2. Control+F> cari kode ]]></b:skin>
3. Copy semua kode CSS diatas dan pastekan tepat sebelum kode ]]></b:skin>
4. Simpan template

Untuk Javascript

1. Masuk ke Laman > pilih Laman baru > pilih Laman kosong > beri Judul Laman (terserah Anda bisa "Sitemap"; "Daftar Isi"; atau " Table of Contents")
2. Kemudian klik HTML (tombol sebelah "Compose") > Copy semua kode javascript, jQuery diatas dan pastekan di area HTML tersebut.
3. Klik Pratinjau > kalau semua OK > Publikasikan

Done!!

tambahan:

Jika Anda sudah mempunyai Laman Daftar Isi Blog, tinggal ganti CSS dan Javascriptnya dengan yang baru kemudian Perbarui Laman-nya.

Anda juga bisa memberi deskripsi penelusuran dan ingat biasanya Pilihan untuk komentar disembunyikan (jangan bolehkan).

Untuk metode kedua, Anda dapat langsung memasang seluruh kode CSS dan Javascript di area Laman (mode HTML) dan publikasikan. Jangan lupa beri tag tambahan <style> kode CSS </style> kemudian diikuti Javascript dibawahnya.

Selamat Mencoba Kawan!! Semoga Desain Table of Contents sederhana ini bisa berguna buat Anda yang membutuhkan.

Salaam,