» » » » Daftar Isi Dengan Efek jQuery Accordion

Daftar Isi Dengan Efek jQuery Accordion

07.43
0 komentar
Pada kesempatan kali ini saya akan membahas cara membuat widget daftar isi berdasarkan label dengan efek jQuery Accordion. Memang skarang 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:
Login akun Blogger > Tataletak > Tambah gadget > Tambah HTML/JavaScript.
kemudian letakkan kode berikut ini:
<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://mdf-blog.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
Kemudian Simpan.
2. Pemasangan pada halaman posting atau halaman statis:
Login akun Blogger > Laman > Laman baru > Laman kosong.
Setelah itu uncul halaman statis seperti ini. Klik mode HTML
Salin kode di diatas tadi kemudian letakkan di dalam formulirnya.
Keterangan:
- Kode yang saya garis bawahi berwarna hijau, itu merupakan jQuery, jika di template anda sudah terdapat kode ini maka tidak usah ditambahkan.
- Ganti http://mdf-blog.blogspot.com dengan alamat blog atau website anda.
Siasanya silahkan anda esuaikan sendiri untuk memodifikasi tampilan widget tersebut.
Good Luck !!
Share:

Posting Komentar

Catatan: (memasukan item pada komentar)
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

Link aktif akan dimatikan secara otomatis.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.
Back to Top