Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

TOC (Tabel Of Content) atau Daftar Isi Otomatis di Blogspot

Untuk menambah jumlah skor seo dan tentu saja memudahkan pengunjung untuk mencari inti pembahasan pada suatu artikel, maka diperlulan yang namanya daftar isi atau Tabel Of Content yang disingkat TOC.

Membuat TOC (Tabel Of Content) atau Daftar Isi Otomatis di Blogspot

Dengan adanya cara otomatis membuat TOC ini memudahkan penulis agar tidak perlu susah-susah melakukan edit secara manual di html untuk membuat daftar isi ini.

Dikarena kan juga akan menambah waktu lebih lama untuk merubah atau menambahkan attribut id di setiap heading yang ada pada artikel, apabila terjadi kesalahan maka daftar isi tersebut akan error atau tidak berfungsi sebagai mana mestinya.

Dari sumber yang saya baca, toc ini tidak menggunakan jquery yang pasti lebih bersahabat untuk skor pada blog tidak berkurang

Apa itu Tabel Of Content (TOC)?

Tabel Of Content merupakan inti pembahasan, judul, sub judul atau ide pokok artikel yang berupa kalimat panjang ataupun pendek yang di tandai dengan Heading Seperti H2, H3, dan H4.

TOC di blogger atau blogspot harus dibuat menggunakan script/kode yang akan dipasang pada Tema secara manual yang akan menghasilkan Daftar Isi secara otomatis di artikel nantinya. seperti pada artikel mantankode ini sudah terpasang.

Berbeda dengan WordPress yang dimana kamu hanya tinggal memasang plugin dan sedikit pengaturan,jreng jreng sudah jadi.

Tapi kamu tidak perlu khawatir, karena pemasangannya ini tidak lah susah.

Pengaruh TOC untuk Blog?

Tidak perlu khawatir, kecepetan blog anda tidak terpengaruh ketika menggunakan Tabel Of Content ini.

Kamu juga akan mendapatkan hadiah sitelink dari google, apabila telah sesuai dengan persyaratan yang berlaku.

Langkah 1: Backup Tema

Untuk menghindari hal yang tidak di inginkan seperti error, ada baiknya untuk melakukan backup tema terlebih dahulu.

Langkah 2: Menambahkan CSS JS

Letakkan kode css berikut ini diatas kode </head>

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' 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:0;border:0;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 b=i=headinglength=getheading=0;headinglength=document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;if(headinglength>1){for(i=0;i<headinglength;i++){getheading=document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;var d=getheading.replace(/[^a-z0-9]/gi," ");var c=d.trim();var a=c.replace(/\s/g,"_");document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id",a);b="<li><a href='#"+a+"'>"+getheading+"</a></li>";document.getElementById("bwstoc").innerHTML+=b}}else{document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>")}}function bwstocShow(){var b=document.getElementById("bwstoc");var c=document.getElementById("bwstocwrap");var a=document.getElementById("bwstocLink");if(b.style.display==="none"){b.style.display="block";c.style.display="block";a.innerHTML="Tutup"}else{b.style.display="none";c.style.display="inline-block";a.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>

Langkah 3: Menambahkan HTML

Silahkan cari kode <data:post.body/>  biasanya terdapat 1 - 3, apabila ada lebih silahkan di ganti semua dengan kode berikut 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 -->

Langkah 4: Simpan Tema

Apabila terjadi error, silahkan di perhatikan di bagian apa error tersebut. Apabila ada yang tidak sengaja ada yang dihapus silahkan gunakan tema yang ada backup tadi.

Opsi Tambahan

Dicara diatas daftar isi tidak tampil ketika artikel dibuka, melainkan harus di klik Tampil agar muncul.

Nah maka dari itu saya mencoba merubah sedikit kode tersebut agar daftar isi ditampilkan ketika artikel dibuka.

Silahkan diubah kode berikut ini.

Untuk JavaScript </head>

<script type='text/javascript'>/*<![CDATA[*/function bwstoc(){var b=i=headinglength=getheading=0;headinglength=document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;if(headinglength>0){for(i=0;i<headinglength;i++){getheading=document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;var d=getheading.replace(/[^a-z0-9]/gi," ");var c=d.trim();var a=c.replace(/\s/g,"_");document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id",a);b="<li><a href='#"+a+"'>"+getheading+"</a></li>";document.getElementById("bwstoc").innerHTML+=b}}else{document.write("<style>.bwstoc{display:block !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>")}}function bwstocShow(){var b=document.getElementById("bwstoc");var c=document.getElementById("bwstocwrap");var a=document.getElementById("bwstocLink");if(b.style.display==="block"){b.style.display="none";c.style.display="inline-block";a.innerHTML="Tampil"}else{b.style.display="block";c.style.display="block";a.innerHTML="Tutup"}};/*]]>*/</script>

Untuk <data:post.body/>

<div id='post-toc'><div class='bwstoc' id='bwstocwrap' style='display:inline-block'><div class='bwstocHeader'>Daftar Isi [<a id='bwstocLink' onclick='bwstocShow()'>Tutup</a>]</div><ul id='bwstoc' style='display:none'/></div><data:post.body/><script>bwstoc();</script></div>

Penutup

Semoga artikel saya ini bermanfaat, dan mudah dipahami. Saya juga ucapkan terima kasih kepada admin bibit.ws yang telah membuat tutorial tabel of content otomatis.

Posting Komentar untuk "TOC (Tabel Of Content) atau Daftar Isi Otomatis di Blogspot"