Cara Membuat Menu Daftar Isi di Blogger

Cara membuat menu Daftar Isi di Blogger cukup mudah sekali. Disini saya akan membantu kamu yang ingin membuat daftar isi Blogger yang atraktif.
Langkahnya sebagai berikut :

1. Masuk ke setting Blogger -> Template -> Edit HTML

“Menu Edit HTML”

2. Di dalam kotak kode HTML cari/search menggunakan  dan cari kode ]]></b:skin>

3. Copy kode HTML ini

/*——–MyBloggerLab TOC—–*/
.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‘);
}

paste diatas kode ]]></b:skin> 
Seperti ini :

Di dalam kotak merah adalah kode hasil paste

Setelah itu simpan ya

Setelah proses diatas selesai sekarang kita akan membuat Page baru untuk daftar isi tersebut. Silahkan masuk ke setting -> Page -> New Page

Setting New Page Blogger

Dan pilih HTML

Pilih HTML

Masukkan kode berikut :

<script src=”http://nurulimaminfo.googlecode.com/files/daftarisiv2-pack.js”>
</script>
<script src=”http://masukkan.alamat.blogmu//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://deroc.googlecode.com/files/accordion-pack.js” type=”text/javascript”>
</script>

Silahkan paste dan perhatikan untuk kode yang saya beri warna merah masukkan alamat blogger kamu dan setelah itu simpan.

Oke masih ada 1 tahap terakhir yaitu sekarang menuju ke setting -> Layout dan masuk ke setting Menu dan masukkan dengan mencentang Page Daftar Isi

Dan akhirnya silahkan Save !

Fyuh sampai disini selesai juga dan semoga saja dapat dipahami. Kalau ada kesulitan silahkan bertanya di kolom komentar.

Semoga bermanfaat.

Kredit Kode untuk Daftar Isi : http://www.abu-farhan.com/