Skip to content Skip to sidebar Skip to footer
Home / Blogging / Cara Pasang Table Of Content [TOC] di Postingan Blog SEO Friendly
Cara Pasang Table Of Content [TOC] di Postingan Blog SEO Friendly

Cara Pasang Table Of Content [TOC] di Postingan Blog SEO Friendly

By Dewa Plokis
Membuat daftar isi konten pada postingan blog SEO Friendly serta valid HTML5 Merupakan daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang ada pada sebuah artikel akan saya bagikan untuk Anda pada tutorial kali ini. Sudah banyak blog yang menggunakan cara ini. Saya juga sebenarnya tertarik untuk memasangkannya dibeberapa postingan saya.

Sebetulnya pembuatan Table of Content [TOC] ini sudah pernah saya buat sebelumnya. Pada tutorial tersebut, bentuk pemasangan TOC dibuat secara otomatis untuk setiap heading <H2></H2>.

Cara Pasang Table Of Content [TOC] di Postingan Blog SEO Friendly
Table of content ini mirip dengan table of content pada Wikipedia dan coba diterapkan pada platform blogger. Tentunya pemasangan ini sudah SEO Friendly dan Valid HTML5.

Pada tutorial ini, akan saya bagikan 2 jenis TOC yang sekalipun keduanya mirip namun ada beberapa perbedaan pada tampilan dan juga jenis serta penempatan kode yang berbeda

Baiklah, langsung saja kita menuju keprakteknya

Daftar Isi TOC Postingan Blog SEO Friendly

Kita mulai pemasangan ini dengan cara yang pertama

1. Buka Blogger > Klik menu Tema > Klik tombol Edit HTML > Kemudian tambahkan kode CSS ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
<style type='text/css'>
/* CSS Table of Contents */
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#toc_list{font-weight:700;cursor:pointer;margin:10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;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_tocontent{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_tocontent:hover{background:#2d3436;color:#fff}
:target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>

2. Langkah selanjutnya, tambahkan kode di bawah ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
<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>

3. Klik tombol Simpan tema.

Cara penerapannya dalam postingan

Untuk bisa menggunakan trik ini, letakkan kode dibawah ini pada HTML postingan (bukan compose)

<div id="light-toc">
<div id="toc_list" 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="Subheading 1">Bagian Subheading 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Bagian Subheading 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Bagian Subheading 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Bagian Subheading 4</a></li>
<li><a href="#toc_5" title="Subheading 5">Bagian Subheading 5</a></li>
</ol>
</div>
</div>

Silakan ubah tulisan yang sudah saya mark sesuai dengan sub yang ingin Anda gunakan pada artikel yang Anda buat. Kemudian tambahkan id="toc_1" untuk setiap heading sesuai dengan ID pada kode di atas. Misalnya seperti ini

<h4>
Membuat Daftar Isi Table Of Content Postingan Blog SEO Friendly</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Tambahkan ID pada heading menjadi seperti ini

<h4 id="toc_1">
Membuat Daftar Isi Table Of Content Postingan Blog SEO Friendly</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


Perhatikan kode yang ditandai, untuk heading selanjutnya sesuaikan dengan urutan ID pada Table of Contents yang Anda buat. Contohnya

<h4 id="toc_1">
Heading Bagian 1</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h4 id="toc_2">
Heading Bagian 2</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h4 id="toc_3">
Heading Bagian 3</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h4 id="toc_4">
Heading Bagian 4</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h4 id="toc_5">
Heading Bagian 5</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Kemudian tambahkan kode ini di setiap akhir paragraf tiap bagian

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

Maka hasilnya menjadi seperti ini

<h4 id="toc_1">
Heading Bagian 1</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>


Setelah selesai, silakan klik tombol Publikasikan post dan lihat hasilnya di blog Anda.



Cara Membuat Table of Contents (TOC) Di Dalam Postingan Blogger

Berikut ini merupakan cara yang kedua. Silakan disimak baik-baik dan diperhatikan setiap langkahnya agar tidak terjadi kesalahan

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

