Cara Membuat Daftar Isi di dalam Postingan / Artikel Blog

Daftar Isi :

• Pengertian Daftar Isi
• Tujuan Membuat Daftar Isi Pada Artikel Blog
• Cara Membuat Daftar Isi Di Dalam Postingan
• Pemasangan daftar isi pada postingan
• Catatan Penting
• Penutup

1. Pengertian Daftar Isi

Daftar isi atau table of content (TOC) yaitu sebuah daftar link yang biasa seorang blogger letakan di awal postingan / artikel untuk mengarahkan ke bagian-bagian / pokok pembahasan tertentu.

2. Tujuan Membuat Daftar Isi Pada Artikel Blog

Tujuan dari memberikan daftar isi pada postingan / artikel di blog adalah untuk memudahkan pembaca dalam menjelajahi serta memahami apa yang kita tulis di blog.

Ketika seorang pembaca menginginkan informasi namun tidak ingin membaca seluruh artikel yang kita buat melainkan hanya ingin mengambil poin-poin tertentu maka daftar isi sangat membantu bagi mereka agar tidak merepotkan harus scroll atas dan bawah.

Dengan demikian dapat meningkatkan daya tarik pembaca untuk berkunjung kembali di blog kita, karena kemudahan informasi yang di sajikan di setiap postingan / artikel yang kita buat.

Selain memudahkan pembaca dalam mencari informasi, blog yang memberikan daftar isi di setiap postingan / artikel yang di tulis, akan sangat di sukai oleh mesin pencari (search engine) seperti Google, sehingga mereka memperlakukan postingan / artikel kita lebih istimewa.

Contoh kasusnya seperti ini teman-teman : ketika ada seseorang yang mencari informasi semisal tentang "cara membuat daftar isi di artikel blog" dan kebetulan artikel kita muncul menjadi salah satunya di antara artikel yang lainya, hal ini memungkinkan postingan yang kita buat tampil lebih menarik di hasil penelusuran mesin pencari karena di beberapa kasus mesin pencari google akan menampilkan daftar isi pada hasil pencariannya. Dan ini akan membuat postingan kita terlihat lebih menarik dan profesional. Seperti berikut contoh dari artikel yang menampilkan daftar isi di hasil pencarian google :

3. Cara Membuat Daftar Isi Di Dalam Postingan

Seperti yang sudah saya jelaskan di atas, daftar isi adalah sebuah daftar link yang ada dalam satu halaman postingan yang dapat mengarah kepada bagian atau poin tertetntu. Nah.. untuk membuat daftar isi hal yang perlu di perhatikan ialah sebagai berikut :

Langkah 1: memberikan ID unik pada elemen

Dalam proses pembuatan postingan biasanya kita menggunakan mode Compose, jika teman-teman ingin menambahkan daftar isi pada postingan yang di buat silahkan beralih ke mode HTML dan berikan ID unik pada elemen yang ingin dijadikan target pada link daftar isi. (pada contoh ini saya aplikasikan pada semua elemen heading 1). Berikut adalah contoh tag HTML sebelum dan setelah diberikan atribut ID.

Sebelum :

<h1>Pokok Pembahasan 1</h1>

Sesudah :

<h1 id="daftarisi-1">Pokok Pembahasan 1</h1>

Perlu di inget, bahwa pemberian ID juga bisa di berikan pada elemen lainya seperti div, img dan seterusnya. Setiap ID yang di buat itu sifat nya harus unik dan tidak di gunakan berulang, jika pada contoh di atas ditulis daftarisi-1 maka selanjutnya bisa di tulis daftarisi-2 , daftarisi-3 , daftarisi-4 .

Langkah 2: Membuat link yang mengarah pada elemen dengan ID tertentu

Selanjutnya, setelah setiap elemen yang di inginkan sudah memiliki ID unik, tinggal sekarang buat link dengan URL tujuan yang mengarah pada elemen tersebut menggunakan tag anchor <a> dengan nilai nya yaitu ID elemen yang dikehendaki. Berikut contoh penulisan HTML nya :

