Cara Membuat Daftar Isi Di Dalam Postingan / Artikel Blog

Cara Membuat Daftar Isi Di Dalam Postingan / Artikel Blog

Cara Membuat Daftar Isi Di Dalam Postingan / Artikel Blog
Cara Membuat Daftar Isi Di Dalam Postingan / Artikel Blog



Apa itu daftar isi postingan ?

Cara Membuat Daftar isi di Blog, Daftar isi postingan adalah daftar link yang pada (umumnya) ditempatkan di bagian awal postingan yang mengarah ke bagian-bagian atau poin pembahasan tertentu. Untuk contohnya kalian bisa lihat daftar isi dibagian atas postingan ini.

Selain akan memudahkan para pembaca dalam menjelajahi dan memahami poin-poin dalam postingan atau artikel yang dibuat, pembuatan daftar isi pada postingan juga akan meningkatkan daya tarik awal kepada pembaca atau pengunjung blog. 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 yang kalian buat. Hal ini tentunya juga akan meningkatkan daya tarik awal yang baik, terlebih lagi jika apa yang kalian sampaikan pada daftar isi merupakan poin-poin yang memang dicari oleh para pembaca.

Selain manfaat diatas, pembuatan daftar isi ini juga akan memungkinkan postingan tampil lebih menarik di hasil penelusuran mesin pencari atau biasa disebut teknik SEO. Untuk beberapa kasus, search engine google akan menampilkan daftar isi ini pada hasil pencarian. Hal ini secara bersamaan akan membuat postingan kalian terlihat lebih menarik dan profesional.

Contoh Daftar Isi Postingan di Search Engine

Cara membuat daftar isi di dalam postingan

Masih merujuk pada pengertian daftar isi postingan diatas yang sebelumnya sudah dibahas, ini adalah link yang mengarah ke bagian-bagian poin tertentu. Dalam hal ini, poin penting yang harus kalian ketahui adalah bagaimana cara membuat sebuah link yang mengarah ke bagian tertentu. Adapun secara garis besar, proses pembuatan link ini adalah sebagai berikut:

  1. Langkah 1:
  2. Berikan ID unik pada tag pembungkus untuk elemen yang hendak disertakan pada daftar isi postingan.

  3. Langkah 2:
  4. Buat link dengan URL tujuan yang mengandung Anchor dengan nama ID elemen yang telah didefinisikan pada langkah sebelumnya.
Untuk lebih mudahnya, disini admin demokan format postingan atau artikel yang akan dibuat adalah sebagai berikut:



Pada contoh diatas, link pada daftar isi diarahkan pada setiap elemen heading h4 ( ini tergantung ya kalau kalian h2, h1 dll, sesuaikan saja, yang penting di poin nya menaruh ID nya ).

1.1  Memberikan ID unik pada elemen

Pada antarmuka dalam membuat postingan atau artikel, beralih ke mode HTML dan berikan ID unik pada elemen yang hendak dijadikan target link daftar isi (dalam contoh ini adalah setiap elemen heading h4). Berikut adalah contoh tag HTML  setelah diberikan atribut ID.

<h4 id='toc-1'>Text</h4>


Pemberian ID Unik


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

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

1.2 Membuat link yang mengarah pada elemen dengan ID tertentu

Selanjutnya, setelah setiap elemen yang dikehendaki telah memiliki suatu ID yang unik, buat link dengan URL tujuan yang mengarah pada elemen atau poin tersebut. Adapun pembuatan link jenis ini dilakukan dengan cara mengisi URL tujuan dengan anchor berupa ID elemen yang dikehendaki.

<a href='#toc-1'>Text</a>

Pemasangan daftar isi pada postingan

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

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


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

Catatan!
Apabila tidak muncul dan terjadi error, ini admin berikan code lengkap daftar isi style yang admin gunakan.