Perhatikan deretan kode terakhir yaitu :target::before. Jika Anda memakai menu sticky header / navigasi, ubah height dan margin-top sesuai dengan ukuran header / navigasi yang dipasang. Misal ukurannya 50px, maka ubah menjadi height:50px dan margin-top:-50px.

Cara Penerapan Table Of Content dalam Postingan Blogspot

Sekarang masuk ke bagian utamanya yaitu membuat daftar isi table of content di dalam postingan Blogger. Ketika membuat post baru, pastikan memilih mode HTML, BUKAN Compose. Lalu simpan kode ini di paragraf awal.
  <div class="toc">
<input aria-label="toctitle" class="toctoggle" id="toctoggle" role="button" type="checkbox" /><div class="toctitle"><h2>Daftar isi</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
    <li>1 <a href="#toc1" title="Judul Satu">Judul Satu</a></li>
    <li>2 <a href="#toc2" title="Judul Dua">Judul Dua</a></li>
    <li>3 <a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
    <li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a></li>
    <li>5 <a href="#toc5" title="Judul Lima">Judul Lima</a>
      <ul>
      <li>5.1 <a href="#toc5_1" title="Sub Judul Lima ke Satu">Sub Judul Lima ke Satu</a></li>
      <li>5.2 <a href="#toc5_2" title="Sub Judul Lima ke Dua">Sub Judul Lima ke Dua</a></li>
      </ul>
    </li>
    <li>6 <a href="#toc6" title="Judul Enam">Judul Enam</a></li>
  </ul>
</div>

#toc1 dan #toc lain adalah elemen pemanggilnya. Anda bisa menambahkan atau mengurangi sesuai kebutuhan.

Selanjutnya atur penulisan heading atau judul di artikel dengan menyertakan id yang sama dengan table of contents. Contohnya seperti ini.
<h2 id="toc1">Judul Satu</h2>
...isi paragraf satu

<h2 id="toc2">Judul Dua</h2>
...isi paragraf dua

<h2 id="toc3">Judul Tiga</h2>
...isi paragraf tiga

<h2 id="toc4">Judul Empat</h2>
...isi paragraf empat

<h2 id="toc5">Judul Lima</h2>
...isi paragraf lima

<h3 id="toc5_1">Sub Judul Lima ke Satu</h3>
...isi paragraf lima part 1

<h3 id="toc5_2">Sub Judul Lima ke Dua</h3>
...isi paragraf lima part 2

<h2 id="toc6">Judul Enam</h2>
...isi paragraf enam


Jika Tombol 'Sembunyikan / Tampilkan' Tidak Muncul

Pada cara kedua ini, silakan hapus kode <br /> pada kode ini
<div class="toc">
<input aria-label="toctitle" class="toctoggle" id="toctoggle" role="button" type="checkbox" /><br />
<div class="toctitle">
<h2>
Daftar isi</h2>

Maka Jadinya seperti ini
<span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h2>Daftar isi</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>

