Beranda  ›  Cara Membuat TOC

Cara Membuat TOC

7/18/2023 Tambah Komentar Edit
table of content blogger

Pelajari Cara membuat table of content (TOC) atau daftar isi postingan di Blogger otomatis dan manual.

Daftar isi


JejakTerkini - Sobat blogger, mungkin Anda pernah melihat buku di mana pada halaman awalnya terpampang daftar isi, dan biasanya ia diberi nomor dan sub-topik dari keseluruhan buku agar memudahkan pembaca untuk menemukan topik yang mereka cari.

Cara seperti ini juga dapat kita terapkan di Blogger lho Guys? Ya Table of Content atau TOC telah digunakan oleh banyak pengelola web untuk mempermudah pengunjung dalam membaca postingan mereka.

Apa itu Table of Content?

Intinya, ini adalah daftar topik dan sub-topik yang mencakup poin-poin utama dalam halaman postingan. Pada umumnya, ia diletakkan di paragraf awal atau sebelum judul artikel.

ketika, pengunjung mengklik link dari daftar itu, maka mereka akan dilompatkan ke bagian penting sesuai minat mereka dalam artikel tersebut.

Biasanya, ini digunakan oleh website yang memiliki artikel yang panjang, dan jika memenuhi kriteria SEO maka Google akan memberi cuplikan unggulan di mesin telusur.

Baca Juga: Cara Membuat Safelink di Blog Utama dengan Mudah

Apa itu Cuplikan Unggulan?

Cuplikan unggulan adalah format khusus dari daftar reguler sebuah laman web di SERPs yang menampilkan cuplikan deskripsi.

Cuplikan tersebut dipilih berdasarkan pencarian, dan secara otomatis ditentukan oleh sistem Google.

Mereka muncul bisa dalam bentuk pertanyaan yang diutarakan pengguna, atau berdasarkan volume keyword.

Apa Manfaat Menambahkan TOC ke Blogger?

Sebelum kita menyelam lebih jauh, mari pelajari kenapa mode ini begitu populer beberapa tahun belakangan yang dikatakan sebagai terobosan baru dalam hal meningkatkan pengalaman pengguna sekaligus SEO.

Berikut sejumlah keuntungan jika Sobat memiliki TOC di postingan Anda.

● Secara teknis, Google menyukai halaman web yang dibuat sangat detail dan terstruktur dengan baik. Dengan menambahkan daftar isi, maka post Anda akan terlihat lebih berkarakter.

● Jika postingan Anda telah terstruktur dengan baik dan jelas, maka Google akan menampilkan cuplikan unggulan dan link langsung ke laman hasil pencarian.

● Meningkatkan pengoptimalan di SERPs yang dapat membuat peringkat Anda cepat menanjak.

● Daftar Isi juga bisa membantu meningkatkan pengalaman pembaca dan menurut penelitian, 70% orang-orang hanya memindai poin-poin vital di suatu laman web.

● Peran penting dari penggunaan TOC lainnya adalah membantu pengunjung untuk melihat informasi utama, kemudian memudahkan mereka menavigasinya.

Lalu pertanyaannya sekarang, bagaimana cara membuat daftar isi di postingan Blogger itu? Jawabanya akan segera Sobat temui di bagian bawah dari laman ini.

2 Cara Membuat Table of Content di Blogger

Kalau di WordPress, pengguna tidak perlu repot-repot untuk menambahkan TOC, karena platform sudah menyediakan plugin pendukung yang memudahkan pekerjaan mereka.

Sebaliknya di Blogger, kita harus membuatnya sendiri secara manual menggunakan kode HTML.

Namun ketahuilah, hanya artikel panjang yang memerlukan TOC, dan hindari pemuatan mode ini ke postingan pendek.

Sekali lagi Penulis katakan, inti dari penambahan daftar isi adalah memberi pengunjung pengalaman membaca yang lebih baik.

Catatan: Sebelum kita memulai proses kustomisasi, sebaiknya cadangkan template Anda. Sebab jika terjadi kesalahan, Sobat memiliki opsi pemulihkan.

