Cara Membuat Table of Contents (TOC) di Postingan Blogger

Table Of Contents - Tutorial cara membuat TOC di postingan blogger AMP dan Non-AMP seperti pada WordPress.

Daftar Isi:

Jika artikel yang sobat buat sangat panjang bahkan sampai lebih dari 1000 kata sangat disarankan sobat memasang widget ini agar pembaca lebih mudah membaca keseluruhan artikel yang sobat buat.

Pemsangan table of contents di blog dapat membuat blog menjadi lebih SEO friendly, kabarnya juga jika menggunakannya ketika sedang mendaftar AdSense. Blog yang kita daftarkan akan mendapatkan peluang yang lebih besar diterima menjadi publisher Google AdSense.


Pengertian Table of Content

Seperti yang saya katakan tadi bahwa Table of Content adalah sebuah daftar isi(heading) dari bab atau poin poin penting yang ada di artikel tersebut. Jika diibaratkan, artikel blog adalah sebuah buku, sedangkan Table of Content merupakan daftar isi dihalaman depan yang bisa memudahkan pembacanya untuk mencari topik yang ada di buku tersebut.

Berbeda dengan daftar isi di buku, ToC di blogger terbilang lebih menguntungkan pembacanya karena terdapat sebuah tombol yang berfungsi untuk menuju ke bab tersebut dan kembali Ke daftar isi secara otomatis.

Jadi, pembaca tidak perlu repot repot scroll atas bawah untuk membaca. Contohnya seperti tombol dibawah ini.

Cara Memasang ToC di Blogspot


Blog AMP

Seperti Biasa, login ke blogger Pilih Tema > Edit HTML > Cari <style amp-custom='amp-custom'> lalu letakan kode ini dibawahnya.


    #btn_toc{font-weight:bold;cursor:pointer}
    #btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
    #btn_toc svg{vertical-align:middle}
    #toc li,.back_toc{cursor:pointer}
    #toc{display:grid}
    :target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}

Blog nonAMP

Caranya sama dengan pemasangan di template AMP, tetapi peletakan kode cssnya yang berbeda. Letakan kode ini diatas ]]></b:skin> pada template sobat.
#btn-cm{border:1px solid #dadada;border-radius:5px;background-color:#f9f9f9}
#btn_toc{font-weight:700;cursor:pointer;margin:10px}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li{cursor:pointer}
#toc{display:grid}
.back_toc{cursor:pointer;text-align:right}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}

Perhatikan kode height:40px;margin-top:-40px , jika sobat mengunakan header sticky sesuaikan nilainya dengan tinggi stickkynya. Tetapi jika tidak menggunakan sticky hapus saja css ini :target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden (berlaku untuk AMP dan nonAMP).

Saat ini sobat sudah sukses Memasang table of contents di template yang sobat gunakan. Lalu Bagaimana cara menerapkan di postingan, simak langkah selanjutnya.

Cara Menerapkan ToC di Postingan

Untuk menerapkan table of contents pada postingan, kita musti memanggil css yang sudah kita lakukan pada langkah sebelumnya. Caranya pilih menu HTML pada format penulisan artikel.



Blog AMP (HTML)

<div id="btn_toc" on="tap:toc.toggleVisibility" role='button' tabindex='0'>Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc" title="Lorem Ipsum">Lorem Ipsum</a></li>
<li><a href="#toc" title="Morbi gravida varius fringilla">Morbi gravida varius fringilla</a></li>
<li><a href="#toc" title="Mauris consectetur">Mauris consectetur</a></li>
<li><a href="#toc" title="Donec facilisis nec sem ac mattis">Donec facilisis nec sem ac mattis</a></li>
<li><a href="#toc" title="Donec finibus tellus eget sodales vestibulum">Donec finibus tellus eget sodales vestibulum</a></li>
</ol>
</div>

Baca keterangan dan cara peletakan kodenya dibawah..

Blog NON-AMP (HTML)

<div id="btn-cm">
<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc" title="Subheading 1">Subheading 1</a></li>
<li><a href="#toc" title="Subheading 2">Subheading 2</a></li>
<li><a href="#toc" title="Subheading 3">Subheading 3</a></li>
<li><a href="#toc" title="Subheading 4">Subheading 4</a></li>
<li><a href="#toc" title="Subheading 5">Subheading 5</a></li>
</ol>
</div>
</div>

Keterangan:
Banyaknya list silahkan sesuaikan dengan header yang dibuat dan sesuaikan #toc dan seterusnya sesuai banyaknya list yang dibuat.

Kemudian silahkan buat header untuk tiap-tiap konten untuk TOC seperti di bawah ini

<h4 id="toc_1">Lorem Ipsum</h4>

Untuk tag H4, silahkan gunakan minor heading dari tab post editor di atas lalu tambahkan id="toc_1" dan seterusnya sesuai posisi header. Untuk header kedua maka tambahkan kode id="toc_2", dan seterusnya.

Kemudian di setiap bawah konten dari setiap bab tambahkan kode berikut untuk memudahkan pembaca kembali ke atas ke TOC.

Blog AMP
<div class="back_toc" on="tap:toc.scrollTo('position' = 'center')" role="button" tabindex="0">Back to Content ↑</div>

Blog Non-AMP
<div class="back_toc" onclick="document.getElementById('btn_toc').scrollIntoView(true);" role="button" tabindex="0">Back to Content ↑</div>

CONTOH

Misalkan ini adalah paragraf untuk basa basi tentang artikel yang sedang dibahas
.............
.............
Disini merupakan tempat terbaik untuk meletakan kode pemanggil TABLE OF CONTENTS (HTML)
.............
.............
Disini tempat meletakan heading
<h4 id="toc_1">Lorem Ipsum</h4>
.............
.............
Disini merupakan isi bab
.............
.............
Disini tempat meletakan kode untuk kembali ke Daftar isi / table of contents
.............
.............

Contoh ToC di Blogger

Berikut ini adalah Contoh tampilan table of contents pada postingan blogger.

Contoh Penerapan Daftar Isi (ToC) Di Postingan

Dibawah ini merupakan Contoh Penerapan table of contents pada postingan, gambar atas merupakan ToC khusus untuk blog AMP sedangkan yang Bawah merupakan ToC untuk blog non AMP.





Postingan dengan TOC di SERP

Gambar pertama saya ambil ketika blog ini sudah migrasi ke template blog AMP. Sedangkan gambar kedua diambil ketika masih menggunakan Non-AMP, saat itu saya baru publish artikel tersebut dan Table of Content langsung terindeks oleh robot Google.




Demikian, semoga bermanfaat. Jika kurang jelas, silahkan tanyakan di kolom komentar. Terimakasih sudah berkunjung
(https://masihterjaga.blogspot.com)

Terkait Dengan Cara Membuat Table of Contents (TOC) di Postingan Blogger

Kebijakan Berkomentar: Berikan komentar sesuai bahasan artikel dengan tidak mencantumkan link aktif, hal ini bertujuan agar komentar Anda tidak dianggap sebagai spam, Terimakasih. :))
Komentar