Popular Post

Popular Posts

Posted by : Cyberr Pamekasan Jumat, 05 Juli 2013

Daftar Isi Dengan Efek jQuery Accordion - Sitemap atau Daftar Isi merupakan tempat untuk menempatkan semua daftar postingan atau artikel yang berada di suatu Blog. Pastinya sobat tentu sudah tahu lebih jauh tentang daftar isi. Disini saya akan membagikan tips membuat Daftar Isi Dengan Efek jQuery Accordion.


Dengan jQuery ini dimaksudkan akan menjadikan tampilan daftar isi menjadi lebih keren dan tidak bosan untuk diakses atau dibaca. Berikut kode dari . Daftar Isi Dengan Efek jQuery Accordion 

Daftar Isi Dengan Efek jQuery Accordion Warna Merah


Cara Menambahkannya ke Blog

  1. Login ke Akun Blogger » 
  2. Tata Letak » Tambah gadget » Tambah HTML/JavaScript »
  3. Letakkan Kode/Script daftar isi yang akan sobat pasang jangan lupa ganti URL (yang berwarna merah) dengan URL blog sobat » 
  4. Kemudian Simpan.


<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://blogharun26.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Leave a Reply

Syarat Berkomentar !!
1.Berkomentarlah dengan bahasa yang baik dan benar .
2.Komentar tidak mengandung SARA,,PELECEHAN,,dan hal2 yang negatif .
3.Tidak boleh menyisipkan link aktif di komentar ini
4.No Spamming
Subscribe to Posts | Subscribe to Comments

- Copyright © 2013 Cyberr Pamekasan - Devil Survivor 2 - Powered by Blogger - Designed by Johanes Djogan -