Iklan 300 x 250

Random Post

Recent Post

 

Membuat Daftar Isi Blog Dengan Efek jQuery Accordion

Text Resizer: Click for Resizer
Daftar isi sangat dibutuhkan karena dengan daftar isi dapat membuat pencarian lebih mudah dan efisien selain itu dengan adanya daftar isi juga dapat membuat blog kita semakin profesional. Selain itu Dipilihnya efek animasi accordion pada daftar isi dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang sekaligus mudah dan rapi untuk blog serta artikel yang di susun berdasarkan Label/Kategori. Sehingga serasa seperti blog anda seperti blog profesional. Ok untuk Membuat Daftar Isi Blog Dengan Efek jQuery Accordion ikuti saja langkah-langkah berikut ini...



1.Log in dulu ke account blog anda
2.Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.
3.Setelah itu cari kode berikut ini ]]></b:skin>
4.Kemudian copas kode dibawah ini dan taruh diatasnya.
#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);
}
5.Selenjutnya cari kode </head>, lalu letakkan kode dibawah ini diatas kode </head>.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
Keterangan : Jika sebelumnya sobat telah memasang scipt jQuery maka cara ini lewati saja langkah diatas

6.Kemudian Klik Simpan Template.

Langkah Selanjutnya
1.Buatlah sebuah posting blog dengan judul terserah Misal : Daftar Isi Blog Lengkap Atau Table Of Content.
2.Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.
<script type="text/javascript" src="http://nobinoku.googlecode.com/files/dafis_acc.js"></script>
<script src="http://namablogsobat.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
Ubah namablogsobat dengan nama blog anda

3.Selanjutnya Klik Terbitkan.

Alhamdullilah Selesai juga ...... Dengan ini blog anda mempunyai daftar isi atau table of content, semoga dengan adanya daftar isi atau table of content dapat membuat pengunjung blog betah berkunjung ke blog sobat.


Artikel Terkait:

Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Membuat Daftar Isi Blog Dengan Efek jQuery Accordion
Dalam Kategori :
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

13 komentar:

makasih dah brkunjung di blogkkuw....... vhin dah follow, bannerx jga dah mau di pasang.... follback yach

Unknown mengatakan... Reply Comment

wah . , keren sob !!! :x:

dari gambarnya saya lihat jadi lebih stylish . ,

eh iya ada contohnya ngga ??

btw thanks infonya !! :j:

sibutiz mengatakan... Reply Comment

OK gan,saya coba ya....!!
oya,agan sendiri sudah di pasang begini ya daftar isinya...???
makasih..

@Ladida


owh untuk contohnya seperti gambar sob ntar aja aku buatkan demonya

lintas mengatakan... Reply Comment

wah..bis dicoba nih..sekalian ganti daftar isi yg lama

wow.. Aku pernah lihat seperti itu di blog lain, ternyata mudah juga ya bikinnya.
Nanti deh kalo ol pake compie aku coba.. Hehe

Opinion mengatakan... Reply Comment

Hallo met siang...tukeran link yuk sobat...

Unknown mengatakan... Reply Comment

salam sahabat
bagus membuat daftar isi dengan efek jquery ini hasilnya lebih simple ya mas,oh dah saya follow maaf telat

YU^DY mengatakan... Reply Comment

aku malah belum punya daftar isi.. coba ah nanti

Teras Info mengatakan... Reply Comment

mantabs tutorialnya kawan....
terimakasih banyak, saya ijin simpan untuk dipelajari lagi...

@Teras Info

Monggo silahkan tuk dipelajari lagi :e:

Unknown mengatakan... Reply Comment

Alhamdulillah berhasil mas...Banyak ilmu di sini sejak tadi baca beberapa artikel tutorialnya dan beberapa diterapkan dan berhasil.
Termasuk membuat daftar isi ini mas.
Terima kasih...

Langsung di praktekkan dan alhamdulillah berhasil mas..

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Posting Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky