Cara Membuat Daftar isi Menarik dengan JQuery

Posted by

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...


FOLLOW and JOIN to Get Update!

Social Media Widget SM Widgets




Demo Blog NJW V2 Updated at: 1:21 AM

2 comments:

  1. terima kasih gan,, itu mempengarui loading blog apa tidak gan ?

    ReplyDelete
    Replies
    1. namanya juga javascript gan, pasti lah kalo nambah berat loading blog, apalagi kudu manggil hosting scriptnya dulu, yang pasti pinter2 meminimalisir ukuran blog, biar loadingnya nggak berat2 banget, meskipun banyak javascript :)

      Delete

Berkomentar lah dengan sopan, tidak menyinggung unsur SARA, Silahkan jika mau mencantumkan Link dan mohon untuk tidak mencantumkan Link yang mengarah ke website dengan konten dewasa.
Terima kasih sudah berkomentar.