Daftar Isi Dengan Efek jQuery Accordion | OOM RIO
Home » All Tutorials » jQuery » Widget » Daftar Isi Dengan Efek jQuery Accordion

Sunday, December 30, 2012

Daftar Isi Dengan Efek jQuery Accordion

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 !!


Judul: Daftar Isi Dengan Efek jQuery Accordion; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:


Posted by at 7:43 AM
Labels: , ,

0 comments:

Post a Comment

Informasi Pilihan Identitas:
Google/Blogger : Khusus yang punya Account Blogger.
Lainnya : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan).

Subscribe to: Post Comments (Atom)