Cara Membuat Daftar isi Menarik dengan JQuery

Cara Membuat Daftar isi Menarik dengan JQuery

Daftar isi akan semakin menarik hasilnya jika dibuat dengan komponen JQuery, untuk melihat hjasilnya bisa dilihat DISINI.
Simak Langkah bagaimana Cara Membuat Daftar Isi Menarik dari JQuery:

1. Masuk ke akun Blog kita

2. Pilih menu "Template", beri centang pada "Expand Template Widget"

3. Cari kode ]]></b:skin>
(agar lebih mudah dalam mencari, gunakan tombol Ctrl+F)

4. Copy kode berikut ini dan letakkan di atas kode ]]></b:skin>.

#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); }

5. Cari kode </head>

6. Copy kode berikut ini dan letakkan di atas kode </head>.

<script src='http://coretan-ringanku.googlecode.com/files/daftar-isi-jquery.js' type='text/javascript'/>

7. Klik "Simpan Template" dan Tutup halaman edit template tersebut.

8. Masuk ke menu "Laman"

9. Klik menu "Laman Baru", pilih yang "Laman Kosong"

9. Copy dan Paste kan kode di bawah ini pada bagian mode HTML
 .

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

10. beri judul postingan sesuai keinginan dan Publikasikanlah . Lalu klik Lihat.

KETERANGAN :
Ganti teks https://blogringan.blogspot.com/ dengan alamat blog Anda.

Sekian coretan tentang bagaimana Cara Membuat Daftar Isi Menarik dari JQuery.
Jangan Lupa tinggalkan komentar...