<div class="daftar-isi">
<div id="isi-judul" class="isi-judul" onclick="if (document.getElementById('isi-content').style.display === 'none'){ document.getElementById('isi-content').style.display = 'block';} else {document.getElementById('isi-content').style.display = 'none';}" role="button" tabindex="0">Daftar isi</div>
<div id="isi-content" class="isi-content" style="display: block;">
<ol>
<li><a href="#toc-1">Pengertian</a></li>
<li><a href="#toc-2">Fungsi / Kegunaan</a></li>
<li><a href="#toc-3">Tutorial Pemasangan</a><ul>
<li><a href="#toc-3a">Memasang Kode CSS</a></li>
<li><a href="#toc-3b">Memasang Kode HTML</a></li>
</ul>
</li>
<li><a href="#toc-4">Penutup</a></li>
</ol>
</div>
</div>



Perhatian!
Ketika HTML daftar isi telah dibuat seperti gambar diatas (melalui mode HTML), jika kalian beralih ke mode Compose, sistem blogger akan secara otomatis menambahkan path URL dengan URL dashboard blog kalian. 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 postingan kalian tidak akan bekerja. Oleh karena itu, proses pembuatan daftar isi ini sebaiknya dilakukan pada tahap akhir dan pastikan kalian menerbitkan postingan kalian pada saat kalian dalam antarmuka mode HTML.

 Berikut adalah beberapa informasi dan tips dan tambahan lainnya terkait pembuatan daftar isi :
  • Tip :
  • Definisikan ID dengan format yang konsisten. Misal toc-1, toc-2, toc-3 dan seterusnya.

  • Info :
  • Terkait pendefinisian ID, untuk kalian yang masih belum begitu mengenal bahasa HTML, kalian 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, kalian 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. Admin misalkan jika pada suatu postingan kalian  mendefinisikan ID dengan nama toc-1 dan toc-2, untuk postingan yang akan kalian terbitkan selanjutnya, kalian tetap bisa menggunakan ID toc-1 dan toc-2. Ya, sifat unik ini hanya berlaku per halaman / postingan / artikel (bukan per blog).

  • Tambahan :
  • Untuk lebih bagus tampilannya atau ingin mengikuti style daftar isi postingan admin, kalian bisa mengcopy code CSS dibawah ini kemudian kalian masuk ke mode Edit HTML dan kalian letakkan sebelum baris kode </b:skin>

*/ CSS Daftar isi By RuangCoder.com */

.Blog .daftar-isi{border-top:1px solid rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.05);padding:25px 15px;margin:30px 0;font-size:14px}
.Blog .daftar-isi .isi-judul{outline:0;font-weight:700;display:flex;cursor:pointer}
.Blog .daftar-isi .isi-judul:after{content:'Sembunyikan';font-weight:400;font-size:12px;margin-left:auto}
.Blog .daftar-isi .isi-content{}
.Blog .daftar-isi .isi-content ol{counter-reset:daftar-count;margin-bottom:0;padding:0;list-style:none}
.Blog .daftar-isi .isi-content ol ol{width:100%;margin-left:25px}
.Blog .daftar-isi .isi-content ol li{display:flex;align-items:flex-start;flex-wrap:wrap}
.Blog .daftar-isi .isi-content ol li a{display:inline-block;max-width:calc(100% - 20px)}
.Blog .daftar-isi .isi-content li ul li a{max-width:none}
.Blog .daftar-isi .isi-content ol li:before{content:counter(daftar-count) '.';counter-increment:daftar-count;min-width:20px;color:#505050;flex-shrink:0}
.Blog .daftar-isi .isi-content ol ul{width:100%;padding-left:45px}
.Blog .daftar-isi .isi-content ol ul li{display:list-item}
.Blog .daftar-isi .isi-content ol ul li:before{display:none}
.Blog .daftar-isi .isi-content ul{margin-bottom:0;padding-left:20px}
.Blog .daftar-isi .isi-input:checked + .isi-judul + .isi-content{display:none}
.Blog .daftar-isi .isi-input:checked + .isi-judul:after{content:'Tampilkan'}

Penutup

Semoga artikel tentang cara membuat daftar isi postingan di blog bermanfaat buat kalian semua dan jika kalian mengalami kesusahan ataupun masih bingung silahkan tinggalkan pertanyaan di kolom komentar ya, sampai jumpa di artikel selanjutnya kawan.

Anda mungkin menyukai postingan ini