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.
Cara Membuat TOC/Daftar Isi Otomatis di Artikel Blogger
Memasang Table Of Contents Otomatis - Cara Membuat TOC secara otomatis di semua postingan blogger.Update 29 Juni 2019: Mengubah script table of contents otomatis (menggunakan script yang dibuat oleh bibit.ws) yang pasti efeknya menjadi lebih SEO Friendly karena atribut ID mengikuti judul Heading. Mirip seperti table of contents di wordpress.
Script Table Of Contents Otomatis
Cara memasang daftar isi postingan blogger diatas itu manual. Artinya, kita harus kerja ekstra dengan menambahkan attribut ID pada setiap tag heading(h2,h3,h4,h5,h6) artikel jika akan memasang table of contents.Nah, untuk tutorial berbeda ini berbeda dan lebih mudah, script yang dipakai akan mendetek semua tag heading yang ada di dalam artikel kemudian akan ditampilkan menjadi table of contents.
Jadi, sobat tidak usah ribet untuk menambahkan atribut id dan membuat list secara manual, semua menjadi otomatis.
Kelebihan Memasang Table Of Contents Otomatis di Blogger
- Mudah, Karena Otomatis
- Memudahkan Visitor Membaca Isi Artikel
- Artikel Menjadi Lebih SEO Friendly
Artikel dengan Table Of Contents biasanya akan mendapatkan sitelink dari google.
Cara Memasang Table Of Contents Otomatis di Blogger
1. Pertama, buka editor template blogger.2. Cari
</head>, kemudian letakan script ini diatasnya.<b:if cond='data:view.isPost'>
<style type='text/css'>
/*
* Blogspot TOC
* https://bibit.ws/toc-di-blogspot.php
*/
.bwstoc {
margin: 10px 0;
background: #F0F0F0;
border: 1px solid #ddd;
}
.bwstoc ol, .bwstoc ul {
margin: 0 0 15px 20px;
padding: 0;
}
.bwstoc ul {
list-style: disc;
}
.bwstoc ol li, .bwstoc ul li {
font-size: 95%;
padding: 5px 10px 0 0;
margin: 0 0 0 30px;
}
.bwstoc a {
text-decoration: none;
}
.bwstoc a:hover {
text-decoration: underline;
}
.bwstoc .bwstocHeader {
font-weight: bold;
font-size: 100%;
position: relative;
outline: none;
border: none;
padding: 5px 15px 5px 5px;
margin: 5px 10px;
}
.bwstoc .bwstocHeader a {
text-decoration: none;
cursor: pointer;
}
.bwstoc .bwstocHeader a:hover {
text-decoration: underline;
}
</style>
<!-- Blogger TOC -->
<script type='text/javascript'>
/*
* SEO Friendly Blogspot Table Of Contents
* https://bibit.ws/toc-di-blogspot.php
*/
//<![CDATA[
function bwstoc() {
var bwstoc = i = headinglength = getheading = 0;
headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
if (headinglength > 1) {
// Hanya Tampil Jika Ditemukan Minimal 2 Heading
for (i = 0; i < headinglength; i++) {
getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
var bws_2 = bws_1.trim();
var getHeadUri = bws_2.replace(/\s/g, "_");
document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
document.getElementById("bwstoc").innerHTML += bwstoc;
}
} else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function bwstocShow() {
var bwstocBtn = document.getElementById('bwstoc');
var bwstocWrapID = document.getElementById('bwstocwrap');
var bwstocLink = document.getElementById('bwstocLink');
if (bwstocBtn.style.display === 'none') {
bwstocBtn.style.display = 'block';
bwstocWrapID.style.display = 'block';
bwstocLink.innerHTML = 'Tutup';
} else {
bwstocBtn.style.display = 'none';
bwstocWrapID.style.display = 'inline-block';
bwstocLink.innerHTML = 'Tampil';
}
}
//]]>
</script>
<noscript><style type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>3. Cari
<data:post.body/> untuk halaman posting (biasanya yang ke dua), ganti dengan kode di bawah ini.<div id='post-toc'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]</div><ul id='bwstoc' style='display:none'/></div>
<data:post.body/>
<script>bwstoc();</script>
</div><!-- end TOC -->4. Simpan tema, lihat hasilnya pada halaman posting. Jika ToC tidak muncul, coba ganti
<data:post.body/> yang lain.Tutor Tambahan
Setelah membagikan artikel ini di grup, beberapa teman blogger menanyakan bagaimana cara meletakan Table Of Content di tengah artikel. Jadi, Saya buat poin baru disini.Mudah saja caranya, bisa menggunakan JavaScript. Tapi saya pribadi lebih memilih menggunakan trik ini (ada baiknya, baca sebelum melanjutkan).
Untuk meletakan table of contents di tengah artikel, ubah
<data:post.body/> menjadi seperti ini:<b:if cond='data:blog.metaDescription'>
<data:blog.metaDescription/><br/><br/>
</b:if>
<div id='post-toc'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'>
<div class='bwstocHeader'>
Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]
</div>
<ul id='bwstoc' style='display:none'/>
</div>
<data:post.body/>
<script>bwstoc();</script>
</div><!-- end TOC -->Itulah cara mudah membuat table of contens secara otomatis di postingan blogger, tanyakan jika ada yang ditanyakan.
Pembuat Script:
https://bibit.ws/toc-di-blogspot.php