Membuat Daftar Isi dengan jQuery

Membuat Daftar Isi dengan jQuery. Cara membuat daftar isi,Membuat daftar isi blog,Daftar isi blogger,Membuat daftar isi dengan script,Cara membuat daftar isi otomatis,Membuat daftar isi dengan jquery, daftar isi accordion, Membuat daftar isi blogspot.| Cara membuat daftar isi dengan jquery yang satu ini ternyata banyak disukai oleh para blogger.karena dengan daftar isi ini sangat keren dan cantik untuk dilihat juga. disamping itu tampilan ini lebih disukai daripada daftar isi dengan fungsi scroll lihat gambar tampilan daftar isi dibawah ini

daftar isi keren

Jangan cuma dilihat, mau tau caranya?? baiklah saya akan share cara Membuat Daftar Isi dengan jQuery.

– login ke akun blogger
– Pilih rancangan –> Edit HTML
– Lalu copy kode di bawah 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:#ffffff;
}
.dafis-label {
background: url(“http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif&#8221;) repeat-x scroll 0 0 #E1F4FB;
border: 1px solid #2F94BA;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
line-height: 1.4em;
margin: 1px 3px;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
vertical-align: baseline;
white-space: nowrap;
}
.dafis-label:hover {
background: url(“http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif&#8221;) 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;
border: 1px solid #339DC6;
line-height: 1.5em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
background: none repeat scroll 0 0 #7BC4DF;
border-left: 5px solid #333333;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}


– Lalu copy kode di bawah dan letakkan di atas kode </head>

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&#8217; type=’text/javascript’/>


– Nah, lalu copy paste kode berikut ke dalam postingan dengan mengklik Edit  html di samping compose

<style type=’text/css’>
#dafis-acc{ font-family:”Trebuchet MS”, Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/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(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/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&#8217; type=’text/javascript’></script>
<script type=”text/javascript” src=”http://infonetmu.googlecode.com/files/Acc1.js”></script&gt;
<script src=”http://kowandy.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc”></script>


– Lalu Terbitkan.
keterangan :
kode berwarna merah ganti dengan alamat blog anda.
 semoga cara Membuat Daftar Isi dengan jQuery bermanfaat buat anda.
Advertisements

About Legy Masyhury

Hanya manusia biasa, sungguh! :D http://legianto.com http://desainku.net http://masyhury.web.id http://ideku.info
This entry was posted in Tutorial Blog. Bookmark the permalink.

4 Responses to Membuat Daftar Isi dengan jQuery

  1. thanks gan dah share, salam kenal

  2. sy@ms says:

    Salam kenal sob, trims infonya sangat bermanfaat nih.

  3. anak-jelex says:

    wahh….. mantaph sob. thn'x yach buat tutorial nya.. membantu banget,, kunjungan hangat, kunjung balik yach. jangan lupa follow nya.. 😀

  4. Ramzi says:

    Daftar isi yang seperti gambar diatas sangat menarik sobterima kasih

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s