3 Style Daftar Isi Dengan Efek jQuery Accordion

Cara Membuat Sitemap atau Daftar Isi dengan Efek JQuery Accordion di Blog | Sitemap atau Daftar Isi merupakan Lokasi yang menempatkan Daftar URL semua Artikel yang ada di Blog kita dengan tujuan untuk memudahkan Pengunjung Menemukan/menjelajah Semua Artikel secara keseluruhan pada Blog kita, sehingga otomatis akan meningkatkan Pageviews Blog kita.

Adapun Fungsi Sitemap bagi SEO Secara Teknis adalah untuk menginformasikan url-url yang ada di blog kita agar lebih mudah di crawl dan dijelajahi oleh robot-robot mesin pencari (search engine) sehingga bisa lebih cepat terindeks, Sobat bisa menempatkan widget ini pada sidebar ataupun halaman posting, menurut saya lebih baik di tempatkan pada halaman posting bagi blog atau website yang mempunyai banyak artikel. Lanjut ke Langkah Pemasanganya, Berikut Tutorial Cara Membuat Daftar isi dengan efek jQuery Accordion.

* Pemasangan Pada Sidebar

Login ke Akun Blogger » Tata Letak » Tambah gadget » Tambah HTML/JavaScript »
(Letakkan Kode/Script daftar isi yang akan sobat pasang) » Kemudian Simpan.

* Pemasangan Pada halaman posting/halaman statis

1. » pasang di halaman posting :  Login akun Blogger » New Entri » pilih pada opsi HTML.

    » pasang di laman statis : Login akun Blogger » Laman » Laman baru » Laman kosong »
2. kemudian Letakkan kode nya pada Opsi HTML, perhatikan screenshot berikut : 

