Membuat Table of Contents (TOC) di Dalam Artikel Blogspot

Membuat Table of Contents (TOC) alias daftar isi di dalam artikel blogspot memang susah-susah gampang. Kecuali cupuers membeli atau menginstall template yang memang sudah menyediakan fitur TOC di dalamnya, seperti template yang dipakai Blogspedia. Jadi nggak perlu setting macam-macam lagi. Tinggal nambahin sebaris kode di dalam html setiap mau posting artikel, udah deh muncul TOC-nya.

<b:if cond=’data:blog.pageType == “item” or data:blog.pageType == “static_page”‘>

<style media=’all’ type=’text/css’>

/* 

 * Blogspot TOC

*/

.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

*/

//<![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 media=’all’ type=’text/css’>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>

</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 –>

Ada yang TOC-nya nggak langsung muncul? Hmm, coba dicek apakah di artikel Cupuers sudah diaktifkan penggunaan heading-nya? Karena TOC hanya akan muncul jika sub-sub judulnya diaktifkan headingnya.

Kalau masih bingung dengan tutorial di atas, coba tengok video dari channel kak Alex Alfand berikut:

Kekurangan dari TOC Model Otomatis ala Kak Alex Alfand

Meski TOC memiliki manfaat yang cukup baik, terutama dalam optimasi SEO On Page. Namun tutorial table of contents yang dibagikan oleh Kak Alex Alfand, menurut MomBlogger Cupu punya tiga kekurangan:

1. Otomatis Muncul

Berbeda dengan TOC yang sudah menjadi fitur dari template LinkMagz-nya mas Sugeng, seperti yang ada di Blogspedia ini, TOC ala Kak Alex begitu kita pasang kode-kodenya di HTML. Langsung muncul di semua artikel.

Sementara kalau di template LInkMagz ini, bisa nggak kita munculkan. Terutama di artikel-artikel pendek yang nggak membutuhkan TOC.

Ya, tentu saja enaknya, kita nggak perlu setting per artikel untuk memunculkan TOC. Hmm, poin satu ini memang bisa dibilang kekurangan, sekaligus kelebihan. Buat yang nggak mau ribet pasang-pasang tiap artikel ya TOC ala kak Alex ini sudah mantul pastinya.

2. Letaknya Sudah Pasti Di Situ

Sama halnya dengan poin 1, poin dua ini bisa jadi kelebihan atau kekurangan, tergantung bagaimana kita melihatnya. Dianggap kelebihan jika kita melihatnya dari segi otomatisasi. Kita nggak perlu nambahin kode tiap mau posting artikel, karena TOC udah langsung tampil di tempat yang fix.

Namun buat yang suka variasi, bisa jadi hal ini sebuah kekurangan. Misal TOC yang ada di Blogspedia ini, bisa ditambahkan pada lokasi yang MomBlogger Cupu inginkan. Nggak selalu melulu di bagian paling atas artikel. Bisa jadi eike letakkan setelah paragraf pembuka.

Kalau menurut Cupuers gimana, masuk kekurangan atau kelebihan nih?

3. Tidak Ada Hierarki Heading

Kekurangan yang ketiga menurut eike yaitu tidak adanya hierarki heading. Nih MomBlogger skrinsutkan TOC ala LinkMagz yang ada di Blogspedia dan TOC ala Kak Alex yang ada di Marita’s Palace:

Bisa tahu bedanya?

Yup, kalau TOC yang ada di Blogspedia ini, pembaca bisa tahu mana sih yang sub judul, poin-poinnya sub judul, dsb. Sementara di TOC ala Kak Alex, semua heading disamaratakan, tidak berhierarki gitu lo. Jadi nggak keliatan mana yang sub judul, mana yang penjabaran sub judul.

Tapi yaa, berhubung belum bisa ngoprek sendiri TOC yang sesuai harapan. MomBlogger Cupu sih sementara pakai ini dulu, wkwk. Toh 3 kekurangan yang dimilikinya bukanlah sesuatu yang mayor, masih bisa dinikmati lah, hehe.

Nah, sekarang semua kembali lagi ke Cupuers. Mau lanjut membuat table of contents (TOC) dengan step-step yang diajarin kak Alex Alfand ini, atau mau cari metode lainnya. Selamat mencoba dan mengutak-atik ya, Cupuers!