Bagi pengunjung daftar isi sangatlah perlu karena dengan adanya daftar isi maka si pengunjung bisa melihat2 daftar isi blog anda yang ingin di baca oleh pengunjung. Maka dari itu kali ini saya akan membagikan cara membuat Daftar isi versi versi editan dari abu farhan, tentunya yang lebih bagus dan cukup menarik. Dengan nama label yang di jadikan sebagai tombol untuk buka dan tutup, bisa di edit warnanya, dan tampilan yang cukup pantas. Kamu bisa melihat contoh daftar isinya di akhir postingan ini. Ingin tahu cara membuat daftar isi seperti di bawah, ikuti langkah-langkahnya sperti berikut:
- Yang pertama kamu login di halaman blog kamu, Kemudian muncul Gambar Seperti Ini
- Kemudian kamu klik Edit Entri pada blog kamu, Kemudian muncul Gambar Seperti Ini
- Setelah itu pilih Edit Laman, Kemudian muncul Gambar Seperti Ini
- Setelah itu klik Laman Baru, Kemudian muncul Gambar Seperti Ini
- Dan tinggal salin script di bawah ini, Tapi memasukanya jangan di Compose, di Edit Html, Seperti Gambar Ini
<base target="_blank"></base>
<style type="text/css">
.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;
}
.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #33ff33;
background: -webkit-gradient(linear, left top, left bottom, from(#33dd00), to(#33cc00));
background: -moz-linear-gradient(top, #33dd00, #33cc00);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33dd00', endColorstr='#33cc00');
}
</style>
<script src="http://linkrf.googlecode.com/files/DaftarIs2.2UM.js">
</script>
<script src="http://fakriy.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://linkrf.googlecode.com/files/Acc-PackUM.js" type="text/javascript">
</script>
Setelah memasukan scrip di atas ke page / halaman yang akan kamu jadikan daftar isi, kamu klik Terbitkan Entri. Dan lihat hasilnya..!
Keterangan:
Tulisan http://fakriy.blogspot.com/ kamu ganti dengan alamat blog kamu, dan tulisan yang berwarna biru di atas adalah warna2 untuk daftar isinya, bisa kamu ganti dengan warna2nya jika kamu mau agar sesuai dengan tema blog kamu, yang tentunya jika kamu bisa / ingin.
Semoga bermanfaat.....
Lihat Contoh Daftar Isinya Sepperti Di Bawah Ini: