Cara Membuat Daftar Isi di dalam Artikel Blog

Daftar isi [Tampil]

Pada artikel ini saya ingin memberikan cara membuat Daftar Isi di dalam Postingan atau Artikel Blog. Cara ini adalah dengan mengarahkan link yang mengarah ke bagian-bagian tertentu (pada halaman yang sama).

Pengertian Daftar isi postingan

Daftar isi postingan adalah daftar link yang (umumnya) ditempatkan di bagian awal postingan/artikel yang mengarah ke bagian-bagian/poin pembahasan tertentu. Untuk contoh, lihat pada postingan berikut👉 What OnlinePreneur ???

Daftar Isi di dalam Postingan atau Artikel Blog bermamfaat selain akan memudahkan pembaca dalam menjelajahi dan memahami poin-poin dalam postingan, pembuatan daftar isi pada postingan juga akan meningkatkan daya tarik awal kepada pembaca. Ya, dengan menampilkan poin-poin penting pada daftar isi, pembaca dapat dengan mudah mengetahui hal apa saja yang akan dibahas di dalam postingan tersebut.

Hal ini tentunya juga akan meningkatkan daya tarik awal yang baik, terlebih lagi jika apa yang anda sampaikan pada daftar isi merupakan poin-poin yang memang dicari oleh pembaca. Selain manfaat diatas, pembuatan daftar isi ini juga akan memungkinkan postingan tampil lebih menarik di hasil penelusuran mesin pencari. Untuk beberapa kasus, mesin pencari google akan menampilkan daftar isi ini pada hasil pencarian. Hal ini secara bersamaan akan membuat postingan anda terlihat lebih menarik dan profesional.

Catatan: Pada halaman ini, anda akan menjumpai beberapa hal terkait coding HTML. 

Untuk sekarang, blog BangRizkyW.com ini masih belum menerbitkan materi seputar coding. Beberapa hal mungkin tidak dijelaskan secara mendalam. Untuk itu, manfaatkan pencarian google terkait hal apapun yang anda butuhkan.

Dalam hal ini, poin penting yang harus anda ketahui adalah bagaimana cara membuat sebuah link yang mengarah pada bagian tertentu. Adapun secara garis besar, proses pembuatan link ini adalah sebagai berikut:

1. Memberikan ID unik pada tag elemen yang hendak disertakan pada daftar isi.

Pada antarmuka pembuatan postingan, beralih ke mode HTML dan berikan code tag h2 beserta ID unik pada elemen yang hendak dijadikan target pada link daftar isi. silahkan Copy kode di bawah yang sudah di sediakan dan pastekan ke dalam postingan tadi

<h2 id='daftarisi-1'>Text</h2>

Hal penting yang harus anda ketahui adalah ID harus bersifat unik. Dengan kata lain, setiap ID harus berbeda dengan ID lainnya (dalam satu halaman). Anda bisa membuat ID untuk kebutuhan daftar isi ini dengan format yang konsisten, seperti misalnya daftarisi-1, daftarisi-2, dan seterusnya.

Pemberian ID tidak hanya terbatas pada tag h2 saja, anda bisa memberikan ID pada semua tag HTML, baik itu div, img, dan lain sebagainya.

Setelah setiap elemen yang dikehendaki telah memiliki ID unik, buat link dengan URL tujuan yang mengarah pada elemen tersebut. Adapun pembuatan link jenis ini dilakukan dengan cara mengisi URL tujuan dengan anchor berupa ID elemen yang dikehendaki. Lebih jauh tentang URL dan bagian-bagian URL bisa anda baca pada halaman: Pengertian dan bagian-bagian URL

2. Pemasangan daftar isi pada postingan

Sampai paragraf ini, anda telah mengetahui bagaimana cara membuat link yang mengarah ke bagian tertentu. Selanjutnya, anda tinggal meletakkan daftar link yang anda buat dibagian atas postingan (atau dimanapun sesuai keinginan).

Agar tampilan link adalah berupa daftar, Anda bisa mendefinisikan daftar isi ini dengan menggunakan elemen ol atau ul. silahkan Copy kode di bawah yang sudah di sediakan dan pastekan ke dalam postingan tadi

<ol>
<li><a href='#daftarisi-1'>Text</a></li>
<li><a href='#daftarisi-2'>Text</a></li>
<li><a href='#daftarisi-3'>Text</a></li>
</ol>

Pada antarmuka pembuatan postingan, beralih ke mode HTML. Letakkan kode yang telah diformat seperti diatas pada bagian manapun yang anda kehendaki, dalam hal ini, saya meletakkan daftar isi ini dibagian paling atas postingan. Tampilan daftar isi dengan HTML diatas akan mengikuti style CSS pada tema anda.

Penting ...!

Ketika HTML daftar isi telah dibuat seperti gambar diatas (melalui mode HTML), jika anda beralih ke mode Compose, sistem blogger akan secara otomatis menambahkan path URL dengan URL dashboard blog anda. Dalam kasus ini, URL link yang tadinya hanya berupa #namaid akan berubah menjadi url-dashboard#namaid. Kurang lebih seperti berikut:

<a href='https://www.blogger.com/blogger.g?blogID=123123123123123#namaid'>Text</a>

Karena perubahan ini, sudah pasti daftar isi tidak akan bekerja. Oleh karena itu, proses pembuatan daftar isi ini sebaiknya dilakukan pada tahap akhir dan pastikan anda menerbitkan postingan anda pada saat anda dalam antarmuka mode HTML. Berikut adalah beberapa informasi dan tips lainnya terkait pembuatan daftar isi:

• Tips: Definisikan ID dengan format yang konsisten untuk setiap bagian yang hendak disertakan pada daftar isi. Misal daftarisi-1, daftarisi-2, daftarisi-3 dan seterusnya. 
• Info: Terkait pendefinisian ID, untuk anda yang masih belum begitu mengenal bahasa HTML, anda mungkin bingung tentang apa yang dimaksud dengan ID Unik. Dalam hal ini, sautu ID harus berbeda dengan ID lainnya pada halaman atau postingan yang sama. Dengan kata lain, anda hanya bisa menggunakan nama ID tertentu sebanyak satu kalidalam satu postingan. Hal yang perlu diketahui disini adalah ruang lingkup unik ini hanya berlaku per-halaman. Saya misalkan jika pada suatu postingan anda mendefinisikan ID dengan nama daftarisi-1dan daftarisi-2, untuk postingan yang akan anda terbitkan selanjutnya, anda tetap bisa menggunakan ID daftarisi-1 dan daftarisi-2. Ya, sifat unik ini hanya berlaku per-halaman (bukan semua halaman). 
• Tips: Untuk lebih mudahnya, anda bisa menyertakan format penulisan HTML daftar isi diatas pada Template Entri. 

Mudah-mudahan share kali ini ada manfaatnya kalau tidak ada baiknya mohon jangan diambil. demikianlah postingan tentang Cara Membuat Daftar Isi di dalam Artikel Blog yang bisa saya sampaikan semoga bisa menambah pengetahuan anda, mungkin ada tambahan dari kamu sekalian? kalau ada silahkan isi di kolom komentar jangan lupa juga berikan sebuah saran  .

Sumber:zee.gl/Z11OC moderator: bangrizkyw

Berbagi :