Cara Buat Daftar isi dan Accordion untuk Blogger

Biasanya kita memiliki begitu banyak posting di blog kita dan jika kita menggunakan TOC (Table Of Content) itu akan sangat panjang. Jika kita memiliki TOC(daftar isi) sangat panjang, itu membuat pengunjung sulit untuk membaca posting kita. Maka dari itu kemarin saya coba jalan-jalan di dunia maya dan akhirnya saya menemukan TOC dengan modifikasi terbaru menggunakan Efek Accordion.

Fitur dari script ini:

1. Accordion effect Efek Accordion
2. Show and hide effect Menampilkan dan menyembunyikan efek
3. CSS 3 CSS 3
4. Automatic add jquery Otomatis tambahkan jquery
5. Different color for content Warna yang berbeda untuk konten
6. Different style for open and close Gaya yang berbeda untuk membuka dan menutup
7. Auto Sort the title Auto Urutkan judul
8. Add New!! Tambahkan Baru! for 10 newest entry selama 10 entry terbaru

Cara menggunakan sangat mudah.

1. Go To Blogger > Design > Edit HTML
2. Back up your template
3. Search for ]]></b:skin>
4. Dan tepat di atasnya paste kode CSS di bawah ini,

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

    5. Save your template and now create a New Page (not a new Post).

Kemudian berikan Halaman baru Anda judul yang relevan seperti "Tabel Isi XYZ" dan kemudian dalam modus HTML editor blogger EDIT LAMAN Anda paste kode di bawah ini,

Masukkan script berikut dalam mode Html.

<center><div style="border: 2px solid rgb(255, 0, 0); height: 500px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 90%;"><link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link> <script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script> <script src="http://www.mahastranet.tk/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script><br /> <script type="text/javascript"> var accToc=true; </script><script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script> </div></center>  

Ganti www.mahastranet.tk dengan nama blog kamu

DEMO

Gambar Berikut adalah cara membuat halaman di blogger.

 

If you want to change the colour of the Active mode then simple change #9dc2e7 and #438cd2 . Here #9dc2e7   refers to a lighter shade and #438cd2 refers to a darker shade colour. So whatever colour you wish to use simply replace #438cd2 with your prefered colour and #9dc2e7  with the lighter shade of your prefered colour.
You will find our Colour Generator Tool useful in deciding a colour selection.

That’s it. Good Luck...

Sumber : abu-farhan & MBT

Ditulis Oleh : Unknown ~ Belajar Komputer dan Internet

Artikel Cara Buat Daftar isi dan Accordion untuk Blogger ini diposting oleh Unknown pada hari Senin, 13 Juni 2011. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran anda adalah pelajaran yang sangat berharga bagi saya.

:: Kirim Artikel ini ke Lintas Berita ! ::