Cara Membuat Daftar Isi Accordion di Blog

     Cara Membuat Daftar Isi Accordion di Blog - Hai semua AiRa LoKa best friend... kali ini saya mau bagi-bagi tutorial tentang Cara Membuat Daftar Isi Accordion di Blog.

     Daftar isi sangat penting bagi keberadaaan sebuah blog atau web. Karena daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog. Selain itu daftar isi ini juga menggunakan efek animasi accordion, hal ini dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang sekaligus mudah dan rapi untuk blog serta artikel yang disusun berdasarkan Label/Kategori. Sehingga serasa seperti blog anda seperti blog profesional. Nah, bagi yang mau coba, Langsung saja..

Check It Out......

1.  Masuk ke Blogger > Dashboard Blogger > Template > Edit HTML. Cari kode ]]></b:skin>.

2.  Pastekan Script dibawah ini diatas kode ]]></b:skin>.

#dafis-acc{

 font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw1oE8OWPFvIaKokcCxoKrqmiOAF-w71ITJBB8XV6yzTwRBY91cg2YnV59NN9cKoEBDD47SB8rRIjekvl-C6Xu2bzd41WC5EmucetEZAuWgzhyphenhyphenojoMYIGixg4M6yxt8FOsfk62zYLQTjQ/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6;

}

.dafis-label{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqx9VtEbQp1KjopcNyeBnkAPbRJdyEwEyD5TBKR6y0TwtoZ5OCc4nof4nxxaZKLoksiAvJXcYijcudKKgetVSMOgY2EVESiGd0_H7DbDxTKyVtkqVTgh9K-tAmfzzuwJUoIIfAkJ4coww/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA;

}

.dafis-label:hover{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVn4TJt2LUToP78PYvGPRleZFvNq6Fmx76RdtxIH270kCu7vFo4lvdgIMztAgZAKld8SELg8QJ4JmJEsgo5QnHMFi6mwFa1epaJvs8mIrKQ_gCzcCGd1bYljV3bY40rp8H-nL7MLT1Fyk/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366;

}

.dafis-daf ol{

margin:0 0 0 30px !important; padding:0 !important;

}

.dafis-daf ol li{

background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6;

}

.dafis-daf ol li a{

text-decoration: none !important; color:#333 !important; display:block; padding-left:10px;

}

.dafis-daf ol li a:hover{

background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3);

}

3. Cari kode </head>. Pastekan script jquery ini diatas kode </head>.
Nb: jika blog anda sudah terpasang jquery, lewati saja langkah ini.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>

4.  Simpan template.

5.  Buat sebuah laman baru. buka tab HTML (bukan compose) lalu pastekan script dibawah ini.

<script type="text/javascript" src="https://sites.google.com/site/airalokablogspotcom/download/daftar%20isi%202.js"></script><script span style="990000" src="http://airaloka.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

6.  Ganti kode yang berwarna biru dengan url blog anda.

7.  Publikasikan.