• Sitemap jQuery Accordion V1

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> <style type="text/css"> #daftar-isi { background-color:#FFF; border:2px solid #DDD; color:#fff; margin-bottom:10px; -webkit-box-shadow:0 1px 2px #000; -moz-box-shadow:0 1px 2px #000; box-shadow:0 1px 2px #000; overflow:hidden; } #daftar-isi .judul-label { overflow:hidden; cursor:pointer; text-decoration:none; font:Bold 14px/100% 'Segoe UI',Arial,Sans-serif; text-transform:uppercase; padding:7px 9px 9px; color:#FFF; text-shadow:0 1px 1px rgba(0, 0, 0, 0.3); border-top:1px solid #860000;border-bottom:1px solid #860000; background-color:#5F0707; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#860000', endColorstr='#5F0707'); background-image:-webkit-linear-gradient(top, #860000, #5F0707); background-image:-moz-linear-gradient(top, #860000, #5F0707); background-image:-o-linear-gradient(top, #860000, #5F0707); background-image:linear-gradient(top, #860000, #5F0707); } #daftar-isi .headactive { color:#FCE1C2; border-top:1px solid #AD3000;border-bottom:1px solid #860000; background-color:#AD3000; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#AD3000', endColorstr='#860000'); background-image:-webkit-linear-gradient(top, #AD3000, #860000); background-image:-moz-linear-gradient(top, #AD3000, #860000); background-image:-o-linear-gradient(top, #AD3000, #860000); background-image:linear-gradient(top, #AD3000, #860000); } #daftar-isi ol { background-color:#FFF; margin:0 0; padding:0 0; color:#000; list-style:none; } #daftar-isi li { line-height:normal; font:normal 13px/100% 'Segoe UI',Arial,Sans-serif; margin:0 0; padding:5px 5px 5px 15px; white-space:nowrap; text-align:left; border-top:1px solid #ddd;border-bottom:1px solid #ddd; } #daftar-isi li:first-child {border-top:none;} #daftar-isi a {color:#860000;} #daftar-isi a:hover {color:#AD3000;text-decoration:none;} #daftar-isi a:visited {color:#860000;} #daftar-isi strong { font-weight:bold; font-style:italic; color:red; } </style> <script type="text/javascript"> var showNew = true, accToc = true, openNewTab = true, maxNew = 10, baru = "Baru!", sDownSpeed = 600, sUpSpeed = 600; </script> <script type="text/javascript"> //<![CDATA[ var _0x509f=["\x74\x69\x74\x6C\x65\x61\x73\x63","","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x6C\x65\x6E\x67\x74\x68","\x24\x74","\x74\x69\x74\x6C\x65","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\x70\x75\x62\x6C\x69\x73\x68\x65\x64","\x6C\x69\x6E\x6B","\x72\x65\x6C","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x68\x72\x65\x66","\x65\x6E\x63\x6C\x6F\x73\x75\x72\x65","\x63\x61\x74\x65\x67\x6F\x72\x79","\x74\x65\x72\x6D","\x3B","\x6C\x61\x73\x74\x49\x6E\x64\x65\x78\x4F\x66","\x77\x72\x69\x74\x65","\x6F\x72\x64\x65\x72\x6C\x61\x62\x65\x6C","\x74\x69\x74\x6C\x65\x64\x65\x73\x63","\x64\x61\x74\x65\x6F\x6C\x64\x65\x73\x74","\x64\x61\x74\x65\x6E\x65\x77\x65\x73\x74","\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x64\x61\x66\x74\x61\x72\x2D\x69\x73\x69\x22\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x75\x62\x6C\x61\x62\x65\x6C\x22\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6A\x75\x64\x75\x6C\x2D\x6C\x61\x62\x65\x6C\x22\x3E","\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6A\x75\x64\x75\x6C\x2D\x6C\x69\x73\x74\x22\x3E\x3C\x6F\x6C\x3E","\x6F\x64\x64","\x3C\x6C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x64\x61\x74\x61\x2D\x6C\x69\x73\x74\x20\x6C\x69\x73\x74\x2D\x67\x61\x6E\x6A\x69\x6C\x22\x3E","\x65\x76\x65\x6E","\x3C\x6C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x64\x61\x74\x61\x2D\x6C\x69\x73\x74\x20\x6C\x69\x73\x74\x2D\x67\x65\x6E\x61\x70\x22\x3E","\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x3E","\x3C\x2F\x61\x3E","\x22\x3E","\x20\x2D\x20\x3C\x73\x74\x72\x6F\x6E\x67\x3E","\x3C\x2F\x73\x74\x72\x6F\x6E\x67\x3E","\x3C\x2F\x6C\x69\x3E","\x3C\x2F\x6F\x6C\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x2F\x64\x69\x76\x3E\x3C\x64\x69\x76\x20\x73\x74\x79\x6C\x65\x3D\x22\x74\x65\x78\x74\x2D\x61\x6C\x69\x67\x6E\x3A\x72\x69\x67\x68\x74\x3B\x6D\x61\x72\x67\x69\x6E\x2D\x72\x69\x67\x68\x74\x3A\x37\x70\x78\x3B\x22\x3E\x3C\x61\x20\x74\x69\x74\x6C\x65\x3D\x22\x54\x61\x75\x66\x69\x6B\x20\x4E\x75\x72\x72\x6F\x68\x6D\x61\x6E\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x66\x6F\x6E\x74\x3A\x62\x6F\x6C\x64\x20\x38\x70\x78\x20\x41\x72\x69\x61\x6C\x2C\x53\x61\x6E\x73\x2D\x53\x65\x72\x69\x66\x3B\x63\x6F\x6C\x6F\x72\x3A\x23\x36\x36\x36\x20\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x74\x65\x78\x74\x2D\x73\x68\x61\x64\x6F\x77\x3A\x30\x70\x78\x20\x31\x70\x78\x20\x30\x70\x78\x20\x72\x67\x62\x61\x28\x32\x35\x35\x2C\x32\x35\x35\x2C\x32\x35\x35\x2C\x30\x2E\x31\x29\x3B\x6F\x70\x61\x63\x69\x74\x79\x3A\x31\x20\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79\x3A\x76\x69\x73\x69\x62\x6C\x65\x20\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x64\x69\x73\x70\x6C\x61\x79\x3A\x62\x6C\x6F\x63\x6B\x20\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x22\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x68\x6F\x6D\x70\x69\x6D\x70\x61\x61\x6C\x61\x69\x68\x75\x6D\x67\x61\x6D\x62\x72\x65\x6E\x67\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x32\x30\x31\x32\x2F\x30\x32\x2F\x77\x69\x64\x67\x65\x74\x2D\x64\x61\x66\x74\x61\x72\x2D\x69\x73\x69\x2D\x61\x6B\x6F\x72\x64\x69\x6F\x6E\x2D\x64\x65\x6E\x67\x61\x6E\x2E\x68\x74\x6D\x6C\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x3E\x26\x23\x39\x36\x35\x38\x3B\x20\x41\x63\x63\x6F\x72\x64\x69\x6F\x6E\x20\x54\x4F\x43\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x73\x6C\x69\x64\x65\x55\x70","\x23\x64\x61\x66\x74\x61\x72\x2D\x69\x73\x69\x20\x2E\x6A\x75\x64\x75\x6C\x2D\x6C\x69\x73\x74","\x73\x6C\x69\x64\x65\x44\x6F\x77\x6E","\x6E\x65\x78\x74","\x68\x65\x61\x64\x61\x63\x74\x69\x76\x65","\x61\x64\x64\x43\x6C\x61\x73\x73","\x23\x64\x61\x66\x74\x61\x72\x2D\x69\x73\x69\x20\x2E\x6A\x75\x64\x75\x6C\x2D\x6C\x61\x62\x65\x6C\x3A\x66\x69\x72\x73\x74","\x63\x75\x72\x73\x6F\x72","\x70\x6F\x69\x6E\x74\x65\x72","\x63\x73\x73","\x23\x64\x61\x66\x74\x61\x72\x2D\x69\x73\x69\x20\x2E\x6A\x75\x64\x75\x6C\x2D\x6C\x61\x62\x65\x6C","\x3A\x68\x69\x64\x64\x65\x6E","\x69\x73","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x74\x6F\x67\x67\x6C\x65\x43\x6C\x61\x73\x73","\x63\x6C\x69\x63\x6B"];var postTitle= new Array(),postUrl= new Array(),postMp3= new Array(),postDate= new Array(),postLabels= new Array(),postBaru= new Array(),sortBy=_0x509f[0],tocLoaded=false,postFilter=_0x509f[1],numberfeed=0;function loadtoc(_0xd19fxc){function _0xd19fxd(){if(_0x509f[2] in _0xd19fxc[_0x509f[3]]){var _0xd19fxe=_0xd19fxc[_0x509f[3]][_0x509f[2]][_0x509f[4]];numberfeed=_0xd19fxe;ii=0;for(var _0xd19fxf=0;_0xd19fxf<_0xd19fxe;_0xd19fxf++){var _0xd19fx10=_0xd19fxc[_0x509f[3]][_0x509f[2]][_0xd19fxf];var _0xd19fx11=_0xd19fx10[_0x509f[6]][_0x509f[5]];var _0xd19fx12=_0xd19fx10[_0x509f[8]][_0x509f[5]][_0x509f[7]](0,10);var _0xd19fx13;for(var _0xd19fx14=0;_0xd19fx14<_0xd19fx10[_0x509f[9]][_0x509f[4]];_0xd19fx14++){if(_0xd19fx10[_0x509f[9]][_0xd19fx14][_0x509f[10]]==_0x509f[11]){_0xd19fx13=_0xd19fx10[_0x509f[9]][_0xd19fx14][_0x509f[12]];break ;} ;} ;var _0xd19fx15=_0x509f[1];for(var _0xd19fx14=0;_0xd19fx14<_0xd19fx10[_0x509f[9]][_0x509f[4]];_0xd19fx14++){if(_0xd19fx10[_0x509f[9]][_0xd19fx14][_0x509f[10]]==_0x509f[13]){_0xd19fx15=_0xd19fx10[_0x509f[9]][_0xd19fx14][_0x509f[12]];break ;} ;} ;var _0xd19fx16=_0x509f[1];if(_0x509f[14] in _0xd19fx10){for(var _0xd19fx14=0;_0xd19fx14<_0xd19fx10[_0x509f[14]][_0x509f[4]];_0xd19fx14++){_0xd19fx16=_0xd19fx10[_0x509f[14]][_0xd19fx14][_0x509f[15]];var _0xd19fx17=_0xd19fx16[_0x509f[17]](_0x509f[16]);if(_0xd19fx17!=-1){_0xd19fx16=_0xd19fx16[_0x509f[7]](0,_0xd19fx17);} ;postLabels[ii]=_0xd19fx16;postTitle[ii]=_0xd19fx11;postDate[ii]=_0xd19fx12;postUrl[ii]=_0xd19fx13;postMp3[ii]=_0xd19fx15;if(_0xd19fxf<maxNew){postBaru[ii]=true;} else {postBaru[ii]=false;} ;ii=ii+1;} ;} ;} ;} ;} ;_0xd19fxd();sortBy=_0x509f[0];sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document[_0x509f[18]](_0x509f[1]);} ;function sortlabel(){sortBy=_0x509f[19];sortPosts(sortBy);var _0xd19fx19=0;var _0xd19fxf=0;while(_0xd19fxf<postTitle[_0x509f[4]]){temp1=postLabels[_0xd19fxf];firsti=_0xd19fx19;do{_0xd19fx19=_0xd19fx19+1;} while(postLabels[_0xd19fx19]==temp1);;_0xd19fxf=_0xd19fx19;sortPosts2(firsti,_0xd19fx19);if(_0xd19fxf>postTitle[_0x509f[4]]){break ;} ;} ;} ;function sortPosts(sortBy){function _0xd19fx1b(_0xd19fx1c,_0xd19fx1d){var _0xd19fx1e=postTitle[_0xd19fx1c];postTitle[_0xd19fx1c]=postTitle[_0xd19fx1d];postTitle[_0xd19fx1d]=_0xd19fx1e;var _0xd19fx1e=postDate[_0xd19fx1c];postDate[_0xd19fx1c]=postDate[_0xd19fx1d];postDate[_0xd19fx1d]=_0xd19fx1e;var _0xd19fx1e=postUrl[_0xd19fx1c];postUrl[_0xd19fx1c]=postUrl[_0xd19fx1d];postUrl[_0xd19fx1d]=_0xd19fx1e;var _0xd19fx1e=postLabels[_0xd19fx1c];postLabels[_0xd19fx1c]=postLabels[_0xd19fx1d];postLabels[_0xd19fx1d]=_0xd19fx1e;var _0xd19fx1e=postBaru[_0xd19fx1c];postBaru[_0xd19fx1c]=postBaru[_0xd19fx1d];postBaru[_0xd19fx1d]=_0xd19fx1e;} ;for(var _0xd19fxf=0;_0xd19fxf<postTitle[_0x509f[4]]-1;_0xd19fxf++){for(var _0xd19fx19=_0xd19fxf+1;_0xd19fx19<postTitle[_0x509f[4]];_0xd19fx19++){if(sortBy==_0x509f[0]){if(postTitle[_0xd19fxf]>postTitle[_0xd19fx19]){_0xd19fx1b(_0xd19fxf,_0xd19fx19);} ;} ;if(sortBy==_0x509f[20]){if(postTitle[_0xd19fxf]<postTitle[_0xd19fx19]){_0xd19fx1b(_0xd19fxf,_0xd19fx19);} ;} ;if(sortBy==_0x509f[21]){if(postDate[_0xd19fxf]>postDate[_0xd19fx19]){_0xd19fx1b(_0xd19fxf,_0xd19fx19);} ;} ;if(sortBy==_0x509f[22]){if(postDate[_0xd19fxf]<postDate[_0xd19fx19]){_0xd19fx1b(_0xd19fxf,_0xd19fx19);} ;} ;if(sortBy==_0x509f[19]){if(postLabels[_0xd19fxf]>postLabels[_0xd19fx19]){_0xd19fx1b(_0xd19fxf,_0xd19fx19);} ;} ;} ;} ;} ;function sortPosts2(_0xd19fx20,_0xd19fx21){function _0xd19fx22(_0xd19fx1c,_0xd19fx1d){var _0xd19fx1e=postTitle[_0xd19fx1c];postTitle[_0xd19fx1c]=postTitle[_0xd19fx1d];postTitle[_0xd19fx1d]=_0xd19fx1e;var _0xd19fx1e=postDate[_0xd19fx1c];postDate[_0xd19fx1c]=postDate[_0xd19fx1d];postDate[_0xd19fx1d]=_0xd19fx1e;var _0xd19fx1e=postUrl[_0xd19fx1c];postUrl[_0xd19fx1c]=postUrl[_0xd19fx1d];postUrl[_0xd19fx1d]=_0xd19fx1e;var _0xd19fx1e=postLabels[_0xd19fx1c];postLabels[_0xd19fx1c]=postLabels[_0xd19fx1d];postLabels[_0xd19fx1d]=_0xd19fx1e;var _0xd19fx1e=postBaru[_0xd19fx1c];postBaru[_0xd19fx1c]=postBaru[_0xd19fx1d];postBaru[_0xd19fx1d]=_0xd19fx1e;} ;for(var _0xd19fxf=_0xd19fx20;_0xd19fxf<_0xd19fx21-1;_0xd19fxf++){for(var _0xd19fx19=_0xd19fxf+1;_0xd19fx19<_0xd19fx21;_0xd19fx19++){if(postTitle[_0xd19fxf]>postTitle[_0xd19fx19]){_0xd19fx22(_0xd19fxf,_0xd19fx19);} ;} ;} ;} ;function displayToc2(){var _0xd19fx19=0;var _0xd19fxf=0;document[_0x509f[18]](_0x509f[23]);while(_0xd19fxf<postTitle[_0x509f[4]]){temp1=postLabels[_0xd19fxf];document[_0x509f[18]](_0x509f[24]);document[_0x509f[18]](_0x509f[25]+temp1+_0x509f[26]);document[_0x509f[18]](_0x509f[27]);firsti=_0xd19fx19;var _0xd19fx24=_0x509f[28];do{if(_0xd19fx24==_0x509f[28]){document[_0x509f[18]](_0x509f[29]);_0xd19fx24=_0x509f[30];} else {document[_0x509f[18]](_0x509f[31]);_0xd19fx24=_0x509f[28];} ;if(openNewTab){document[_0x509f[18]](_0x509f[32]+postUrl[_0xd19fx19]+_0x509f[33]+postTitle[_0xd19fx19]+_0x509f[34]);} else {document[_0x509f[18]](_0x509f[32]+postUrl[_0xd19fx19]+_0x509f[35]+postTitle[_0xd19fx19]+_0x509f[34]);} ;if(showNew){if(postBaru[_0xd19fx19]==true){document[_0x509f[18]](_0x509f[36]+baru+_0x509f[37]);} ;} ;document[_0x509f[18]](_0x509f[38]);_0xd19fx19=_0xd19fx19+1;} while(postLabels[_0xd19fx19]==temp1);;_0xd19fxf=_0xd19fx19;document[_0x509f[18]](_0x509f[39]);sortPosts2(firsti,_0xd19fx19);if(_0xd19fxf>postTitle[_0x509f[4]]){break ;} ;} ;document[_0x509f[18]](_0x509f[40]);} ;$(function (){if(accToc){$(_0x509f[42])[_0x509f[41]]();$(_0x509f[47])[_0x509f[46]](_0x509f[45])[_0x509f[44]]()[_0x509f[43]](sDownSpeed);$(_0x509f[51])[_0x509f[50]](_0x509f[48],_0x509f[49]);$(_0x509f[51])[_0x509f[56]](function (){if($(this)[_0x509f[44]]()[_0x509f[53]](_0x509f[52])){$(_0x509f[51])[_0x509f[54]](_0x509f[45])[_0x509f[44]]()[_0x509f[41]](sUpSpeed);$(this)[_0x509f[55]](_0x509f[45])[_0x509f[44]]()[_0x509f[43]](sDownSpeed);};});};}); //]]> </script> <script src="http://javakahuripan.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