1. TOC Manual

Pertama, menambahan TOC secara manual ke daftar konten pada setiap artikel Anda.

Jadi, ini adalah praktik yang sedikit memakan waktu, tetapi lebih efektif karena Sobat dapat menentukan sendiri post apa saja yang ingin dibuatkan daftar isi-nya.

So, berikut langkah demi langkah rancangan pengkodeannya:

Langkah 1

Login ke akun Blogger Anda, kemudian tab menu tema "Template" > Pilih opsi edit HTML dan masukkan CSS berikut di atas kode ]]></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}
:target::beforeheightmargin-topheight:50pxmargin-top:-50px

Keterangan: Jika Template Anda menggunakan sidebar sticky, silahkan atur angka kode yang ditandai paling bawah menyesuaikan lebar sidebar.

Langkah 2

Selanjutnya, beralih ke postingan Anda dan tambahkan kode dibawah ini sesudah Judul atau diakhir paragraf pertama.


<div class="toc">
  <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>
  <ul>
    <li>1 <a href="#toc1" title="Judul Pertama">Judul Pertama</a></li>
    <li>2 <a href="#toc2" title="Judul Kedua">Judul Kedua</a></li>
    <li>3 <a href="#toc3" title="Judul Ketiga">Judul Ketiga</a>
      <ul>
      <li>3.1 <a href="#toc3-1" title="Sub Judul Ketiga Part Satu">Sub Judul Ketga Part Satu</a></li>
      <li>3.2 <a href="#toc3-2" title="Sub Judul Ketiga Part Dua">Sub Judul Ketiga Part Dua</a></li>
      </ul>
    </li>
    <li>4 <a href="#toc4" title="Judul Keempat">Judul Keempat</a></li>
  </ul>
</div>

Langkah 3

Sekarang, lihatlah bagaimana cara menggunakan tag-tag diatas.

Tambahkan kode id="toc1" di bagian depan judul (Heading) maupun sub-judul (Sub-Heading) di dalam artikel Anda, sehingga menjadi seperti ini:


<h2 id="toc1">Judul Pertama</h2>
Isi paragraf pertama...

<h2 id="toc3">Judul Kedua</h2>
Isi paragraf ketiga...

<h2 id="toc3-1">Sub Judul Ketiga</h2>
Isi paragraf sub ketiga...

Dan seterusnya...

Jangan lupa, ubah dan sesuaikan juga kode pada langkah ke-2 tadi. Untuk demo, silahkan kamu lihat langsung di halaman ini.

2. TOC Otomatis

Jika, langkah pertama barusan adalah berkonsep manual, sekarang mari intip bagaimana cara membuat daftar isi di postingan Blogger secara otomatis.

Pengkodean ini juga sama mudahnya, tetapi prinsifnya agak berbeda dalam hal penempatan ke tata letak HTML. So, simaklah step by step dibawah ini.

Informasi: Script ini adalah buatan Idnxmus, kami hanya memberi panduan pemasangan.

Step 1

Pertama-tama, letakkan CSS berikut pada template HTML Sobat diatas ]]></b:skin>


