3 Tampilan Daftar Isi Dengan JQuery Accordion Keren

3 Tampilan Daftar Isi Dengan J-Query Accordion Keren - Membuat Daftar Isi pada Blog memang sangat perlu adanya. Kita sebagai blogger yang baik, tentunya harus dapat memberikan kemudahan kepada para pengunjung untuk menelusuri isi blog kita.

Daftar Isi atau Sitemap akan memberikan kemudahan kepada pengunjung dan juga Serach Engine untuk menelusuri blog kita dengan mudah. Jika blog kita telah dipandang baik oleh Search Engine maka secara otomatis,blog kita akan mendapatkan banyak sekali pengunjung yang dihasilkan oleh Search Engine untuk blog kita.

Dan tidak menutup kemungkinan bahwa blog kita akan cepat mendapatkan page rank yang tinggi

Jangan Lupa Baca Postingan Tentang :

1. Cara Melaporkan Konten Copas ke Google

Baiklah, kali ini saya akan memberikan beberapa pilihan Daftar Isi yang keren-keren buat blogkalian. Silah kan di Pilih sesuai dengan pilihan dan singkronisasi antara Style Daftar isi berikut dengan Style blog kalian

Memasang Daftar Isi di Sidebar

Masuk Blogger >> Tata Letak >> Tambah Gadgets >> HTML/JavaScricpt >> Pastekan kode pilihan kalian dibawah

Memasang Daftar Isi di Dalam Laman

Masuk Blogger >> Laman >> Laman Baru >> Laman Kosong >> HTML >> Pastekan Kode Script pilihan kalian dibawah ini

Daftar Isi Accordion V1

<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/AVvXsEhTT3Fo-Oa6MpsGbv7Xnm2nguxtt077OjLHIGrfcwclvqarofr_QSungwE4iWNlMKVcB76T2OVDGkQTm_BmxAnLFNjIJRUUQVIYkty0-Spa9m2187Y43TPF6tpxvF3MOGAoz-lQ1A_GFhI/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/AVvXsEgsY971l3Y6hy2aWczCkwgde-UBhXhAngOh-1su961IumrFjYBzie_xZEz2xn_caTGwdqAUX-Zw3wGQqlTYDdYWMuzl3G7AHvu3tFTIc2-w7CRz6OTaOnoQapH2vreyh3_m8Eb84Qrt3Y8/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/AVvXsEj2cGDLaNOgT4HQqE_FZKeAI6Xrv8uOh2FpeFFn8cPLGdmNwG0CTAG2Fsx7hAuuzzavrX81l8WH0wUm_UW7mvZUr1nR9EM7vGij0uGUoctSysw8oIjsMQytlqrqvV2r9D0kjqm7taWtlpA/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="https://sites.google.com/site/bloggerbondowosoblogspotcom/js/sitemap.js" type="text/javascript"></script><script src="http://maslukmanblog.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
</div>

Daftar Isi Accordion V2

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://maslukmanblog.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript"> var accToc=true; </script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

Daftar Isi Accordion V3

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.blogger.com/blogger.g?blogID=6984301103846628017" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><link href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" media="screen" rel="stylesheet" type="text/css"></link>

<script type="text/javascript">
var showNew    = true,
    accToc     = true,
    openNewTab = true,
    maxNew     = 10,
    baru       = "Baru Niee !",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>

<script src="http://my-project-daftari-isi.googlecode.com/files/daftar-halaman.js" type="text/javascript"></script>

<script src="http://maslukmanblog.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Wah gimana gan ? bagus-bagus kan ? silahkan pilih sesuai dengan tema blog kalian ..

mungkin hanya segitu saja yang dapat saya share buat kalian kali ini. Semoga tips diatas dapat membantu kalian untuk menemukan Daftar Isi sesuai dengan Blog kalian ya ...