Table of Contents atau Daftar isi akan memberikan kemudahan bagi pembaca untuk mendapatkan poin penting dari sebuah artikel yang sedang dibaca.Pembuka
Table of Contents alias Daftar isi adalah daftar rincian pada sebuah artikel, contohnya seperti dibawah ini. Secara singkat Table of Contents akan menampilkan rincian tentang "apa sih artikel ini" yang dalam bentuk internal link pada bagian-bagian tertentu artikel pada halaman itu terutama, dan bisa juga di aplikasikan antar halaman jika halaman yang kita buat menjadi seperti artikel direktori.Wordpress Table of Content Tanpa Plugins?
Ya, Wordpress Table of Content Tanpa Plugins karena pada dasarnya hanya membutuhkan identity (id) ataupun class sendiri pada CSS untuk bisa menjalankan reciprocal initer-link, gak beda dengan standard a href, jadi buat apa pakai plugins.Tidak semua hal pada Wordpress perlu membutuhkan plugins, saya sendiri jika sebuah fungsi masih bisa dilakukan coding native maka saya akan memilih menggunakan coding native pada theme langsung tanpa membutuhkan install plugins ini - itu selama masih bisa di-handle. Karena penggunaan Plugins juga akan mempengaruhi performa sebuah website berbasis WordPress, apalagi jika menggunakan server sharedhost, akan menambah beban inode (jelas menambah file data) dan RAM.
Dengan coding native didalam theme maka akan mengurangi beban RAM. Ibarat perjalanan dari Jakarta ke Tangerang, tapi Sampeyan memilih melalui Karawang :P
Daftar isi:
Script CSS
/* 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}
HTML Posting Table of Contents list
<div class='toc'>
<input type='checkbox' role='button' id='toctoggle' class='toctoggle'><div class='toctitle'><h2>Table Of Contents</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>
HTML Posting linked content
<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
Aplikasi pada Sources
Script diatas bisa digunakan pada Wordpress selfhost ataupun Blogspot. Aplikasinya pada dasarnya sama saja, yaitu menambahkan CSS pada script base CSS yang terdapat pada sources masing-masing.Pada Wordpress Selfhost
Buka file style.css yang ada pada theme directory, bisa melalui FTP, File manager ataupun langsung dari dashboard Wordpress Theme edit, kemudian kopi dan pastekan Script CSS pada baris terakhir. Simpan.Pada Blogspot
Masuk pada halaman Edit HTML, cari dan temukan ]]></b:skin> atau </style>, kemudian kopi dan pastekan Script CSS pada baris sebelum kode ]]></b:skin> atau </style>. Simpan.Cara Menggunakan
Antara Wordpress selfhost dan Blogspot, pengaplikasian penggunaannya adalah sama, yaitu TIDAK menggunakan Form Posting Composed yang sering juga disebut sebagai WYSIWYG (What You See Is What You Get), maka pilihlah Classic Editor pada Wordpress Post form, dan HTML pada Blogspot dan bukan Composed.Untuk posting list atau daftar pada Table of Contents, kopi dan pastekan HTML Posting Table of Contents list. Kemudian pada setiap paragraph yang harus terkait dengan masing-masing bab tadi kita gunakan script pada HTML Posting linked.
