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.

18 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



  12. SELAMAT DATANG DI WEBSITE KAMI WWW(dot)MEDIAQQ(Dot)COM

    Semuanya hanya ada di MEDIAQQ

    Kami menyediakan 7 jenis permainan ni:
    1. PLAY AduQ
    2. BANDAR POKER
    3. PLAY BANDARQ
    4. CAPSA SUSUN
    5. PLAY DOMINO 99
    6. PLAY POKER
    7. SAKONG

    Untuk masalah deposite dan withdraw kami minimal 15.000 ribu saja.
    Dengan 15.000 ribu saja sudah bisa bermain 7 game tersebut
    dan mencoba hoki masing-masing lo.
    Dan kami akan memproses Deposite dan Withdraw
    cuma dengan waktu kurang dari 5 menit, bagaimana cepat kan bosku.

    MEDIAQQ juga menyediakan layanan live chat 24 jam nonstop.
    Jika bosku mengalami kesulitan dalam mendaftar atau kurang mengerti.
    Anda dapat menghubungi kami melalui livechat,BBM,SKYPE atau pun Facebook.
    Kami akan siap 24 jam bosku untuk melayani anda
    dan mengatasi semua keluhan anda.

    Kami juga mempunyai macem-macem bonus bosku:
    1. BONUS TURN OVER 0.3%
    2. BONUS REFFERAL 20%

    yuk buruan daftarkan diri anda ke website kami di www(Dot)MEDIAQQ(Dot)com


    ReplyDelete

 
Copyright © . Info Blog Indonesia · Powered by Blogger