• Sitemap jQuery Accordion V2

<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/AVvXsEjzYzmKHtnuqWXV9IQJSDtU09PBhhMtcYZiTMGc_U_pPpVHUC8r_TT4S_MLtV3Vl4vWzOvscMfAK5Io3qEaavwBkcEc03FKjTAjXGOcTo1C2Uihcuhc7GR-v9_Tn_PjG6uvribzRxTVniM/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/AVvXsEhxC6DflD7vajDfV4bnUOA3zxl1cuqLZywKw3mAmHZRNfBy7XQPTIpqrp25AHbm-2EGqiXiekXnK0os2DMwJHAnEsAHjdKP-ZITKMw3XyUTthCmNMxgFFeQoDbPEMb4YlggPC-uSrthttw/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/AVvXsEgdtyyxjyo8OSrjfQVq4wjIMMJIyloq6ElFDT8YglpALSQLAH3OfxIBP_mrYxO2600oF8fQUO4ZbV6X3FQjgFZL6kLpGPqQ_ScKIul7GmiWL3UAcglo_wUgvoytmzJlyD_aaFvU1cvRctA/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://javakahuripan.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script> </div>

• Sitemap jQuery Accordion V3

<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://javakahuripan.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>

Ganti http://javakahuripan.blogspot.com dengan alamat blog atau website sobat. Selebihnya silahkan sobat sesuaikan sendiri untuk memodifikasi tampilan widget tersebut.

Sekian Postingan Cara membuat Daftar Isi Dengan Efek jQuery Accordion, bila ada waktu silahkan lihat lihat daftar isi Blog ini disni. Semoga bermanfaat - Terima kasih.