~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~SAYA MENDENGAR LALU SAYA LUPA ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SAYA MEMBACA LALU SAYA INGAT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SAYA MELAKUKAN LALU SAYA MENGERTI~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

6 December 2014

Cara Membuat Daftar Isi Berdasarkan Label Dengan Efek Drop Down


Cara Membuat Daftar Isi Berdasarkan Label Dengan Efek Drop Down


Assaalamu'alaikum Warohmatullahi Wabarokatuh

Pada artikel kali ini, menjelaskan tentang bagaimana cara membuta daftar isi berdasarkan label dengan efek dropdown. Jadi daftar isi akan dimunculkan berdasarkan label postingannya dan ketika label tersebut diklik, muncul daftar isi postingan apa saja yang berada pada label tersebut. Untuk membuatnya, dibawah ini cara-caranya.

Masuk ke dalam menu "Tata Letak"
Lalu "Tambahkan Gadget" dan pilih "HTML/JavaScript"
Kemudian Copy kode di bawah ini dan pastekan pada "HTML/JavaScript" tadi.

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.blogger.com/blogger.g?blogID=6984301103846628017" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><link href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" media="screen" rel="stylesheet" type="text/css" />

<script type="text/javascript">
var showNew    = true,
    accToc     = true,
    openNewTab = true,
    maxNew     = 5,
    baru       = "Artikel Baru",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>

<script type="text/javascript">
var postTitle = new Array(),
   postUrl = new Array(),
   postMp3 = new Array(),
   postDate = new Array(),
   postLabels = new Array(),
   postBaru = new Array(),
   sortBy = 'titleasc',
   tocLoaded = false,
   postFilter = '',
   numberfeed = 0;

