Cara Membuat Table of Content di Blogger
Cara Membuat Table of Content di Blogger Table of Content atau jika diterjemahkan ke dalam bahasa Indonesia adalah “Daftar Isi” yang biasanya terletak di postingan blog ini dibuat untuk membantu pengunjung berpindah ke titik yang tepat daripada membaca keseluruhan postingan yang dapat menghemat waktu pengunjung lebih cepat dalam menemukan poin penting sesuai dengan yang mereka cari. Karena ketika diklik maka otomatis akan melompat ke menu yang dituju dan ini biasa disebut dengan jump link.
Menambahkan Daftar Isi dalam posting blog Blogger ini dapat menyederhanakan struktur posting Anda menjadi lebih user-friendly di mata pengguna. Daftar Isi pada postingan blog Blogger juga dapat memudahkan pembaca untuk membaca bagian postingan yang mereka cari tanpa harus scroll kebawah. Seperti yang dapat Anda lihat pada postingan yang ada di blog ini terdapat tombol On this Content yang terletak dibawah gambar pada postingan diatas.
Dalam posting ini saya akan memandu Anda langkah demi langkah untuk menambahkan daftar isi di Blogger. Sebelum menambahkan ini ke blog Anda, Anda harus mengetahui beberapa manfaat memiliki daftar isi (TOC) di posting blog Blogger Anda. Dan ini bukan sekedar gaya dan membuat tampilan lebih menarik, tapi ada satu manfaat besar dari sisi SEO.
Manfaat SEO Daftar Isi (TOC)
Google selalu menyukai posting dan halaman blog yang terperinci dan terstruktur dengan baik. Dan dengan menambahkan daftar isi di posting blog Blogger, Anda membuat posting blog Anda terstruktur dengan baik dan ramah pengguna. tambahkan daftar isi di blogger untuk mendapatkan hasil yang lebih baik.
Dan jika Anda menambahkan TOC di posting blog Anda, itu akan terstruktur dan ramah pembaca. Google dapat menampilkan tautan lompat ke Halaman Hasil Pencarian, ini sangat bermanfaat bagi webmaster dan dapat meningkatkan RKPT Anda. Inilah yang dikenal dengan istilah jump link tadi.
Baca juga : Kumpulan Kode Tag Kondisional Blogger Terbaru
Improve User Experience
Menurut penelitian oleh NN Group, lebih dari 80% dari total pembaca web adalah pemindai yang hanya membaca poin-poin penting dari sebuah halaman web. Dan kami juga senang membaca artikel terperinci.
Pengalaman pengguna sangat penting untuk mendapatkan peringkat yang lebih tinggi di SERP (Halaman Hasil Pencarian). Pengalaman pengguna adalah bagian yang sangat penting dari sebuah blog untuk mendapatkan peringkat lebih cepat. Dan daftar isi akan membantu Anda meningkatkan pengalaman pengguna blog Anda.
Menambahkan TOC di Blogger akan memungkinkan pembaca untuk melompat ke bagian penting dari posting blog. Pembaca akan lebih mudah memahami isinya sesuai dengan apa yang ingin mereka cari disana.
Cara Membuat Table of Content di Postingan Blogger
Pada dasarnya kode akan membaca dari setiap id heading dalam struktur HTML dan langsung melompat ke bagian heading yang dipilih. Di sini saya akan memandu Anda langkah demi langkah untuk menambahkan daftar isi di Blogger.
Kode script untuk membuat daftar isi ini sangat ringan menggunakan CSS dan HTML saja. Dan disini kita tidak perlu menggunakan kode JavaScript yang dapat menambah beban saat loading.
Berikut ini adalah Cara Membuat Table of Content (TOC) di Dalam Postingan Blogger:
1. Menambahkan Kode CSS di Edit HTML
Pertama login ke Blog Blogger Anda di mana Anda ingin menambahkan daftar isi (TOC). Pada dashboard pilih Tema dan kemudian klik tab SESUAIKAN dan pilih menu Edit HTML.
Jadi untuk mempercantik tampilannya, Anda bisa menambahkan kode CSS di bawah ini dan letakkan kode tepat di atas tag penutup </style> atau ]]></b:skin>
/* Table of Contents by samuelpasaribu.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}
Pada kode di atas Anda dapat melihat kode terakhir :target::berfore. Jika Anda menggunakan sticky header atau menu navigasi, Anda dapat mengubah height dan margin-top dan menyesuaikan dengan ukuran header atau navigasi yang ada. Misalnya ukurannya 50px, maka Anda bisa mengubahnya menjadi height:50px dan margin-top:50px.
Setelah itu klik Save Tema dan beralih ke menu postingan.
Baca juga : Cara Menulis Artikel SEO di Blogger
2. Menambahkan Kode HTML di Postingan
Setelah menambahkan kode CSS di template sekarang beralih ke menu Postingan Blogger. Buat Postingan baru dan sesuaikan pada mode HTML, bukan Compose. Lalu letakkan kode dibawah ini ke paragraf awal atau bisa Anda sesuaikan letak posisinya sendiri nanti.
<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle">Daftar isi<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>
Info : Pada kode tagar #toc1 dan #toc lainnya adalah bagian elemen pemanggilnya. Disini Anda bisa menambahkan atau mengurangi sesuai kebutuhan yang diperlukan.
Sampai di sini Anda dapat mengatur heading atau judul artikel dengan memasukkan id yang sama dari kode table of content di atas. Agar lebih jelas anda bisa melihat contoh kodenya seperti ini.
<h2 id="toc1">Judul Satu</h2>
...isi paragraf satu
<h2 id="toc2">Judul Dua</h2>
...isi paragraf dua
<h2 id="toc3">Judul Tiga</h2>
...isi paragraf tiga
<h2 id="toc4">Judul Empat</h2>
...isi paragraf empat
<h2 id="toc5">Judul Lima</h2>
...isi paragraf lima
<h3 id="toc5_1">Sub Judul Lima ke Satu</h3>
...isi paragraf lima part 1
<h3 id="toc5_2">Sub Judul Lima ke Dua</h3>
...isi paragraf lima part 2
<h2 id="toc6">Judul Enam</h2>
...isi paragraf enam
Ini adalah contoh postingan kode table of content yang saya buat agar lebih jelas lagi.
Untuk tampilan hasilnya Anda bisa cek dan klik tombol demo dibawah ini.
Baca juga : Panduan Belajar SEO Blogger untuk Pemula
Bagaimana Jika Tombol 'Sembunyikan/Tampilkan' Tidak Muncul?
Hal semacam ini biasa terjadi pada sebagian besar pengguna. Dan untuk perbaikan, Anda dapat memastikan untuk tidak memberikan jeda baris </br> atau (Enter) di header TOC. Untuk kode yang benar seharusnya terlihat seperti ini
Dan berikut ini adalah contoh kode yang salah
Baca juga : Cara Membuat Sitemap di Blogger
Kesimpulan
Ikuti setiap instruksi maka Anda dapat dengan mudah menambahkan table of content di blogger. Cara manual membuat daftar isi adalah yang terbaik untuk kecepatan halaman. Saya sarankan menggunakan daftar isi otomatis jika Anda tidak punya banyak waktu dan cara manual membuat daftar isi jika Anda punya waktu.
Demikian posting kali tentang Cara Membuat Table of Content di Blogger yang dapat kami rangkum. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk share artikel ini untuk membantu teman-teman yang lain. Terima kasih!
samuelpasaribu.com
samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.
