Daftar Isi Dengan Efek jQuery Accordion

Kembali lagi dengan saya :D Sudah lama saya tidak posting tentang tutorial blog hehe..
Pada kesempatan kali ini kita akan membahas cara membuat widget daftar isi berdasarkan label dengan efek jQuery Accordion.

DEMO

Memang sekarang jQuery banyak digunakan para blogger untuk mempertampan tampilan blognya. Efek jQuery Accrodionpun bisa di terapkan pada sidebar blog, yang Insyaallah nanti akan saya bahas pada posting selanjutnya..

Anda 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.

Kita akan menggunakan script yang saya dapatkan dari DT:] yang sudah saya modifikasi sedikit dan saya gabungkan yang sebelumnya menggunakan hosting java script, tujuanya agar lebih aman.

Sekarang kita akan masuk pada tahap pemasangan,

1. Pemasangan pada sidebar:

<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 #235a02;
  border-bottom:1px solid #235a02;
  background-color:#5F0707;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#235a02',endColorstr='#43830e');
  background-image:-webkit-linear-gradient(top,#235a02,#43830e);
  background-image:-moz-linear-gradient(top,#235a02,#43830e);
  background-image:-o-linear-gradient(top,#235a02,#43830e);
  background-image:linear-gradient(top,#235a02,#43830e);
}
#daftar-isi .headactive {
  color:#FCE1C2;
  border-top:1px solid #AD3000;
  border-bottom:1px solid #860000;
  background-color:#AD3000;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa749',endColorstr='#fc8403');
  background-image:-webkit-linear-gradient(top,#ffa749,#fc8403);
  background-image:-moz-linear-gradient(top,#ffa749,#);
  background-image:-o-linear-gradient(top,#ffa749,#fc8403);
  background-image:linear-gradient(top,#ffa749,#fc8403);
}
#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:#298600;
}
#daftar-isi a:hover {
  color:#fea905;
  text-decoration:none;
}
#daftar-isi a:visited {
  color:#47c011;
}
#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://agoengsang.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

NB:
Jika template blog sobat belum ada kode jQuery seperti kode dibawah ini.
Maka tambahkan kode dibawah ini diatas kode tersebut.
Jika di template sobat sudah terdapat kode ini maka tidak usah ditambahkan.

(Mudahnya saja : jika kode diatas dipasang langsung berhasil maka kode jQuery dibawah ini ga usah di pasang)

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

Kemudian Simpan.

2. Pemasangan pada halaman posting atau halaman statis:

Setelah itu uncul halaman statis. Klik mode HTML
Salin kode di diatas tadi kemudian letakkan di dalam formulirnya.

Keterangan:

- Ganti http://agoengsang.blogspot.com/ dengan alamat blog atau website anda.
- silahkan anda esuaikan sendiri untuk memodifikasi tampilan widget tersebut.
Semoga berhasil

Sumber : www.dte.web.id

10 Responses to "Daftar Isi Dengan Efek jQuery Accordion"

Unknown06 Juli, 2013
terima kasih atas tutorialnya.. (o)
sangat membantu sekali
BalasHapus
Balasan
Sigli Cyber07 Juli, 2013
bgus tutorialnya..
mungkin bisa dicoba
BalasHapus
Balasan
Fajrin08 Juli, 2013
weleh2 jadi one colomn nih templatenya :D hehe
BalasHapus
Balasan
harianseluler22 Februari, 2015
sedot lagi coeg .... hahaha
BalasHapus
Balasan
harianseluler22 Februari, 2015
:-) Lupa emoet nya :p
BalasHapus
Balasan

Tambahkan komentar

CATATAN :
1. Form komentar ini tanpa moderasi dan verifikasi.
2. Dilarang promosi / meng-iklankan suatu produk dll.
3. Berkomentar dengan bahasa yang sopan
4. Dilarang menanamkan link aktif dalam komentar ini atau saya akan membuatnya menghilang selamanya.