/* TOC Otomatis by idnxmus.com */
.post-body .tableOfContent {
     padding:12px 15px;
     margin:20px 0;
     background-color:#f8f9fa;
     border:1px solid #e4e9ef;
     border-radius:4px;
     font-size:16px;
     line-height:1.5em;
}
.post-body .tableOfContent #tocContent {
     margin:5px 0;
}
.post-body .tableOfContent #tocContent ol, .post-body .tableOfContent #tocContent ul {
     margin:0 0 10px;
     padding:10px 0 0 17px;
     position:relative;
}
.post-body .tableOfContent #tocContent ol ol, .post-body .tableOfContent #tocContent ul ul, .post-body .tableOfContent #tocContent ol ul, .post-body .tableOfContent #tocContent ul ol {
     padding-left:30px;
}
.post-body .tableOfContent #tocContent li {
     position:relative;
     margin:0 0 10px;
}
.post-body .tableOfContent #tocContent ol ul:before, .post-body .tableOfContent ol ol:before, .post-body .tableOfContent #tocContent ul ol:before, .post-body .tableOfContent ul ul:before {
     content:'';
     display:block;
     width:1px;
     height:calc(100% - 10px);
     position:absolute;
     left:-11px;
     border-left:1px dashed rgba(0,0,0,.2);
     top:0;
}
.post-body ol.point2 li:before {
     content:'';
     display:block;
     height:1px;
     width:15px;
     border-top:1px dashed rgba(0,0,0,.2);
     position:absolute;
     left:-38px;
     top:10px;
}
.post-body .tableOfContent #tocContent a {
     display:inline-table;
     margin-left:5px;
}
.post-body .tableOfContent #tocContent .point2 a {
     margin:0;
}
.post-body .tableOfContent #tocContent a:hover {
     text-decoration:underline;
}
.post-body .tableOfContent .toctogglelabel {
     display:block;
     cursor:pointer;
}
.post-body .tableOfContent .toctogglespan i.icon.icon-dropdown {
     float:right;
     margin:0;
}
ol.point2 li {
     list-style-type:circle;
     position:relative;
}
:not(:checked) > .toctoggle {
     display:inline !important;
     position:absolute;
     opacity:0;
}
.tableOfContent .toctogglespan .toctogglelabel:before {
     content:'Daftar Isi :';
     font-weight:600;
}
.toctoggle:checked ~ #tocContent {
     display:none;
}
label.toctogglelabel:after {
     background-image:url("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z' fill='%2309204C'/></svg>");
     content:'';
     margin-top:3px;
     width:16px;
     height:16px;
     background-size:cover;
     background-repeat:no-repeat;
     background-position:center center;
     float:right;
     transition:all .3s ease;
     -webkit-transition:all .3s ease;
}
.toctoggle:checked + .toctogglespan .toctogglelabel:after {
     -webkit-transform:rotate(180deg);
     transform:rotate(180deg);
}
.post-body ol.point2 {
     padding-top:10px;
}
:target::before {
     content:"";
     display:block;
     height:60px;
     margin-top:-60px;
     visibility:hidden;
}
@media screen and (max-width:480px) {
.post-body .tableOfContent {
     font-size:15px;
}
}

Keterangan: Silahkan sesuaikan kode yang disorot dengan lebar sidebar Anda, atau hapus.

Step 2

Kemudian, taruh script ini diatas kode </head>


<script type='text/javascript'>
    //<![CDATA[
      function tockeren(){
       var a=1,b=0,c="";
       document.getElementById("postMiddle").innerHTML=document.getElementById("postMiddle").innerHTML.replace(/<h([d]).*?>(n.*?|.*?)</h([d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#'+f.replace(/[^a-z0-9]/gi," ").trim().replace(/s/g,"_")+'" title="'+f+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='"+f.replace(/[^a-z0-9]/gi," ").trim().replace(/s/g,"_")+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("tocContent").innerHTML+=c}
    //]]>
</script>

Step 3

Terakhir, cari dan ganti kode <data:post.body/> dengan script dibawah ini.


<div id='body-post-it'>
<div id='postMiddle'>
<div class='tableOfContent'>
  <input aria-label='Daftar Isi' class='toctoggle' id='toctoggle' role='button' type='checkbox'/>
  <span class='toctogglespan'><label class='toctogglelabel' for='toctoggle'/></span>
  <div id='tocContent'/>
</div>
<data:post.body/>
<script>tockeren();</script>
</div>

Biasanya, kode <data:post.body/> terdapat 3 - 4 buah, tergantung template masing-masing. Namun, kalian bisa memasangnya di posisi paling akhir.

Penutup

Dengan cara membuat TOC otomatis atau manual di Blogger, Sobat akan menerima banyak manfaat sekaligus membantu pengunjung melihat gambaran tentang artikel Anda.

Belum ada Komentar untuk "Cara Membuat TOC"

Posting Komentar

Langganan: Posting Komentar (Atom)