Header Ads

MEMBUAT TABLE OF CONTENT PADA WORDPRESS TANPA PLUGINS DAN BLOGSPOT



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 rinician 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.


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.

Download Full Script