<a href="#daftarisi-1">Pokok pembahasan 1</a>

Penulisan URL di awali dengan tanda pagar (#) kemudian di ikuti dengan ID yang di kehendaki.

4. Pemasangan daftar isi pada postingan

Pada proses di atas teman-teman sudah mengetahui bagaimana cara membuat link yang mengarah pada bagian tertentu, Sekarang mari kita lihat langkah selengkapnya :

Agar link yang kita buat menjadi daftar kita perlu menggunkan elemen ul dan li. Lihat penulisannya di bawah ini :

<b>Daftar Isi :</b><br />
<ul>
<li><a href="#daftarisi-1">Pokok pembahasan 1</a></li>
<li><a href="#daftarisi-2">Pokok pembahasan 2</a></li>
<li><a href="#daftarisi-3">Pokok pembahasan 3</a></li>
</ul>

Jika teman-teman sudah selesai menulis artikel, baru kemudian buat daftar isi dengan cara beralih dari mode Compose ke mode HTML kemudian letakan kode di atas pada bagian tertentu pada postingan / artikel. Untuk selengkapnya bisa lihat gambar berikut ini :

Berikut contoh kode selengkapnya untuk membuat daftar isi di postingan / artikel blog :

<b>Daftar Isi :</b><br />
<ul>
<li><a href="#daftarisi-1">Pokok pembahasan 1</a></li>
<li><a href="#daftarisi-2">Pokok pembahasan 2</a></li>
<li><a href="#daftarisi-3">Pokok pembahasan 3</a></li>
</ul>

<br />
<br />

<h1 id="daftarisi-1">Pokok Pembahasan 1</h1>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril. Delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

<br />
<br />

<h1 id="daftarisi-2">Pokok Pembahasan 2</h1>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<br />
<br />

<h1 id="daftarisi-3">Pokok Pembahasan 3</h1>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Silahkan copy kode di atas lalu buka HTML online kemudian paste kan, untuk melihat demo nya.

5. Catatan Penting

Usahakan menulis lengkap isi artikel terlebih dahulu baru kemudian menembahkan kode HTML daftar isi dengan cara beralih ke mode HTML, jika teman-teman sudah ada di mode HTML jangan beralih kembali ke mode Compose, ini di karenakan sistem blogger akan secara otomatis menambahkan path URL dengan URL dashboard blog kalian. Pada contoh kasus ini, URL link yang tadinya hanya berupa #namaid akan berubah menjadi url-dashboard#namaid. Contohnya seperti berikut :

<a href="https://www.blogger.com/blogger.g?blogID=7894333152787373029#isi-1">

Apabila hal tersebut terjadi maka daftar isi tidak dapat berfungsi sebagai mana mestinya. Jadi usahakan pembuatan daftar isi dilakukan setelah tahap akhir postingan di buat dan mepublikasikan dalam mode HTML.

6. Akhir Kata

Untuk hasilnya, bisa lihat daftar isi di postingan ini. Demikian informasi yang dapat saya sampaikan di kesempatan ini, mudah-mudahan berguna dan bermanfaat. Sampai jumpa di pertemuan selanjutnya.

Incoming Search Terms

cara membuat daftar isi artikel blogspot, Cara Membuat Daftar Isi Seperti Table of Contents (TOC) Wikipedia, cara membuat daftar isi di postingan blog, cara membuat daftar isi blog keren, cara membuat daftar isi di artikel blogger, cara membuat daftar isi blog 2019, cara membuat daftar isi di blog, cara membuat table of content di blog, cara membuat daftar isi di postingan wordpress, cara membuat daftar isi di tengah artikel, Membuat Daftar Isi Otomatis Di Blog, buat daftar isi di artikel blog simpel.

Ngoding Tah ?

Manusia Kalem Yang Senang Ber-exsperimen.

Share this post