Membuat Daftar Isi Berdasarkan Label

Pada kesempatan kali ini saya akan berbagi tentang tutorial membuat daftar isi berdasarkan  label pada blog. Pada sebuah postingan biasanya kita tautkan pada sebuah Label, dan pada postingan yang lain kita menggunakan label yang lain, artinya terdapat beberapa label pada blog kita, dan kita ingin membuat daftar isi berdasarkan label tersebut.

Membuat Daftar Isi Berdasarkan Label

Untuk Membuat Daftar Isi berdasarkan label, Sobat dapat mengikuti tutorial berikut :

Daftar Isi Berdasarkan Label :

• Login ke dashboard blogger.
• Klik pada Tata Letak > Tambah Gadget.
• Pilih HTML/Java Script
  
• Lalu isikan kode berikut :
  

  <div dir="ltr" style="text-align:left;" trbidi="on">
  <style scoped="" type="text/css">
  .table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
  .table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
  .table-of-content .toc-header:hover{background-color:#fdfdfd}
  .table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
  .table-of-content .toc-header.active{color:#fc4f3f}
  .table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
  .table-of-content .loading{display:block;padding:15px;text-decoration:blink}
  .table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
  .table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
  .table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
  .table-of-content a:visited{color:#a2a2a9;transition:initial}
  .table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial}
  .post ol li:before{display:none}
  </style>
  <div class="table-of-content" id="table-of-content">
  <span class="loading">Memuat konten...</span></div>
  <script>
  var toc_config = {
      url: 'http://histutor.blogspot.com/',
      containerId: 'table-of-content',
      showNew: 15,
      newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
      sortAlphabetically: {
          thePanel: true,
          theList: true
      },
      maxResults: 9999,
      activePanel: 1,
      slideSpeed: {
          down: 400,
          up: 400
      },
      slideEasing: {
          down: null,
          up: null
      },
      slideCallback: {
          down: function() {},
          up: function() {}
      },
      clickCallback: function() {},
      jsonCallback: '_toc',
      delayLoading: 0
  };
  </script>
  <script src="https://cdn.rawgit.com/irvandev/irvandev/master/daftarisi-label.js"></script>
  </div>

  
  Keterangan :
  
  • histutor.blogspot.com ganti dengan alamat blog Sobat.
  • Klik Save dan lihat hasilnya.
  DEMO
  
  
  Demikian tutorial kali ini, selamat mencoba dan semoga berhasil Membuat Daftar Isi Label Tertentu.