» Cara membuat daftar isi dengan efek jquery tapi ringan (V3)

Cara membuat daftar isi dengan efek jquery tapi ringan (V3)

Oleh
03.03
wihh beberapa hari gak pernah update rasanya sesuatu deh gan gimana gitu dehh hehehe tapi emm kali ini saya akan berbagi tutorial untuk membuat daftar isi gan tapi keren lo gan emm insyallah deh ringan gan gak memberatkan laptop lo apalagi dompet hehehe langsung saja yuk gan 

1.Masuk ke dashboard blogger
2.Pilih post kemudian entri baru
3.pilih html
4.copy kode dibawah ini ya gan
<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJLPTkglOyzAMajGSdUSShe_Za7oD8tu9VRwxF6vBp5lf8rqsC_l_3c6SU-QH-fzfMN9Nfx5U1SmvinNWh3VvyKh0VLiVeNvdyiDdri03rKHGaOm64CthO8dSkSnLYUOX8r2QcwOe5dIk/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhukxHiIEg6cMXDBsEy41SQlS0eIGlFJgPRNJDKnvHj8loL7OsVAIcEvJ7rGwkH9G86NHSb5pZ7iiZvtUNSADzNLmy7v93HzMyy7lD98fvY5NjrMAHdrEGoj4mpghdY0YptwHTBnbBh_Rs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ZFPjm0iB58sm2uAUwDVKKEP7hjBszWE-mwkOAMrVTch04jrqNL1kVXOn0LudYeqmOVdl0pZSSItQuhJG9ZwIL3JYCb8pibvEoZz7NrfrEeyIlgSNHNVywB61On-rMsmX5Ypu9Pm477M/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 src="http://yourjavascript.com/81114714014/androidtopone.js" type="text/javascript"></script><script src="http://androidtopone.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
</div>

5.PUblikasikan dan lihat hasilnya 
catatan:
  • ubah yg berwarna merah dengan alamat blog anda
  • untuk mengubah warna background daftar isinya ubah kode #339DC6 dengan kode warna yang lain ya gan
  • DEMO
Back To Top