Membuat Daftar Isi Dengan jQuery

Membuat Daftar Isi Dengan jQuery

Pasti sobat blogger sudah tau tentang JQuery, jika belum tau cari di google, karena google adalah search engine terkaya, terpopuler, terfavorite, terlaris di kalangan pengguna internet. Oke lanjut ke pembahasan kali ini, yaitu Membuat Daftar Isi Dengan jQuery. Dengan tutorial ini semoga bermanfaat bagi sobat blogger dan menyukai tutorial ini. Turuti langkah-langkah berikut.

1. Buka akun blogger sobat dengan Gmail / Email dan Password sobat.
2. Masuk ke pembuatan posting baru atau dengan meng-klik tombol New Post.
3. Setelah itu lihat di bagian atas dan cari tab HTML.
4. Copy script di bawah ini dan masukka ke dalam kolom yang disediakan di tab HTML.

<style type='text/css'>
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/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(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/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); }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
<script src="http://blog-eksperiment.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

5. Ganti tulisan berwarna Merah dengan link blog sobat.
6. Kemudian klik Publikasikan dan lihat pada postingan sobat.
7. Selamat mencoba dan semoga berhasil. Semoga artikel ini bermanfaat bagi sobat blogger.

Preview

Script / Code Source : INFONETMU