Blogger Blogging membuat Daftar Isi Otomatis

Blogger Blogging kali ini akan sedikit memaparkan tentang cara membuat Daftar Isi Otomatis (sitemap otomatis) pada sebuah blog yang berisikan tentang daftar artikel-artikel yang tersedia dalam sebuah blog secara keseluruhan. Daftar Isi Otomatis ini akan langsung menghimpun artikel-artikel blog kita (baik yang lama maupun yang baru kita buat) dalam suatu kelompok-kelompok berdasarkan "label" artikel yang telah kita tentukan sebelumnya. Dengan mempergunakan Daftar Isi Otomatis ini, kita sebagai admin blog tidak perlu susah-susah untuk menyusun artikel-artikel blog secara satu per satu.

Berikut ini screen-shoot model atau bentuk Daftar Isi Otomatis tersebut.

Sebagai tambahan, dalam Daftar Isi Otomatis ini akan diberikan pula keterangan "New" untuk sepuluh artikel terbaru yang ada di dalam sebuah blog. Keuntungan memasang Daftar Isi Otomatis ini adalah akan mampu membuat sebuah blog lebih bersifat "User Friendly" karena dengan mempergunakan daftar ini seorang visitor atau pengunjung blog akan dengan mudah untuk mengakses keseluruhan isi blog yang kita miliki tanpa harus mengalami kesulitan yang berarti. Dari sisi pemilik blog, daftar ini sedikit banyak dapat membantu meningkatkan pageviews blog yang pada akhirnya nanti akan berdampak pada rampingnya Alexarank blog yang bersangkutan.

Cara pembuatan Daftar Isi Otomatis ini pun tidak terlalu sulit, dan dapat dilakukan oleh siapapun karena hanya tinggal mengcopy rangkaian script yang akan aku berikan berikut ini. Hal pertama adalah kita harus membuka sebuah halaman baru (halaman artikel maupun halaman statis), kemudian kita masuk ke dalam menu HTML halaman baru tersebut. Copykan rangkaian script berikut ke dalamnya, dan lakukan penyesuaian alamat url blog dengan alamat url blog yang anda pasang daftar ini.

Berikut ini rangkaian script CSS untuk memasang Daftar Isi Otomatis tersebut.

Rangkaian Script ? :

<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 type="text/javascript" src="http://yourjavascript.com/7157415382/halaman2.js"></script><script src="http://blog67blogging.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>

Langkah berikutnya anda tinggal mengganti alamat url yang tercetak merah tebal, sesuaikan dengan alamat url blog yang anda pasang daftar ini, kemudian simpan dan publikasikan. Lihatlah hasilnya ..... !!!!

Demikianlah uraian aku tentang cara membuat Daftar Isi Otomatis di blog, bilamana anda mengalami kesulitan, silahkan menuliskannya di dalam kotak komentar di bawah ini.