Perlu diperhatikan bahwa setiap kali Anda menuju ke halaman compose lalu kembali ke HTML maka tag <br /> ini akan selalu muncul, jadi perhatikan baik-baik sebelum Anda publish artikel.
Tips : Sebaiknya Jika ingin melakukan publish post, lakukan pada halaman HTML, jangan pada compose
Untuk hasilnya pada cara kedua ini, bisa Anda lihat pada salah satu postingan saya dibawah
Pada link diatas, saya memasangnya seperti ini pada postingan terbesebut
<div class="toc">
<input aria-label="toctitle" class="toctoggle" id="toctoggle" role="button" type="checkbox" /><div class="toctitle"><h4>Daftar isi</h4><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
<li>1 <a href="#toc1" title="Judul Satu">Shortcut Keyboard Pada Windows 7 Lengkap</a> <ul>
<li>1.1 <a href="#toc2" title="Sub Judul Lima ke Satu">General keyboard shortcuts</a></li>
<li>1.2 <a href="#toc3" title="Sub Judul Lima ke Dua">Dialog box keyboard shortcuts</a></li>
<li>1.3 <a href="#toc4" title="Sub Judul Lima ke Dua">Windows logo key keyboard shortcuts</a></li>
<li>1.4 <a href="#toc5" title="Sub Judul Lima ke Dua">Windows Explorer keyboard shortcuts</a></li>
<li>1.5 <a href="#toc6" title="Sub Judul Lima ke Dua">Taskbar keyboard shortcuts</a></li>
<li>1.6 <a href="#toc7" title="Sub Judul Lima ke Dua">Remote Desktop Connection on the desktop keyboard shortcuts</a></li>
<li>1.7 <a href="#toc8" title="Sub Judul Lima ke Dua">Paint keyboard shortcuts</a></li>
<li>1.8 <a href="#toc9" title="Sub Judul Lima ke Dua">WordPad keyboard shortcuts</a></li>
<li>1.9 <a href="#toc10" title="Sub Judul Lima ke Dua">Calculator keyboard shortcuts</a></li>
<li>1.10 <a href="#toc11" title="Sub Judul Lima ke Dua">Windows Journal keyboard shortcuts</a></li>
<li>1.11 <a href="#toc12" title="Sub Judul Lima ke Dua">Windows Help viewer keyboard shortcuts</a></li>
</ul>
</li>
</ul>
</div>
Atau Jika menggunakan 2 Sub menu, silakan lihat pada postingan saya dibawah

dan kode TOC yang saya gunakan adalah seperti ini
<div class="toc">
<input aria-label="toctitle" class="toctoggle" id="toctoggle" role="button" type="checkbox" />
<div class="toctitle">
<h4>
Daftar isi</h4>
<span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
<li>1 <a href="#toc1" title="Daftar Backlink Berkualitas dan SEO">Daftar Backlink Berkualitas dan SEO</a>
      <ul>
<li>1.1 <a href="#toc1_1" title="Situs Institusi Pendidikan Luar Negeri .Edu /.Gov /.Mil">Situs Institusi Pendidikan Luar Negeri .Edu /.Gov /.Mil</a></li>
<li>1.2 <a href="#toc1_2" title="Situs Media Sosial">Situs Media Sosial</a></li>
<li>1.3 <a href="#toc1_3" title="Komentar di Blog (Blogwalking)">Komentar di Blog (Blogwalking)</a></li>
<li>1.4 <a href="#toc1_4" title="Situs Sosial Bookmarking">Situs Sosial Bookmarking</a></li>
<li>1.5 <a href="#toc1_5" title="Situs Berbagi Video">Situs Berbagi Video</a></li>
<li>1.6 <a href="#toc1_6" title="Web 2.0 /Blog Dummy /Free Blog Network">Web 2.0 /Blog Dummy /Free Blog Network</a></li>
<li>1.7 <a href="#toc1_7" title="Authority Sites">Authority Sites</a></li>
<li>1.8 <a href="#toc1_8" title="Situs Berbagi PDF">Situs Berbagi PDF</a></li>
<li>1.9 <a href="#toc1_9" title="Audio Sharing Sites">Audio Sharing Sites</a></li>
</ul>
</li>
<li>2 <a href="#toc2" title="Judul Lima">Faktor Penentu Membangun Backlink Berkualitas</a>
      <ul>
<li>2.1 <a href="#toc2_1" title="Anchor Text">Anchor Text</a></li>
<li>2.2 <a href="#toc2_2" title="Relevan">Relevan</a></li>
<li>2.3 <a href="#toc2_3" title="Kontekstual Link">Kontekstual Link</a></li>
<li>2.4 <a href="#toc2_4" title="Low Outbond Links /OBL">Low Outbond Links /OBL</a></li>
</ul>
</li>
</ul>
</div>
Demikian tutorial kali ini tentang cara membuat Membuat Daftar Isi Table Of Content Postingan Blog SEO Friendly. Semoga bermanfaat, terima kasih

Sumber :

  • https://www.arlinadzgn.com/2018/08/cara-membuat-table-of-contents-di-blogger.html
  • https://www.igniel.com/2018/08/daftar-isi-table-of-contents.html


Load Comments
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Box

strong em u strike
pre code pre code spoiler
embed