function loadtoc(_0xd19fxc) {
   function _0xd19fxd() {
      if ('entry' in _0xd19fxc['feed']) {
         var _0xd19fxe = _0xd19fxc['feed']['entry']['length'];
         numberfeed = _0xd19fxe;
         ii = 0;
         for (var _0xd19fxf = 0; _0xd19fxf < _0xd19fxe; _0xd19fxf++) {
            var _0xd19fx10 = _0xd19fxc['feed']['entry'][_0xd19fxf];
            var _0xd19fx11 = _0xd19fx10['title']['$t'];
            var _0xd19fx12 = _0xd19fx10['published']['$t']['substring'](0, 10);
            var _0xd19fx13;
            for (var _0xd19fx14 = 0; _0xd19fx14 < _0xd19fx10['link']['length']; _0xd19fx14++) {
               if (_0xd19fx10['link'][_0xd19fx14]['rel'] == 'alternate') {
                  _0xd19fx13 = _0xd19fx10['link'][_0xd19fx14]['href'];
                  break;
               };
            };
            var _0xd19fx15 = '';
            for (var _0xd19fx14 = 0; _0xd19fx14 < _0xd19fx10['link']['length']; _0xd19fx14++) {
               if (_0xd19fx10['link'][_0xd19fx14]['rel'] == 'enclosure') {
                  _0xd19fx15 = _0xd19fx10['link'][_0xd19fx14]['href'];
                  break;
               };
            };
            var _0xd19fx16 = '';
            if ('category' in _0xd19fx10) {
               for (var _0xd19fx14 = 0; _0xd19fx14 < _0xd19fx10['category']['length']; _0xd19fx14++) {
                  _0xd19fx16 = _0xd19fx10['category'][_0xd19fx14]['term'];
                  var _0xd19fx17 = _0xd19fx16['lastIndexOf'](';');
                  if (_0xd19fx17 != -1) {
                     _0xd19fx16 = _0xd19fx16['substring'](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 = 'titleasc';
   sortPosts(sortBy);
   sortlabel();
   tocLoaded = true;
   displayToc2();
   document['write']('');
};

function sortlabel() {
   sortBy = 'orderlabel';
   sortPosts(sortBy);
   var _0xd19fx19 = 0;
   var _0xd19fxf = 0;
   while (_0xd19fxf < postTitle['length']) {
      temp1 = postLabels[_0xd19fxf];
      firsti = _0xd19fx19;
      do {
         _0xd19fx19 = _0xd19fx19 + 1;
      } while (postLabels[_0xd19fx19] == temp1);;
      _0xd19fxf = _0xd19fx19;
      sortPosts2(firsti, _0xd19fx19);
      if (_0xd19fxf > postTitle['length']) {
         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['length'] - 1; _0xd19fxf++) {
      for (var _0xd19fx19 = _0xd19fxf + 1; _0xd19fx19 < postTitle['length']; _0xd19fx19++) {
         if (sortBy == 'titleasc') {
            if (postTitle[_0xd19fxf] > postTitle[_0xd19fx19]) {
               _0xd19fx1b(_0xd19fxf, _0xd19fx19);
            };
         };
         if (sortBy == 'titledesc') {
            if (postTitle[_0xd19fxf] < postTitle[_0xd19fx19]) {
               _0xd19fx1b(_0xd19fxf, _0xd19fx19);
            };
         };
         if (sortBy == 'dateoldest') {
            if (postDate[_0xd19fxf] > postDate[_0xd19fx19]) {
               _0xd19fx1b(_0xd19fxf, _0xd19fx19);
            };
         };
         if (sortBy == 'datenewest') {
            if (postDate[_0xd19fxf] < postDate[_0xd19fx19]) {
               _0xd19fx1b(_0xd19fxf, _0xd19fx19);
            };
         };
         if (sortBy == 'orderlabel') {
            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['write']('<div id="daftar-isi">');
   while (_0xd19fxf < postTitle['length']) {
      temp1 = postLabels[_0xd19fxf];
      document['write']('<div class="sublabel">');
      document['write']('<div class="judul-label">' + temp1 + '</div>');
      document['write']('<div class="judul-list"><ol>');
      firsti = _0xd19fx19;
      var _0xd19fx24 = 'odd';
      do {
         if (_0xd19fx24 == 'odd') {
            document['write']('<li class="data-list list-ganjil">');
            _0xd19fx24 = 'even';
         } else {
            document['write']('<li class="data-list list-genap">');
            _0xd19fx24 = 'odd';
         };
         if (openNewTab) {
            document['write']('<a href="' + postUrl[_0xd19fx19] + '" target="_blank">' + postTitle[_0xd19fx19] + '</a>');
         } else {
            document['write']('<a href="' + postUrl[_0xd19fx19] + '">' + postTitle[_0xd19fx19] + '</a>');
         };
         if (showNew) {
            if (postBaru[_0xd19fx19] == true) {
               document['write'](' - <strong>' + baru + '</strong>');
            };
         };
         document['write']('</li>');
         _0xd19fx19 = _0xd19fx19 + 1;
      } while (postLabels[_0xd19fx19] == temp1);;
      _0xd19fxf = _0xd19fx19;
      document['write']('</ol></div></div>');
      sortPosts2(firsti, _0xd19fx19);
      if (_0xd19fxf > postTitle['length']) {
         break;
      };
   };
   document['write']('</div><div style="text-align:right;margin-right:7px;"><a title="" style="font:bold 8px Arial,Sans-Serif;color:#666 !important;text-shadow:0px 1px 0px rgba(255,255,255,0.1);opacity:1 !important;visibility:visible !important;display:block !important;" href=""></a></div>');
};
$(function () {
   if (accToc) {
      $('#daftar-isi .judul-list')['slideUp']();
      $('#daftar-isi .judul-label:first')['addClass']('headactive')['next']()['slideDown'](sDownSpeed);
      $('#daftar-isi .judul-label')['css']('cursor', 'pointer');
      $('#daftar-isi .judul-label')['click'](function () {
         if ($(this)['next']()['is'](':hidden')) {
            $('#daftar-isi .judul-label')['removeClass']('headactive')['next']()['slideUp'](sUpSpeed);
            $(this)['toggleClass']('headactive')['next']()['slideDown'](sDownSpeed);
         };
      });
   };
});
</script>

<script src="http://alfiansyahmaulana.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Perhatikan pada bagian paling bawah sendiri. ganti alfiansyahmaulana.blogspot.com dengan URL blog yang akan diberi daftar isi. 
Kemudian Simpan dan lihat hasilnya.

Sekian sedikit artikel tentang bagaimana cara membuat daftar isi berdasarkan label dengan efek dropdown menggunakan jquery ini. Jika ada kekurangan mohon dimaafkan. Semoga bermanfaat :)

Wassalamu'alaikum warohmatullahi Wabaokatuh


nb : Jika cara tersebut tidak berhasil, maka mungkin cara ini sudah tidak bisa digunakan.



ARTIKEL TERKAIT:


BACA JUGA TULISAN MENARIK LAINNYA :

0 Komentar:

Post a Comment