Membuat TOC Daftar isi di Postingan Blogger

cara membuat daftar isi TOC di postingan blogger

Assalamualaikum sobat blogger. Berikut saya akan berbagi tentang cara membuat Daftar isi atau TOC ( Table of Content ) di postingan blog. TOC sendiri sangat efektif untuk artikel dengan isi kontent yang panjang, selain itu Table of Content juga mengandung nilai SEO nya loh.

Ada dua contoh Daftar Isi yang dapat anda gunakan. Berikut Cara Membuat TOC Daftar isi di Postingan Blog beserta demonya.

Table Of Content Style 1

1. Login Blogger > Pilih Tema > Edit HTML.
2. Letakan Kode CSS dibawah tepat di atas kode </style> atau </b:skin>


  /* CSS TOC Table of Contents utawi Daftar Isi*/
  #light-toc{border-radius:3px;background:#f5f5f5;padding:10px 20px}
  #daftar-toc{font-weight:700;cursor:pointer;margin:10px 0}
  #daftar-toc:focus,#toc li:focus,.back-to-up:focus{outline:none}
  #daftar-toc svg{vertical-align:middle}
  #toc li{cursor:pointer;background:transparent;margin:.2em 0 .2em 1em}
  #toc ol li:before{left:-2em}
  #toc li a{color:#222}
  #toc li a:hover{color:#1e90ff}
  #toc{display:grid}
  .back-to-up{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
  .back-to-up:hover{background:#2d3436;color:#fff}
  :target::before{content:'';margin-top:-40px;display:block;height:40px;visibility:hidden}

3. Masukan kode JS dibawah tepat diatas kode </body>


  <script type='text/javascript'>          
  //<![CDATA[          
  $(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault(); var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
  //]]>          
  </script>

4. Simpan Tema.

Saat memasukan Menu Daftar Isi pada poatingan.

5. Masukan kode dibawah dan sesuaikan, pada lembar postingan ubah ke html terlebuh dahulu. berikut kode yang digunakan.


  <div id="light-toc">
  <div id="daftar-toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
  Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
  <div id="toc">
  <ol>
  <li><a href="#toc_1" title="JUDUL 1">JUDUL 1</a></li>
  <li><a href="#toc_2" title="JUDUL 2">JUDUL 2</a></li>
  <li><a href="#toc_3" title="JUDUL 3">JUDUL 3</a></li>
  <li><a href="#toc_4" title="JUDUL 4">JUDUL 4</a></li>
  <li><a href="#toc_5" title="JUDUL 5">JUDUL 5</a></li>
  </ol>
  </div>
  </div>

  <h2 id="toc_1">JUDUL 1</h2>
  isi paragraf 1.....
  <div class="back-to-up" onclick="document.getElementById('daftar-toc').scrollIntoView(true);" role="button" tabindex="0">
  Back to Contents</div>
  <br/><br/>
  <h2 id="toc_2">JUDUL 2</h2>
  isi paragraf 2.....
  <div class="back-to-up" onclick="document.getElementById('daftar-toc').scrollIntoView(true);" role="button" tabindex="0">
  Back to Contents</div><br/><br/>
  <h2 id="toc_3">JUDUL 3</h2>
  isi paragraf 3.....
  <div class="back-to-up" onclick="document.getElementById('daftar-toc').scrollIntoView(true);" role="button" tabindex="0">
  Back to Contents</div><br/><br/>
  <h2 id="toc_4">JUDUL 4</h2>
  isi paragraf 4.....
  <div class="back-to-up" onclick="document.getElementById('daftar-toc').scrollIntoView(true);" role="button" tabindex="0">
  Back to Contents</div><br/><br/>
  <h2 id="toc_5">JUDUL 5</h2>
  isi paragraf 5.....
  <div class="back-to-up" onclick="document.getElementById('daftar-toc').scrollIntoView(true);" role="button" tabindex="0">
  Back to Contents</div>

Ubah Judul dan isi paragraf sesuai artkel yang anda buat. untuk gambaran hasilnya berikut demonya

DEMO TOC / DAFTAR ISI STYLE 1

Table Of Content Style 2

1. Login Blogger > Pilih Tema > Edit HTML.
2. Letakan Kode CSS dibawah tepat di atas kode </style> atau </b:skin>

  
  .daftar-toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
  .daftar-toc h2 {display:inline-block; margin-right:10px}
  .daftar-toc a {text-decoration:none}
  .daftar-toc a:hover {text-decoration:underline}
  .daftar-toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}
  .daftar-toc ul li {list-style-type:none;}
  .daftar-toc ul li a {margin-left:.5em}
  .daftar-toc ul li ul {margin-left:2em}
  .daftar-toctogglelabel {cursor:pointer; color:#0645ad}
  :not(:checked) > .daftar-toctoggle {display:inline !important; position:absolute;  opacity:0}
  :not(:checked) > .daftar-toctogglespan:before {content:'['}
  .daftar-toctoggle:not(:checked) + .daftar-toctitle .daftar-toctogglelabel:after {content:'sembunyikan';display: inline}
  .daftar-toctoggle:checked + .daftar-toctitle .daftar-toctogglelabel:after {content:'tampilkan'}
  :not(:checked) > .daftar-toctogglespan:after {content:']'}
  .daftar-toctoggle:checked ~ ul{display:none}
  :target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

3. Simpan Tema.

Saat memasukan Menu Daftar Isi pada poatingan.

4. Masukan kode dibawah dan sesuaikan, pada lembar postingan ubah ke html terlebuh dahulu. berikut kode yang digunakan.


  <div class="daftar-toc">
  <input type="checkbox" role="button" id="daftar-toctoggle" class="daftar-toctoggle"><div class="daftar-toctitle"><h2>Daftar isi</h2><span class="daftar-toctogglespan"><label class="daftar-toctogglelabel" for="daftar-toctoggle"></label></span></div>
  <ul>
  <li>1 <a href="#daftar-toc1" title="Title Satu">Title Satu</a></li>
  <li>2 <a href="#daftar-toc2" title="Title Dua">Title Dua</a></li>
  <li>3 <a href="#daftar-toc3" title="Title Tiga">Title Tiga</a></li>
  <li>4 <a href="#daftar-toc4" title="Title Empat">Title Empat</a></li>
  <li>5 <a href="#daftar-toc5" title="Title Lima">Title Lima</a>
  <ul>
  <li>5.1 <a href="#daftar-toc5_1" title="Sub Title Lima ke Satu">Sub Title Lima ke Satu</a></li>
  <li>5.2 <a href="#daftar-toc5_2" title="Sub Title Lima ke Dua">Sub Title Lima ke Dua</a></li>
  </ul>
  </li>
  <li>6 <a href="#daftar-toc6" title="Title Enam">Title Enam</a></li>
  </ul>
  </div>


  <h2 id="daftar-toc1">Title Satu</h2>
  isi paragraf satu.....
  <h2 id="daftar-toc2">Title Dua</h2>
  isi paragraf dua.....
  <h2 id="daftar-toc3">Title Tiga</h2>
  isi paragraf tiga.....
  <h2 id="daftar-toc4">Title Empat</h2>
  isi paragraf empat.....
  <h2 id="daftar-toc5">Title Lima</h2>
  .isi paragraf lima.....
  <h3 id="daftar-toc5_1">Sub Title Lima ke Satu</h3>
  isi paragraf lima sub satu.....
  <h3 id="daftar-toc5_2">Sub Title Lima ke Dua</h3>
  isi paragraf lima sub dua.....
  <h2 id="daftar-toc6">Title Enam</h2>
  isi paragraf enam.....

DEMO TOC / DAFTAR ISI STYLE 2

Mudah bukan kini blog anda terlihat profesional dengan adanya fitur Daftar Isi atau TOC pada postingan blog anda.

BLOG INSET

Search This Blog