Membuat daftar isi blog paling menarik berdasarkan label

Tips blogger saat ini adalah bagaimana cara untuk membuta Daftar Isi blog secara lengkap dengan tampilan yang lebih menarik, pada akhirnya daftar isi ini akan berurut berdasarkan label label dari artikel tersebut.
Daftar isi pada blog sangat membantu pengunjung untuk menjelajahi lebih dalam lagi terhadap isi isi atau postingan dari blog kita, makanya ayo mulai sekarang pasang saja tips ini.
Daftar isi atau blog Index kali ini berbeda dari yang sebelumnya, dengan tampilan yang lebih menawan dan cantik untuk dipandang.
terlebih ini mnggunakan fungsi buka tutup dengan klik pada setiap labelnya.
untuk contoh silahkan klik demo berikut ini :
DEMO

Sudah jelas dengan penegertian dan maksudnya, sekarang tiba saatnya untuk penerapan di blog kita.
caranya pertama pastikan login ke akun blogger anda, bukan milik orang lain.

1. Go To Blogger > Design > Edit HTML
2. Back up your template
3. Cari kode ]]></b:skin> "agar mudah dengan CTRL + F"
4. Paste kan kode CSS dibawah ini tepat diatas kode no. 3

/*--------BBT 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');
}

Belum selesai, simpan dulu template bloggnya.
Sekarang ke pemasangan daftar isi blog nya, caranya :

1. Buat dahulu Page blogger (bukan New Posting tapi new Page) dengan Blank Page.
2. kemudian edit HTML

Beri nama Page dengan Daftar Isi / bisa terserah anda. dan masukan kode dibawah ini ke HTML tadi

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

Note: ganti url http://masihpopuler.blogspot.com dengan alamat blog kamu.
sekarang simpan dan publish.
selesai sudah dan coba dibuktikan hasilnya.

Anda baru saja membaca artikel yang berkategori Tips Blogging / Tips Populer / WIDGET dengan judul Membuat daftar isi blog paling menarik berdasarkan label . Anda bisa bookmark halaman ini dengan URL http://sisatruk.blogspot.com/2013/01/membuat-daftar-isi-blog-paling-menarik.html .

Artikel Terkait Tips Blogging , Tips Populer , WIDGET

Ditulis oleh: Pramudya Ksatria Budiman - Rating : 4.5