Cara Baru Membuat Daftar Isi Keren Dengan Jquery Accordion Di Blog

 Posting merupakan salah satu rutinitas saya di kala mengisi waktu yang luang, bukan hanya sekedar kegiatan yang membosankan tetapi suatu cara saya berbagi sedikit ilmu yang saya ketahui kepada anda pengunjung setia site ini. Terlebih lagi kepada kawan-kawan komunitas blogger. Kali ini saya akan membahas tentang bagaimana "Cara Baru Membuat Daftar Isi Keren Dengan Jquery Accordion Di Blog". Ayo kawan langsung kita bahas. Follow me yeah....!!!


Silakan click di sini :

• Demo

TAHAP PERTAMA :

• Login ke akun blog anda.
• Pada dasbor pilih Rancangan => Edit HTML
• Copy paste CSS berikut tepat di atas code ]]></b:skin>
• Click Ctrl + F untuk membantu pencarian anda.

.judul-label{background:-moz-linear-gradient(top,  #393E41,  #000000);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:#000 url("http://2.bp.blogspot.com/-6OcDgB9yXXI/TVfIh9HaUYI/AAAAAAAABUk/PUZFTYOTg-8/s1600/1m3.gif") no-repeat}.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:kristen itc;font-size:12px;}.list-ganjil{background-color:#000;color:#51A104;border-top:1px solid #FF0000;border-bottom:1px solid #FF0000}.headactive{color: #FFFFFF;border: 2px solid:#C0C0C0;!important;background: #D11717;background: -moz-linear-gradient(top,  #D11717,  #8C0000)}

• Silakan click save untuk menyimpannya.

TAHAP KEDUA :

• Setelah template disimpan anda langsung ke tab posting  dan pilih Entri Baru.
• Isilah judul Entrinya atau judul postingnya dengan judul daftar isi atau bisa juga sesuai keinginan anda.
• Setelah itu masukan code berikut pada Tab HTML Postingan.

<script src="http://muhammadsuteja.googlecode.com/files/by1.js">
</script>
<script src="http://verarfujastawan.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://muhammadsuteja.googlecode.com/files/by.js" type="text/javascript">
</script>

• Terakhir tinggal mengubah url yang berwarna merah dengan url blog anda.
• Terbitkan entrinya dan lihat hasilnya

Note :

1. Kritik dan saran yang membagun dari anda sangat diharapkan author dari pengunjung.
2. Follow me at my blog. And remember my site!!!