Membuat Widget Daftar Isi Blogger – Table of Contents

Seperti apa yang pernah saya tulis sebelumnya Cara Submit Sitemap Blogger dimana kita dapat memanfaatkan feed Atom.xml sebagai sitemap agar blog kita diindex lebih cepat dan lebih baik oleh Google. Feed atom.xml blog kita ini juga dapat dimanfaatkan sebagai peta situs yang dapat melisting semua post yang ada dalam blog, atau dijadikan daftar isi untuk blog kita. Tentunya bagi pemilik blog hal ini adalah keharusan dan menjadi menu yang wajib ada dalam sebuah blog agar pengunjung dapat dengan mudah memilih artikel yang mungkin menarik baginya sehingga menjadikan blog kita User Friendly.

Membuat Widget Daftar Isi Blogger Cantik – Table of Contents

Untuk membuat daftar isi atau table of contents bagi blogger ini mudah saja, hanya perlu satu langkah mudah. Tidak perlu merubah dan mengotak-atik template atau menambahkan kode-kode yang sering bikin bingung, apalagi buat blogger newbie. Cukup buat satu halaman posting biasa atau halaman static, tapi bagusnya halaman static/ page aja. Setelah itu tambahkan kode di bawah ini dalam Mode HTML, berikut kodenya:

<style type="text/css">
/*Border atau pembatas luar
------------------*/
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); 
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}

/*Warna Label dan Background
------------------*/
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}

/* Info Post Terbaru
------------------*/
.new{color:#FF5F00;font-weight:bold;font-style:italic}

/*List Judul Post
------------------*/
.postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc"><script type="text/javascript" src="http://dvslabs.googlecode.com/files/customizable-TOC.js"></script>
<script src="http://blogkamu.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Ubah dan gantikan “blogkamu” dengan alamat asli blog kamu, jangan lupa save dan selesai. Sebagai contoh bagaimana daftar isi atau table of contents ini nanti jadinya, lihat demo di sini.
Secara default tampilan dari daftar isi ini akan seperti contoh pada link di atas. Tapi Sobat juga bisa merubah style yang ada untuk Border, Warna Label dan Background, Info Post Terbaru, and List Judul Post. Edit saja dan sesuaikan stylenya sesuai keinginanmu agar mathing dengan template blogmu. Sebagai catatan, effect linear gradient pada CSS sudah termasuk di dalam kode di atas. Untuk sebagian browser seperti Opera, effect linear gradient ini tidak akan muncul. Tapi bagi kebanyakan browser modern seperti Google Chrome, Mozilla Firefox atau Safari sudah dapat menampilkan effect tersebut dengan baik. Baca juga widget menarik lainnya, Page Navigation cantik untuk blogger.