Cara Membuat Daftar Isi Blog

Minggu, 29 September 2013

Cara Membuat Daftar Isi Blog

Daftar isi Merupakan salah satu fitur tambahan yang kita pasang di blog bertujuan untuk memudahkan pengunjung blog dalam mencari Artikel-artikel yang ada di blog kita. Selain itu, Daftar isi juga merupakan Penilaian tersendiri dari pengunjung blog terhadap pengaturan tata-letak artikel pada blog tersebut.
Sebelumnya saya sudah Pernah share cara membuat Daftar isi Otomatis Yang tampilannya sangat simple.
Daftar isi yang kali ini berbeda dengan daftar isi pada umumnya, kali ini saya akan share cara membuat daftar isi blog dengan JQuery, oke langsung saja :

1.Login Ke Akun Blog Sobat
2.Masuk Ke Template
3.Pilih Edit Html
4.Klik Lanjutkan
5.Centang Expandt Widget Templates
6.Cari Kode ]]></b:skin> , & letakkan kode berikut tepat diatas kode yang telah di cari :

/* Daftar Isi With JQuery */ #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/AVvXsEj1db6HoJsIIukxRG-xzKIPqbSw7CeRR5DrN7r3PxIxRCqbSTlK1SOHjpfJOcjio33oUhcKBe3h7OnQGbtHV8iCk-6uvdhlnQhKyy9wibfHBosHcXTOTeWA-F-PVN7F13K7qQaDmVN8rUo/s320/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/AVvXsEgbXssmaGGgj-E91gxbjOu2ShYUlWvoDV2QTbGIfKoe6db9oJTV4RnchIVrXmzusSak8iYhvTii6Ht9D034UIqnVT7XdJIgjeCIA7qtsV4AoBI8l_JgOPmJn3zWrdUvCRHqFlO4St408EI/s1600/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/AVvXsEjBBQfUltCWPayIdZpEni5kphQE2N4WUVv-eKc8h7CunijF8xSzdmdW3DwrvMYAKa43Y1eWvKHdwdGt3rju4EW3m_75tZGLqW4RmX4VXISwE5PjiagDi5PyHWRDluLnYU8S4OsmvhnM7T8/s320/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); }

7.Kemudian Cari kode </head> dan letakkan kode berikut tepat di atas kode yg di cari :

<script src='http://dapurtutorial8.googlecode.com/files/Shttp://agungtalaga.blogspot.com/2012/05/cara-membuat-daftar-isi-blog-dengan.htmlcriptdaftarisi1.js' type='text/javascript'/>

8.Kemudian Save Template
9.Selanjutnya sobat masuk Ke TataLetak => Tambah Gadget => Html/JavaScript
10.Copy-Pastekan Kode Berikut :

<script type="text/javascript" src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script> <script src="http://coppaspedia.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

11.Save Gadget
12.Jika Sobat ingin Membuat Daftar Isi Dengan Scrool, Silahkan Coppas Script Berikut :

<div style="overflow:auto;width:350px;height:150px;padding:
10px;border:1px solid #C33F00">
<script type="text/javascript" 
src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt">
</script>
 <script src="http://coppaspedia.blogspot.com/feeds/posts/summary?
max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>