Cara Gampang bikin Daftar Isi/Sitemap Otomatis

Majalah Blog kali ini akan berbagi tips-trik tentang Cara Gampang bikin Daftar Isi/Sitemap Otomatis di blog, yang mana sitemap atau daftar isi ini biasanya diletakkan pada sebuah halaman statis blog. Sebagaimana kita ketahui, daftar isi ini adalah bagian sebuah halaman blog yang berisikan link-link menuju ke masing-masing halaman artikel blog sesuai dengan judul artikel yang tertera dalam daftar isi/sitemap tersebut.

Daftar Isi atau Sitemap ini akan membantu pengunjung untuk mengakses keseluruhan halaman artikel yang dimiliki oleh sebuah blog. Daftar Isi yang kita buat kali ini bersifat otomatis, sehingga kita tidak perlu memasukkan atau menyetingnya satu per satu. Berikut ini screen-shoot Daftar Isi/Sitemap Otomatis tersebut.

Bagaimana penampilannya ? Bagus bukan. Daftar Isi tersebut langsung tersistematis berdasarkan "label" artikel-artikel blog yang telah kita buat, dengan keterangan "New" untuk 10 (sepuluh) artikel terbaru yang ada di dalam sebuah blog. Bagaimana cara membuatnya ?

Buka sebuah "entri baru" atau "halaman baru", gunakan modus HTML, dan berikutnya copykan rangkaian kode script berikut ini ke dalamnya.

<style type="text/css">
.judul-label{
background-color:#9400D3;
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: #9400D3;
background: -webkit-gradient(linear, left top, left bottom, from(#888), 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:#DCDCDC;}

.headactive{
color: #9400D3;
border: 2px solid white !important;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');}
</style>
<script src="http://yourjavascript.com/7157415382/halaman2.js" type="text/javascript"></script><script src="http://mojoblog67.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>

Selanjutnya ganti alamat Url yang tercetak tebal dengan url blog anda sendiri simpan lalu publikasikan halaman tersebut, dan lihat hasilnya.