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 :
Daftar isi
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.
 |
| Tampilan Lompat ke TOC |
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.
 |
| Contoh Membuat TOC dalam Postingan Blog |
Solusi dan Penyebab Error TOC Tidak Berfungsi
1. Sebelum dipublikasikan, cobalah melakukan Pertinjauan2. 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.
Post a Comment