Membuat Daftar Isi Perlabel Dengan Efek Accordions

Sebetulnya ini bukan daftar isi, karena saya menempatkanya pada sidebar
Tepatnya sayatempatkan sebagai Label Blog
Hanya saja isi dari tiap label memang saya ambil dari script daftar isi biasa.

Untuk tampilan, memang tidak cantik, apalagi keren.
Bahkan bisa di bilang sangat biasa biasa saja.
Jadi bila anda penyuka tampilan blog yang cantik,
Maka abaikan saja tutorial ini.

Namun bila tujuan anda ingin memanjakan pengunjung agar lebih mudah menemukan konten blog
Saya rasa widget ini sangat cocok.
Selain itu widget ini juga tidak terlalu membuat loading blog menjadi berat

Tampilanya seperti pada gambar dibawah ini,
Namun anda juga masih bisa memodifikasi sesuai dengan selera anda.
Sedangkan untuk blog saya, cocoknya ya seperti ini :

Bagaimana, sangat sederhana bukan.?
Untuk mencoba demonya anda tidak perlu susah payah,
Karena saya memakainya pada sidebar blog ini. jadi anda bisa mencobanya langsung

Bila anda ingin mencoba memasang label butut ini di blog anda,
Silahkan Copas script dibawah ini :

<style type="text/css">#accordion{width:100%;margin:auto;border:0 solid white}#accordion h2{padding:5px 10px;background-color:transparant;background-image:url(http://1.bp.blogspot.com/-qtI_UsPdZwc/Tmzg5K8eADI/AAAAAAAABrU/ScrT9X8fBBY/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#000;font:normal 11px Verdana;border-bottom:0 solid #002b66;cursor:pointer}#accordion .content{font:normal 11px Verdana;padding:5px 10px;background:#eee}#accordion .content ul{list-style:none;margin:0;padding:0}#accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;margin:0;padding:2px 0 3px 0;text-indent:0;border-bottom:1px dotted #ccc;line-height:1.3em}#accordion .content li a:hover{text-decoration:none;color:#000}#accordion h2.active{background-color:transparant;background-image:url(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:bold}</style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/javascript'>$(function(){$("#accordion .content").hide();$("#accordion h2:first").addClass("active").next().slideDown("slow");$("#accordion h2").click(function(){if($(this).next().is(":hidden")){$("#accordion h2").removeClass("active").next().slideUp("slow");$(this).toggleClass("active").next().slideDown("slow")}})});</script>
<div id="accordion">
<h2>Judul Label</h2>
<div class="content">
<script src='https://jonarendra.googlecode.com/files/Label-Jona.js'/></script>
<script src="http://taohidsonline.com/feeds/posts/summary/-/Label Anda?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
</div>
<div id="accordion">
<h2>Judul Label</h2>
<div class="content">
<script src="http://taohidsonline.com/feeds/posts/summary/-/Label Anda?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
</div>
<div id="accordion">
<h2>Judul Label</h2>
<div class="content">
<script src="http://taohidsonline.com/feeds/posts/summary/-/Label Anda?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
</div>
<div id="accordion">
<h2>Judul Label</h2>
<div class="content">
<script src="http://taohidsonline.com/feeds/posts/summary/-/Label Anda?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
</div>
<div id="accordion">
<h2>Judul Label</h2>
<div class="content">
<script src="http://taohidsonline.com/feeds/posts/summary/-/Label Anda?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
</div>
<div id="accordion">
<h2>Judul Label</h2>
<div class="content">
<script src="http://taohidsonline.com/feeds/posts/summary/-/Label Anda?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
</div>
<div id="accordion">
<h2>Judul Label</h2>
<div class="content">
<script src="http://taohidsonline.com/feeds/posts/summary/-/Label Anda?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
</div>
<div id="accordion">
<h2>Judul Label</h2>
<div class="content">
<script src="http://taohidsonline.com/feeds/posts/summary/-/Label Anda?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
</div>
</div></div></div></div></div></div></div></div>

Ket :
Untuk kode berwarna Biru, silahkan ganti dengan url blog anda
Untuk kode berwarna Merah, silahkan ganti dengan Label blog anda
Untuk angka yang diberi warna magenta, ituadalah jumlah entriyang ditampilkan.

Sedang untuk cara pasangnya
Silahkan anda klik menu TATA LETAK, lalu tambah gadget,pilih HTML/JAVA SCRIPT
Tempelkan kode diatas, lalu simpan.

Selamat mencoba

Share :