Cara Memasang Table Of Contents Di Blogspot

Jika anda mempunyai blog yang mempunyai banyak artikel dan label artikel yang bermacam- macam tentunya anda ingin mengatur daftar artikel tersebut menjadi lebih rapi dan enak untuk dipandang serta mudah dipahami oleh para pengunjung blog anda . Keuntungan dari hal ini adalah anda mempunyai kesempatan untuk memperoleh page view lebih banyak dibandingkan dengan blog yang belum rapi penyusunan artikel blognya. Solusi untuk permasalahan ini adalah kita harus membuat sebuah Table Of Contents ( TOC ) yang akan mengatur artikel blog kita akan tersaji lebih rapi dan akan memberikan peluang artikel yang lain dari blog kita dibaca juga oleh pengunjung blog kesayangan anda tersebut.

Terima kasih yang sebanyak -banyaknya untuk Abu Farhan yang telah menciptakan Table Of Contents ( TOC ) yang sangat indah dan menarik untuk dilihat.  Sebagai gambaran apa dan bagaimana wujud Table Of Contents ( TOC ) tersebut silahkan lihat DEMO TOC 

Nah menarik bukan ? sekarang kami akan mencoba memberikan tutorial cara memasang Table Of Contents tersebut di blog blogspot kesayangan anda.

Langkah Pertama :

Login ke akun blogger anda > Layout/ Design > Edit HTML
cari kode berikut ini 

]]></b:skin>

Copy kode CSS berikut ini dan tempelkan / pastekan diatas kode tersebut

.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(#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:#F6F6F6;
}
.headactive{
    color: #fef4e9;
    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');
}

Selanjutnya Simpan Template Blog anda.  

Langkah Kedua :

Buat static page baru ( bukan post / artikel baru )
Pilih mode Edit HTML , lihat pada gambar

Masukkan kode dibawah ini

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.klobot.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="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

Ganti URL feed post ( tulisan yang berwarna merah diatas ) dengan alamat blog anda.

Klik Publish Page , sekarang lihat Table Of Contents Blog anda.
Sekarang anda sudah mempunyai pengaturan artikel di blog anda menjadi lebih menarik .

Nb. Mohon jangan dihapus credit link dari Abu Farhan