Cara Membuat TOC (Table Of Content) Otomatis di Postingan Blogger
masnasih.com - Mungkin Anda bertanya-tanya apakah mungkin menggunakan platform blogger bisa memasang toc otomatis seperti di wordpress? Saya jawab : Iya. Blogger bisa melakukan apapun seperti halnya yang dilakukan oleh wordpress. Eh. Ini terlalu berlebihan sepertinya. Oke saya ganti. Blogger bisa melakukan beberapa hal yang bisa dilakukan oleh wordpress.
Jadi, sederhananya seperti ini. Ada beberapa plugin yang wordpress yang bisa dipasang di blogger, tetapi dengan cara yang berbeda. Nah, itu mungkin kalimat yang pas untuk menjelaskan paragraf di atas.
Dan disini saya ingin berbagi tentang cara membuat TOC otomatis seperti di wordpress. Tentu ini berbeda dengan tutorial-tutorial yang sudah ada ya. Mungkin Anda sudah pernah melihat atau bahkan sudah mempraktekkan tutorial toc otomatis dari bibit.ws yang juga di share oleh beberapa blog lain yaitu blog.masihterjaga.id dan juga masticmasnasih.blogspot.com. Itu yang pernah saya lihat.
Disitu kita bisa melihat tutorial disitu jika dipraktekkan akan menghasilkan toc otomatis. Akan tetapi letaknya ada di atas postingan. Jadi misalkan artikel ini menggunakan toc otomatis dari blog-blog tersebut, maka Anda akan mendapatkan atau melihat tulisan daftar isi ada di sebelum paragraf pertama atas tepatnya di atas tulisan masnasih.com.
Nah. Kemudian saya mempunyai ide untuk mengembangkannya bagaimana jika toc itu saya taruh setelah elemen tertentu, dan biasanya saya membuat toc manual setelah h2, maka sayapun berinisiatif membuat toc otomatis setelah h2.
Cara yang saya lakukan cukup sederhana. Kebetulan di blog mbak igniel ada script iklan yang bisa ditaruh di sebelum atau setelah element. Nah, saya ambil yang script iklan setelah element tertentu. Lalu saya masukkan script toc dari bibit.ws ke dalam script igniel.com dan jadilah toc otomatis seperti yang saya harapkan.
Mungkin Anda bertanya-tanya, kenapa blog ini tidak dipasang toc otomatis?
Karena saya sudah banyak membuat toc manual. Jika saya paksakan membuat toc otomatis itu artinya saya harus edit banyak postingan dan itu melelahkan.
Cara Membuat TOC (Table Of Content) Otomatis di Postingan Blogger
Oke, jadi kita akan bikin toc otomatis itu sekarang.
Perhatikan dengan seksama agar tidak ada yang terlewat.
Attention : 1) Coba dulu di blog untuk percobaan. 2) Studi kasus pake template contempo. 3) Pastikan di artikel ada H2 nya.
Langkah Pertama
Masuk ke edit html blogger, Letakkan script ini setelah <body>
<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: 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 media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>
Langkah Kedua
Ganti <data:post.body/> dengan kode di bawah ini.
<div id='post-toc'> <data:post.body/></div><!-- end TOC -->
Langkah Ketiga
Letakkan kode berikut ini di atas </body><b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<div class='ignielInsertAfter'>
<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>
<script>bwstoc();</script>
</div>
<script> //<![CDATA[
// Insert Ads After Element by igniel.com
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('v b=["\\d\\g\\a\\d\\6\\8\\y\\a\\c\\6\\9\\7\\k\\j\\7\\6\\9","\\g\\6\\7\\z\\8\\6\\r\\6\\a\\7\\c\\l\\t\\B\\8\\f\\c\\c\\s\\f\\r\\6","\\x\\A\\6\\9\\t\\q\\6\\8\\6\\u\\7\\i\\9\\k\\8\\8","\\a\\6\\w\\7\\q\\d\\F\\8\\d\\a\\g","\\d\\a\\c\\6\\9\\7\\l\\6\\j\\i\\9\\6","\\C\\f\\9\\6\\a\\7\\s\\i\\H\\6"];G D(m,n){p h=o[b[1]](b[0])[0];E(h){p e=o[b[2]](m)[n-1];e[b[5]][b[4]](h,e[b[3]])}}',44,44,'||||||x65|x74|x6C|x72|x6E|_0x7de9|x73|x69|_0x4b0bx5|x61|x67|_0x4b0bx4|x6F|x66|x41|x42|_0x4b0bx2|_0x4b0bx3|document|let|x53|x6D|x4E|x79|x63|var|x78|x71|x49|x45|x75|x43|x70|ignielInsertAfter|if|x62|function|x64'.split('|'),0,{}));
ignielInsertAfter('h2', '1');
//]]> </script>
</b:if>
Lalu simpan template.
Lihat hasilnya.
Keterangan :
1. Ada 2 kode .querySelectorAll("h2, h3, h4")
Artinya kita mengambil tag h2, h3, dan h4 untuk dimasukkan ke toc. Jika kita hanya ingin mengambil salah satunya saja misalnya h3 saja, maka h2 dan h4 di hapus saja. Karena ada dua kode tersebut, maka dua-duanya diganti semua.
2. ignielInsertAfter('h2', '1')
'h2' Artinya kita akan menaruh toc setelah heading 2.
'1' Artinya kita meletakkan toc di h2 yang pertama.
Kita bisa merubah sesuai dengan keinginan.
Demikian cara membuat toc otomatis di postingan blogger. Semoga Bermanfaat.
Baca Artikel Blogging Lainnya.
Baca Artikel Blogging Lainnya.
Komentar
Posting Komentar
Panduan Berkomentar, Klik disini