Panduan Mendeley Untuk Pemula Paling Lengkap (2022) Mau Dong

2 Cara Membuat Daftar Isi ala Wordpress dalam Artikel di Blogger

Tutorial membuat table of content dalam artikel untuk mendapatkan sitelink pada hasil pencarian google dengan mudah secara manual.
toc blogger, daftar isi dalam artikel blogger

Moonafic - Dalam artikel ini, Anda akan mempelajari cara membuat table of contents dalam artikel di Blogger. Step-by-step. Caranya sangat mudah dan bisa Anda pahami kurang dari 5 menit

Hasil akhirnya, Anda bisa membuat tampilan artikel situs Anda menjadi seperti ini pada hasil pencarian Google.

contoh jump link, cara membuat jump link blogger, membuat toc blogger
Contents

Mengenal ToC di Blogger

Apa itu ToC (Table of Contents)? ToC adalah sebuah bagian dalam artikel yang memberikan outline atau garis besar topik yang dibahas. Sama seperti daftar isi dalam skripsi.

Berbeda dengan Wordpress yang bisa dibuat dengan mudah menggunakan plugin, proses pembuatan table of contents dalam artikel di Blogger harus dilakukan secara manual.

Manfaat ToC dalam Artikel

  • Dengan memberikan ToC, artikel Anda akan terlihat lebih profesional.
  • Selain itu, Anda juga memberikan keputusan kepada pembaca untuk tetap membaca atau pergi setelah melihat outline artikel Anda. Maka dari itu, ToC Anda harus lengkap dan informatif.
  • Menghemat waktu membaca. Karena dengan sekali klik, pembaca akan langsung dibawa ke bab yang diinginkan, seperti halnya yang dilakukan hyperlink

Struktur URL

Jika Anda pernah membuka artikel yang memiliki Table of Contents seperti di Wikipedia, maka Anda akan menemukan struktur URL yang cukup unik.

Perhatikan contoh berikut:

https://en.wikipedia.org/wiki/Maginot_Line#Ouvrages

Bagian URL yang ditandai merah merupakan heading dalam artikel tersebut.

Dan jika Anda memasukkan URL tersebut pada address bar browser, maka Anda akan langsung diarahkan pada bab "Ouvrages" dalam artikel mengenai Maginot Line tersebut.

Menambah ID Pada Heading

Langkah pertama dalam pembuatan Table of Contents dalam artikel adalah untuk menambahkan "ID" dalam heading artikel

Apa fungsi ID dalam heading ini? Fungsinya adalah sebagai pemberi identitas heading sehingga menjadi URL yang bisa dimuat ke dalam ToC.

Sebagai contoh, berikut adalah tag HTML dari sebuah heading pada umumnya

<h2>Definisi SWOT</h2>
<h2>Contoh SWOT</h2>

Yang harus Anda lakukan selanjutnya adalah memberi ID yang sesuai dengan judul heading Anda. Sebagai contoh:

<h2 id="definisi-swot">Definisi SWOT</h2>
<h2 id="contoh-swot">Contoh SWOT</h2>

Bagian yang diberi highlight merah merupakan ID unik yang akan Anda gunakan sebagai anchor untuk membuat daftar isi dalam artikel di Blogger.

Anda bisa memilih menggunakan ID yang deskriptif atau yang simple. Tergantung preferensi Anda. Yang terpenting adalah Anda tidak melakukan kesalahan ketika menuliskannya di dalam ToC.

Cara Membuat Daftar Isi Dalam Postingan

Setelah selesai memberikan ID pada tiap-tiap heading, sekarang waktunya membuat daftar isi. Posisi daftar isi ini sendiri tergantung selera Anda. Namun umumnya diletakkan setelah paragraf pembuka dari sebuah artikel

  • Step 1 - Pada dashboard penulisan artikel, pilih mode HTML view.
  • Step 2 - Copy dan paste kode berikut ke dalam artikel.
  • <b>Daftar Isi:</b>
       <ol>
       <li><a href='#definisi-swot'>Text</a></li>
       <li><a href='#contoh-swot'>Text</a></li>
       <li><a href='#idheadingketiga'>Text</a></li>
    </ol>
  • Step 3 - Edit ID yang diberi highlight sesuai dengan ID yang telah Anda buat.

Catatan penting - pastikan Anda melakukan "publish" artikel masih dalam keadaan "HTML View" dan jangan sekali-kali menekan tombol "Compose View". Karena nantinya akan merubah kode ToC yang dapat menyebabkan ToC tidak dapat berfungsi sebagaimana mestinya

Menu Daftar Isi Dalam Artikel Dengan Fitur Show/Hide

Alternatif lain untuk daftar isi dalam artikel adalah menu ToC ala Igniel. Dimana ToC ini memiliki fitur unik yaitu fitur show/hide dalam ToC-nya.

Contoh tampilan ToC seperti pada gambar di bawah ini:

membuat daftar isi dalam artikel blogger, toc blogger, table of contents blogger

Untuk pemasangan ToC ini, ikuti langkah-langkah berikut:

Step 1 - Tambahkan kode CSS di bawah ini di atas </style> ATAU ]]></b:skin>

/* Table of Contents by igniel.com */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline-block; margin-right:10px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}
.toc ul li {list-style-type:none;}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0645ad}
:not(:checked) > .toctoggle {display:inline !important; position:absolute;  opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'sembunyikan';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'tampilkan'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

Step 2 - Kemudian, untuk menambahkan table of contents-nya dalam artikel, pilih mode "HTML View". Lalu copy dan paste kode HTML di bawah ini ke dalam artikel

<div class="toc">
  <input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h2>Daftar isi</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
  <ul>
    <li>1 <a href="#toc1" title="Judul Satu">Judul Satu</a></li>
    <li>2 <a href="#toc2" title="Judul Dua">Judul Dua</a></li>
    <li>3 <a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
    <li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a></li>
    <li>5 <a href="#toc5" title="Judul Lima">Judul Lima</a>
      <ul>
      <li>5.1 <a href="#toc5_1" title="Sub Judul Lima ke Satu">Sub Judul Lima ke Satu</a></li>
      <li>5.2 <a href="#toc5_2" title="Sub Judul Lima ke Dua">Sub Judul Lima ke Dua</a></li>
      </ul>
    </li>
    <li>6 <a href="#toc6" title="Judul Enam">Judul Enam</a></li>
  </ul>
</div>

Step 3 - Edit URL yang ditandai dengan ID unik yang telah Anda buat

Kesimpulan

Selesai sudah panduan cara membuat table of contents dalam artikel Blogger. Tutorial ini sangat mudah diikuti bahkan untuk pemula. Semoga bermanfaat

Referensi

https://www.wiblogger.com/2018/01/cara-membuat-daftar-isi-postingan.html

https://www.igniel.com/2018/08/daftar-isi-table-of-contents.html

Post a Comment

© Moonafic. All rights reserved. Lisensi: CC-BY 4.0 Maintained by Soma Anggor