Home  ·  About  ·  Privacy  ·  Contact  ·  Cbox

Cara Membuat Daftar Isi dengan Jquery di Blog


Daftar isi pada blog sangat penting sekali karena dapat memudahkan pengunjung untuk mengetahui atau mencari artikel keseluruhan pada sebuah blog. Pada kesempatan ini kita akan membahas cara membuat daftar isi dengan efek Jquery di blog.

Kelebihan daftar isi dengan Jquery ini adalah pada tampilannya yang cukup menarik. Jika Anda ingin memasangnya di blog ikuti dan simak langkah-langkahnya berikut ini :

1. Login akun blogger Anda.
2. Pilih Template > Edit HTML > centang 'Expand Template Widget'.
3. Letakkan kode berikut diatas 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);
}
4. Kemudian letakkan juga kode berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
5. Setelah itu Simpan template.
6. Langkah selanjutnya adalah memasang daftar isi di blog, letakkan kode dibawah ini pada HTML/JavaScript atau posting blog Anda pada mode HTML.
<script type="text/javascript" src="http://id-pemula-javascript.googlecode.com/files/Dafsis.js"></script> <script src="http://id-pemula.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
Keterangan:
Ganti kode yang berwarna merah diatas dengan alamat URL blog Anda.

Nah, sekarang blog Anda sudah terpasang daftar isi dengan efek Jquery yang menarik.

17 komentar:

  1. keren sobat tutorialnya dengan gaya accordion biru top abis sob, nice artikel

    ReplyDelete
  2. wah fantastis sob, luar biasa hasilnya..

    ReplyDelete
  3. Replies
    1. Kami rasa tdk, tp koneksi internet jg berpengaruh :)

      Delete
  4. wah keren..
    templatenya juga bagus. bisa di share ?? boleh minta ?? hehe

    ReplyDelete
    Replies
    1. source zoomtemplate & btemplates.com :)

      Delete
  5. Semakin blog interaktive, maka semakin banyak juga pengunjung karena senang berkunjung ke blog yang user friendly :). thx share

    ReplyDelete
  6. saya pernah pake ini, tp bog saya jd berat sob, hehe :D but nice share...

    http://kabartechnology.blogspot.com/

    ReplyDelete
  7. wah tampilannya lebih cakep dariapda punya ane, nuhun mas bro

    ReplyDelete
  8. Wah keren sob tutorialnya...makasih sob

    ReplyDelete
  9. yap, dengan daftar isi maka pengunjung akan lebih mudah untuk menemukan artikel yang diinginkan, jadi ga perlu repot untuk klik next page. Thanks 4 sharing sob

    ReplyDelete
  10. Lha kalo di pasang di postingan kayak blognya situ gimana gan?

    kajianummat.blogspot.com

    ReplyDelete
    Replies
    1. letakkan kode langkah no.6 pada posting/entri baru dengan mode HTML.

      Delete
  11. Thank You Gan !!

    Jangan segan-segan untuk mengunjungi blog saya ya :
    http://www.dickydharmawan21.blogspot.com/

    ReplyDelete

 
Copyright © . Info Blog Indonesia · Powered by Blogger