Tutorial Memasang Daftar Isi Di Dalam Postingan (Artikel) Blog Wordpress

Selamat datang di blog portal sumut, blog yang kata orang baik adalah blog yang artikel-artikelnya informatif dan bermanfaat. Apa iya?

Mungkin anda adalah salah satu blogger yang sering mengunjungi blog yang artikel ataupun postingannya terdapat daftar isi. Dimana ketika mengklik salah satu judul yang terdapat di daftar isi, secara otomatis pindah (bergeser) ke paragraf yang membahas topik yang dimaksud di daftar isi tersebut.

Konsep daftar isi ini digadang-gadang dapat membantu pengunjung (pembaca) ke posisi paragraf yang dinilai bermanfaat bagi pengunjung, sesuai keinginannya.

Agar prosedurnya berjalan sempurna, kode dasar pembuatan daftar isi ini harus anda pahami dengan benar. Jika sebuah buku daftar isi mengunakan nomer sebagai petunjuk nomer halaman. Tapi tidak sama dengan daftar isi di postingan daftar isi di postingan mengunakan hiperlink untuk menuju halaman yang ingin di baca atau di tuju.

Contoh Pembuatan Daftar Isi TOC (Table of content):

1.cara satu

2.cara dua

3.cara tiga

4.cara empat

5.cara lima

Berikut adalah contoh link yang akan penulis buat seperti contoh di atas dari bahasan satu sampai lima.

<a href=”#link postingan”>cara satu</a>

<a href=”#link postingan”>cara dua</a>

 <a href=”#link postingan”>cara tiga</a>

 <a href=”#link postingan”>cara empat</a>

 <a href=”#link postingan”>cara lima</a>

Selanjutnya, pada bagian poin ini anda harus menautkan id untuk sub sub yang ingin di tuju.

Sebagai contoh id tujuan seperti di bawah ini:

<h2 id=”#cara satu”>cara satu</h2>

pengertian cara satu di sini

<h2 id=”#cara dua”>cara dua</h2>

pengertian cara dua disini

<h2 id=”#cara tiga”>cara tiga</h2>

pengertian cara tiga disini

<h2 id=”#cara empat”>cara empat</h2>

pengertian cara empat disini

 <h2 id=”#cara lima”>cara lima</h2>

Pengertian cara satu-lima disini penting. url postingan sebaiknya memakai url/link setelah postingan anda di publikasikan agar url berfungsi dan harus sama penulisan untuk id agar bisa berfungsi sempurna seperti contoh di atas tadi.

Nah, bagaimana menerapkan konsep daftar isi ini di postingan (artikel) blog anda? Berikut ulasannya.

Langkah-langkah memasang daftar isi di postingan blog anda;

• Masuk (log in) terlebih dahulu di blog milik anda
• Masuk ke 'new post' (artikel/postingan baru), tempat seperti biasa anda menulis postingan.
• Pilih kategori html, bukan compose
• Salin (copy) skript kode di bawah ini, ubah skript kode (tulisan) yang berwarna.

Warna merah adalah link url postingan anda dan seperti yang saya katakan di atas agar link nya berfungsi dengan sempurna sebaik nya memakai url setelah postingan anda di publikasikan.

Warna biru adalah id untuk tujuan

Warna hijau dalah judul tujuan

<div class=”DIP-wrap-tbl”>
<table id=”DIP”>
<thead>
<tr>
<th align=”center” colspan=”3″>DAFTAR ISI</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr class=”odd”>
<td class=”DIP-no” valign=”top”></td>
<td class=”DIP-name” colspan=”2″ valign=”top”><a href=”link postingan#ID tujuan-1“>judul ujuan 1</a><a href=”link postingan#DIP-1″></a></td></tr>
<tr class=”odd”>
<td class=”DIP-no” valign=”top”></td>
<td class=”DIP-name” colspan=”2″ valign=”top”><a href=”link postingan#ID tujuan-2“>judul ujuan 2</a><a href=”link postingan#DIP-1″></a></td></tr>
<tr class=”odd”>
<td class=”DIP-no” valign=”top”></td>
<td class=”DIP-name” colspan=”2″ valign=”top”><a href=”link postingan#ID tujuan-3“>judul ujuan 3</a><a href=”link postingan#DIP-1″></a></td></tr>
<tr class=”odd”>
<td class=”DIP-no” valign=”top”></td>
<td class=”DIP-name” colspan=”2″ valign=”top”><a href=”link postingan#ID tujuan-4“>judul ujuan 4</a></td></tr>
</tbody>
</table>
</div>

• Setelah disalin dan diganti skript kode (tulisan) yang berwarna, pindahkan (paste) skript kode diatas ke 'new post mode html.
• Salin skript kode di bawah ini untuk daftar isi, kemudian paste di new post mode html.

<div>
<br /></div>
<h2 id=”daftar isi-1“>
daftar isi</h2>

• Anda dapat bebas meletakkan posisi daftar isi ini di mana saja. Biasanya daftar isi berada di seperempat artikel/postingan anda.
• Kemudian ubah mode html menjadi compose pada 'new post', kemudian tuliskan artikel yang ingin anda posting.
• Untuk memasang kode cssnya, salin skirpt kode di bawah ini dan paste di atas kode ]]></b:skin>

/* CSS Daftar Isi start */
@media screen and (min-width:481px){.DIP-wrap {width:250px;}}
@media screen and (max-width:480px){.DIP-wrap {width:100%;}}@media screen and (min-width:481px){.DIP-name {width:250px;}}
@media screen and (max-width:480px){.DIP-name {width:480px;}}
@media screen and (max-width:320px){.DIP-name {width:320px;}}
@media screen and (max-width:240px){.DIP-name {width:240px;}}
.DIP-no {width:1px;}
.DIP-wrap-tbl {float:left; margin-right:10px; margin-bottom:10px;}
.DIP-wrap-tbl a {text-decoration:none;}
#DIP {margin:0px; text-align: left; border-collapse: collapse;}
#DIP th {background: #3399FF; padding: 8px;  font-weight: bold; font-size:16px; color: #FFF;}
#DIP tr.odd td {padding: 5px; background: #fff; border-top: 1px solid #dde8f0; color: #669;}
#DIP tr.even td {padding: 5px; background: #3399FF; border-top: 1px solid #dde8f0; color: #669;}
#DIP tbody tr:hover td {background: #3399FF;}
/* CSS Daftar Isi end */

Dengan ini anda telah berhasil membuat daftar isi otomatis skrol di dalam postingan anda pada blog wordpress.

Demikian tulisan kali ini, semoga informasi yang disampaikan dapat bermanfaay bagi anda khusunya blogger pemula. Terakhir, selamat mencoba dan #salamprofit.

Bagikan Artikel ini