Cara Membuat Daftar Isi Di Dalam Postingan / Artikel Blog - UTAMA RIZKY

Blog Yang Ditujukan Untuk Berbagi Informasi dan Ilmu Pengetahuan

Tuesday, December 1, 2020

Cara Membuat Daftar Isi Di Dalam Postingan / Artikel Blog


Daftar Isi Di Dalam Postingan




Hai, Sahabat. . Hari ini, saya akan membagikan cara mfbuat daftar isi di dalam postingan atau artikel blog agar para pengunjung mengetahui poin-poin penting dari postingan atau artikel kita.



Daftar Isi
  1. Apa itu Daftar Isi Posthngan
  2. Manfaat Daftar Isi Di Dalam Postingan / Artikel
  3. Cara Membuat Daftar Isi Di Dalam Postingan atau Artikel Blog
  4. Pemasangan Daftar Isi Pada Postingan / Artikel Blog
  5. Catatan


Apa itu Daftar Isi Postingan?


Daftar isi postingan adalah daftar link yang (umumnya) ditempatkan di bagian awal postingan yang mengarah ke bagian-bagian atau poin penting dari pembahasan. Untuk contoh, lihat 'daftar isi di dalam postingan / artikel blog', kamu bisa lihat di bagian atas postingan ini.



Manfaat Daftar Isi Di Dalam Postingan / Artikel


Daftar isi di dalam postingan atau artikel blog memiliki manfaat memudahkan pembaca dalam menjelajahi dan memahami poin-poin dalam postingan. Selain itu, pembuatan daftar isi pada postingan / artikel 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 atau artikel tersebut. Hal ini tentunya juga akan meningkatkan daya tarik awal yang baik, terlebih lagi jika apa yang kamu 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 atau artikel kamu terlihat lebih menarik dan profesional.



Cara Membuat Daftar Isi Di Dalam Postingan atau Artikel Blog


Masih merujuk pada pengertian daftar isi postingan di atas, ini adalah link yang mengarah ke bagian-bagian tertentu dari postingan atau artikel. Dalam hal ini, poin penting yang harus kamu ketahui adalah bagaimana cara membuat sebuah link yang mengarah ke bagian tertentu dari postingan atau artikel kamu. Adapun secara garis besar, proses pembuatan link ini adalah sebagai berikut:


  1. Memberikan ID unik pada elemen
  2. Langkah 1, Cara membuat daftar isi di dakam postingan / artikel blog, adalah Memberikan ID Unik pada poin-poin penting yang ada di dalam postingan / artikel blog. Hal tersebut dilakukan dengan cara mengalihkan "Mode Menulis" ke "Mode HTML" pada antarmuka pembuatan postingan. Kemudian berikan ID unik pada elemen atau poin penting yang hendak dijadikan target link daftar isi (di dalam contoh ini adalah setiap elemen heading h2). Berikut adalah contoh tag HTML sebelum dan setelah diberikan atribut ID unik.



    Tag H2 tanpa ID daftar isi.


    <h2>Text</h2>

    Tag H2 dengan ID daftar isi


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

    Hal penting yang harus kamu ketahui dalam membuat daftar isi di dalam postingan / artikel blog adalah ID harus bersifat unik. Dengan kata lain, setiap ID harus berbeda dengan ID lainnya (dalam satu halaman). Kamu bisa membuat ID untuk kebutuhan daftar isi ini dengan format yang konsisten, seperti misalnya daftarisi-1, daftarisi-2, dan seterusnya. Pemberian ID daftar isi tidak hanya terbatas pada elemen h2 saja, kamu bisa memberikan ID pada semua elemen HTML, baik itu h3, div, img, dan lain sebagainya.



  3. Membuat link yang mengarah pada elemen dengan ID unik
  4. Langkah 2, Cara membuat daftar isi di dalam postingan / artikel blog, adalah Membuat link yang mengarah pada elemen dengan ID unik. Selanjutnya, setelah setiap elemen yang dikehendaki telah memiliki ID, 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.



    Link dengan anchor.

    <a href​=​'​#daftarisi-1​'​>​Text​</​a​>


Pemasangan Daftar Isi Pada Postingan / Artikel Blog


Sampai di sini, mungkin kamu telah mengetahui bagaimana cara membuat link yang mengarah ke bagian tertentu. Selanjutnya, anda tinggal meletakkan daftar link daftar isi yang kamu buat di bagian atas postingan (atau dimanapun sesuai keinginan). Agar tampilan link adalah berupa daftar, kamu bisa membuat daftar isi postingan ini dengan menggunakan elemen ol atau ul.



Contoh kode HTML untuk pembuatan daftar isi postingan (kamu bisa meletakkannya di atas artikel.



<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 (pada mode HTML). Letakkanlah kode yang telah diformat seperti di atas pada bagian manapun yang kamu kehendaki, dalam hal ini, saya meletakkan daftar isi ini dibagian paling atas postingan. Tampilan daftar isi dengan HTML di atas akan mengikuti style CSS pada tema kamu.



Catatan


Berikut adalah beberapa catatan terkait pembuatan daftar isi di dakam postingan atar blog.



Buat ID daftar isi postingan / artikel dengan format yang konsisten. Misal daftarisi-1, daftarisi-2, daftarisi-3 dan seterusnya. Terkait pembuatan ID, untuk kamu yang masih belum begitu mengenal bahasa HTML, kamu mungkin bingung tentang apa yang dimaksud dengan ID Unik. Dalam hal ini, suatu ID harus berbeda dengan ID lainnya pada halaman atau postingan yang sama. Dengan kata lain, kamu hanya bisa menggunakan nama ID tertentu sebanyak satu kali dalam 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-1 dan daftarisi-2, untuk postingan yang akan anda terbitkan selanjutnya, kamu tetap bisa menggunakan ID daftarisi-1 dan daftarisi-2. Ya, sifat unik ini hanya berlaku per halaman/postingan (bukan per blog).



Lihat juga

No comments:

Post a Comment

Tulis Komentar Di Sini