Cara Membuat TOC (Table Of Content) Manual dan Otomatis

Saya berfikir bahwa TOC yang baik dan mudah dioptimasi adalah TOC yang dibuat secara manual

Namun beberapa blogger sangat produktif dalam menulis, sehingga membuat TOC manual terkadang jadi merepotkan

Akhirnya saya menggabungkan keduanya, membuat TOC secara manual dan otomatis

Untuk TOC otomatis (dipakai bila malas mengoptimasi), saya menggunakan plugin TOC versi 2 dari mybloggertricks.com (sudah saya uji dan terbukti SEO optimized)

Untuk class css nya terpaksa harus saya modifikasi dan mengganti nama class nya karena harus menggabung 2 TOC yaitu manual dan otomatis.

Namun bila teman teman mau yang original silahkan kunjungi mybloggertricks.com

Untuk TOC manual digunakan hanya apabila memang butuh optimasi SEO maksimal pada artikel tertentu saja yang sangat diandalkan (persaingan ketat)

Ini adalah bukti betapa sudah SEO friendlynya TOC yang digunakan pada template SEO Aggressive, di halaman 3 untuk keyword "cara membuat dofollow link" yang ditampilkan pada search description justru adalah TOC, bukan deskripsi artikel.

Manfaatkan dengan bijak !! senjata itu tergantung siapa yang menarik pelatuk

Cara Membuat TOC

Normalnya saya akan bercerita panjang lebar dari a sampai z, namun karena artikel ini direquest langsung oleh mas sutikno lina, maka akan saya edit kemudian

Menggunakan Javascript TOC

Berikut ini adalah kode yang digunakan untuk memanggil TOC, ada 2 kode yaitu html dan javascript

1. Letakkan javascript di halaman paling bawah postingan yang ingin dipasang TOC
2. Letakkan kode html dimana TOC ingin ditampilkan

HTML TOC (Untuk Memanggil)


<div class="gurubloggertoc">
<button>Contents <span><a id="spoiler" onclick="showhide()">hide</a></span></button>
<div id="gurubloggertoc"></div>
</div>

JS TOC (Letakkan di akhir artikel)

<script async="async" type="text/javascript">
//<![CDATA[
//*************TOC Plugin V2.0 by MyBloggerTricks.com Modified By gurublogger.id

function gurubloggertoc(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='poin"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#ngelink'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='ngelink"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("gurubloggertoc").innerHTML+=c}function showhide(){var a=document.getElementById("gurubloggertoc"),b=document.getElementById("spoiler");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")}

//]]>
</script>
<script>gurubloggertoc();</script>

Bersambung, toc manual work in progress belum sempat ngedit (masih sibuk dengan kerjaan dikantor)

Gara gara mas tikno ini :D