Panduan Lengkap Membuat TOC di Postingan Blogger Seperti Wikipedia

Panduan Lengkap Membuat TOC di Postingan Blogger Seperti Wikipedia
TOC (Table of Content) atau biasa disebut Daftar isi Postingan Blog ini tidak hanya digunakan untuk pada sebuah makalah saja, tetapi fitur TOC ini juga sering digunakan di beberapa website dan Blog. Salah satu website yang selalu membuat TOC (Table of Content) adalah Wikipedia. Coba sobat ingat kembali atau cobalah buka website wikipedia untuk memastikan apakah benar apa yang sudah mas rinaldo katakan itu ada.

Tidak hanya wikipedia saja yang sudah memakai dan memasang TOC di artikel nya. Situs-situs seperti Niagahoster juga menggunakan untuk postingan Blognya dan contoh TOC di Blogger adalah seperti berikut :

Sekilas Pengertian TOC (Table of Content)

TOC atau sebuah singkatan dari Table of Content adalah sebuah kolom yang berisikan point-point penting dari keseluruhan halaman artikel dengan memberikan fitur hyperlink pada setiap pointnya,  yang berguna untuk memudahkan pengunjung ketika mencari informasi dengan mengklik point yang akan dibaca.

Bagi sobat yang menggunakan platform Wordpress.org mungkin membuat toc di postingan ini akan mudah, karena di wordpress ada Plugin untuk membuat otomatis daftar isi (TOC) di dalam postingan. Tetapi untuk pengguna Platform Blogger bukan berarti tidak bisa membuat Table of content tersebut. Hanya saja sobat harus membuatnya secara manual dengan menambahkan id disetiap Heading dan Sub Heading sebagai ID pemanggil dari untuk Hyperlink di TOC.
Panduan Lengkap Membuat TOC di Postingan Blogger Seperti Wikipedia 1
Tampilan Lompat ke TOC
Gambar di atas adalah salah satu manfaat memasang toc di artikel Blog, ketika pengunjung mengetik suatu kata atau kalimat di mesin pencarian. Maka postingan sobat yang sudah menjadi informatif dengan ada nya TOC dan terindex di Google, akan otomatis memberitahu kepada pengunjung tersebut ada di bagian seperti yang dilingkari berwarna merah.

Cara Membuat Fitur TOC (Table of Content) Dalam Artikel Blogspot

Karena tutorial menambahkan daftar isi otomatis di postingan Blog dan tidak memakai Plugin seperti di Wordpress. Maka sobat nantinya diharuskan menambahkan id Html disetiap heading dan Subheading.

1. Login akun Blogger
2. Masuk ke Menu Tema dan buka menu Edit HTML
3. Copy kode CSS TOC dibawah ini dan Paste sebelum sebelum atau diatas </style>
/* 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:'Hide';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'Hide'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}
Jika template sobat memakai Stikcy Header atau Header Melayang ketika di Scroll. Sobat perlu merubah sedikit CSS diatas, agar ketika salah satu judul Table of Content di klik oleh pengunjung tidak lompat terlalu jauh dari Judul yang di Tuju. Pada kode CSS paling bawah, rubahlah nilai dari Height dan Margin-top di barisan :target::before {content:''; display:block; height:0px; margin-top:0px; menjadi height:50px; margin-top:-50px;

Setelah menambahkan CSS TOC di Blog. Lanjut menambahkan kode HTML table of content di postingan blogger.

1. Buatlah artikel seperti biasa di Menu Postingan
2. Jika sudah selesai membuat postingan.Masuklah ke Mode HTML postingan
3. Disetiap Heading dan Subheading (H1, H2, H3) kalimat seperti berikut :
<h1>kalimat contoh satu</h1>
<h2>kalimat contoh dua</h2>
<h3>kalimat contoh tiga</h3>
<h3>kalimat contoh empat</h3>
<h2>kalimat contoh lima</h2>
 4. Tambahkan Id="toc" disetiap Heading Subheading seperti berikut sebagai element pemanggil:
<h1 id="toc1">kalimat contoh satu</h1>
<h2 id="toc2">kalimat contoh dua</h2>
<h3 id="toc2_1">kalimat contoh tiga</h3>
<h3 id="toc2_2">kalimat contoh empat</h3>
<h2 id="toc3">kalimat contoh lima</h2>

5. Copy kode berikut dan paste pada Mode HTML Postingan diatas Kalimat contoh satu
 <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="kalimat contoh satu">kalimat contoh satu</a></li>
    <li>2 <a href="#toc2" title="kalimat contoh dua">kalimat contoh dua</a>
      <ul>
      <li>2.1 <a href="#toc2_1" title="kalimat contoh tiga">kalimat contoh tiga</a></li>
      <li>2.2 <a href="#toc2_2" title="kalimat contoh empat">kalimat contoh empat</a></li>
      </ul>
    </li>
    <li>3 <a href="#toc3" title="kalimat contoh lima">kalimat contoh lima</a></li>
  </ul>
</div>
Element pemanggil berwarna biru adalah sebagai Heading dan Element pemanggil berwarna kuning adalah sebagai Sub Heading. Sobat bisa menyesuaikan kebutuhan masing-masing untuk setiap Element dan pemanggil. Jika di artikel sobat hanya memiliki dua heading, maka hapuslah element toc lainnya.
Berikut adalah penjelasan menambahkan TOC daftar isi otomatis di artikel Blogger berupa gambar dari mas rinaldo.
Panduan Lengkap Membuat TOC di Postingan Blogger Seperti Wikipedia 2
Contoh Membuat TOC dalam Postingan Blog

Solusi dan Penyebab Error TOC Tidak Berfungsi

1. Sebelum dipublikasikan, cobalah melakukan Pertinjauan
2. Publikasikan Artikel tetap pada Mode HTML
3. Jangan Memberi Line Break pada kode HTML TOC seperti (/* contoh line break */)
4. Jangan sampai ada kode Enter </br> di dalam HTML TOC ketika di publikasikan
5. Pastikan HTML TOC di blogspot sama seperti contoh gambar membuat TOC

Kesimpulan Dari Mas Rinaldo :

Perlu sobat ketahui sebelum membuat Table of Content di Blogspot ini sebaiknya tidak memasangnya disemua artikel. Jika artikel hanya memiliki kosa kata dibawah 300 kata, justru dengan memasang toc ini akan memperburuk artikel itu sendiri dan sebaliknya, jika sobat memiliki kosa kata yang cukup banyak diatas 700 kata lebih, maka TOC ini akan membantu pengunjung dan struktur postingan pun akan semakin bagus.

Demkian artikel mengenai "Panduan Lengkap Membuat TOC di Postingan Blogger Seperti Wikipedia" Dapat membantu sobat meningkatkan kualitas artikel yang sudah di publikasikan.

Artikel Terkait

0Comments

Previous Post Next Post