Membuat Daftar Isi Dengan jQuery Accordion

Membuat Daftar Isi Dengan jQuery Accordion -

Daftar isi pada blog sangatlah penting, selain dapat memudahkan pengunjung menjelajahi blog kita, juga dapat menambah cantik penampilan blog kita.

Selain itu daftar isi yang saya bahas disini juga menggunakan efek animasi accordion, hal ini dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang sekaligus mudah dan rapi untuk blog serta artikel yang disusun berdasarkan Label/Kategori. Sehingga serasa seperti blog anda seperti blog profesional. Untuk Contohnya bisa cobat liat di Daftar isi blog ini.

Baiklah, saya akan langsung saja pada langkah-langkah pembuatannya :

Langkah Pertama

Login dulu ke blogger anda
Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.
Setelah itu cari kode berikut ini ]]></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/AVvXsEhliA2_Q44DN7vX7BWNmUzvmPhehokIMPZQlHSwS9vfANatEiyafLq0qNi2ijOyQ03lswsivRowDgw9DDYMV4PokjKJ10qfH69dSJZlH2ZBm0ALVA7GWmV50GZRnc37PgeMKixBjheGu-0/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/AVvXsEg5dlZ_0Y1y9eXU9tHb_wKjidDGv8wtfSo898ZNu9DTKR5PhuvSHKopxtQ_1AhtK-xRfo_RVz_IUmNGdqWGok9NAfIn9WapdtHTwJEOGWQOn_hkym1wepPQHDn_6sZiWMlejL4xXRtJeRY/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/AVvXsEiuf4EIhkefuy4E-KHDgY8QzKqGJQHb__NZgNmf3M38_B_TeI5__K5Tt4fUejrz_iy4bzA76Q7GxgG49JMljG4ROEO1ed116bdOQK5cuvMYI_MpfdQBLI_K_lHg6inXlds-8OTP0DlczS4/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);
}
Kemudian copas kode diatas dan taruh diatas ]]></b:skin>
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'/>
Kemudian Klik Simpan Template.

Langkah Kedua
- Buatlah sebuah posting blog dengan judul terserah (Misalnya : Daftar Isi Blog Lengkap Atau Table Of Content )
- Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.
<script type="text/javascript" src="https://sites.google.com/site/bangkolis/javascript/daftarisimaskolis.js"></script>
<script src="<span style="color: #990000;">http://namablogsobat.blogspot.com/</span>feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
- Ubah namablogsobat dengan url blog anda
- Selanjutnya Klik Publish Post.
  
  Itulah tadi tutorial tentang cara Membuat Daftar Isi Dengan jQuery Accordion, jika ada di antara temen-temen yang bingung, isi saja kotak komentar yang ada di bawah. Karena komentar temen-temen semua sangat berarti bagi blog ini. Selamat mencoba dan semoga bermanfaat....

Ref: http://creatingwebsite-maskolis.blogspot.com/2012/03/membuat-related-post-thumbnail-dan.html

Terimakasih, Anda telah membaca artikel tentang Membuat Daftar Isi Dengan jQuery Accordion dan anda bisa menemukan artikel Membuat Daftar Isi Dengan jQuery Accordion ini dengan url https://mr-odingk.blogspot.com/2012/07/membuat-daftar-isi-dengan-jquery.html. Anda boleh menyebarluaskan atau mengcopy artikel Membuat Daftar Isi Dengan jQuery Accordion ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Blogger Kendari