Cara membuat daftar isi Jquerry dengan Mudah

Sebelumnya sudah pernah memberikan mengenai tutorial membuat daftar isi otomatis blogger. Sekarang saya menerangkan bagaimana membuat daftar isi jquerry seperti gambar dibawah ini :

Bagaimana ? Ingin mencobanya ?

Cara membuat daftar isi Jquerry dengan Mudah : 

• Pertama login ke blogger agan lalu pilih Tab Rancangan > Edit Html > Expand template widget
• Cari kode dibawah ini menggunakan Ctrl + F

]]></b:skin>

• Lalu letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

#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/AVvXsEhrbXPG-A5AGkWMC-X5AGRQl0kiplXGZfntjhyYNSIA9kWKOTwdbD0CyeJjY6kXnhj0a8_V7whujJYk9NwpYqOdYPMVzgNouUWrne_QOLBj3rdYheSRr8J24MIbZQIFanH1YTWI_6qFroM/s320/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/AVvXsEj6rxxaUpa-nFABzshMpbaHxvPrzUZzwbslaE8YLo_UMT7HLb64W67GvNpRmNpd8uvnH8TO98va30PGof-HcZQcrfeCHLYd3F2FN76qEAaWgnARkYhebgetvDW00DjtP5DMZ04Fkzkexdo/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdb-MHCOvhCuDV0aBEbuUj21L3r7VwEzafvBdOm4S7clepLNi0egW0laSNLOaXzA8gROUW-hxZnATLqfsfqt8pirlkrBYZELZ5KCi_FMstwZ-Fpu67GT9zZMujSMjfYHSabwm6r_KBZ1A/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);
}

• tahap berikutnya adalah Meletakkan kode dibawah ini diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

• Kemudian save templates

Cara terakhir yakni meletakkan daftar isi tadi sesuai keinginan agan. Caranya pada Rancangan > Edit Laman > Tambah Widget (bebas dimana saja yang kalian suka) > Javascript/Html > masukkan kode dibawah ini :

<script type="text/javascript" src="https://sites.google.com/site/areacyberblog/areacyber/querry.js"></script>
<script src="http://areacyber.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Tulisan berwarna biru gantilah dengan url blog/web kalian dan max results=1000 jumlah artikel/posting yang akan ditampilkan.

Selamat mencoba !!

You're reading an article about Cara membuat daftar isi Jquerry dengan Mudah and you can find this articles Cara membuat daftar isi Jquerry dengan Mudah with url http://areacyber.blogspot.com/2011/09/cara-membuat-daftar-isi-jquerry-dengan.html,you can redistribute it or copy and paste it if the article Cara membuat daftar isi Jquerry dengan Mudah very beneficial to your friends, but do not forget to put Cara membuat daftar isi Jquerry dengan Mudah a source link.