Membuat Widget Daftar Isi Blogger – Table of Contents #fslpasiar

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.

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>

Lihat Hasilnya Klik disini