flas script


Cara Membuat Daftar Isi Blog Dengan Menggunakan JQuery


Bagaimana Cara Membuat Daftar Isi Blog Dengan Menggunakan JQuery. 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.

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(http://1.bp.blogspot.com/-Q0gQpqnpwdw/TggUQZh1y3I/AAAAAAAAANg/-9rHKcaz5JU/s320/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://2.bp.blogspot.com/-SlHI9wfcEy0/TggUQSS6hBI/AAAAAAAAANY/osNWdKWUfZQ/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(http://3.bp.blogspot.com/-x7WFTrEvdnY/TggUQNCYIkI/AAAAAAAAANQ/i8ZH9H_K_bg/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://fungsi-media-internet.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;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://fungsi-media-internet.blogspot.com/feeds/posts/summary?
max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
13.Ganti Teks Yang Bewarna Merah Deng Url Blog Sobat.

Sampai di sini dulu, semoga bermanfaat...!!!

Tips Ngeblog :

Kembali ke Site Map / Daftar Isi di Blog Ini, Klik Di Sini !


3 komentar:

Wah wah harus dicoba ini gan agar sitemapnya keren, ijin coba tricknya

lumayan ribet juga tapi ga ada salahnya kalo coba - coba pasang

Diberdayakan oleh Blogger.
Twitter Delicious Facebook Digg Stumbleupon Favorites More