Thursday, January 3, 2013

Membuat daftar isi blog paling menarik berdasarkan label

Membuat daftar isi blog paling menarik berdasarkan label blogger

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.

Artikel Terkait

Membuat daftar isi blog paling menarik berdasarkan label
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email