Membuat daftar isi di postingan Blogger sesuai Heading
Apa itu Daftar Isi?
Daftar isi merupakan bagian penting dari suatu artikel. Bagaimana tidak, fungsi dari daftar isi itu sendiri adalah memberi panduan bagi pembaca serta sebagai petunjuk letak halaman sesuai dengan kontennya. Dengan daftar isi maka pembaca akan mudah dan lebih cepat dalam mencari apa yang dia butuhkan.
Daftar isi seyogyanya berada pada bagian awal sebuah artikel. Bayangkan jika Anda membuat sebuah artikel panjang lebih dari 5000 karakter, tanpa ada penjeda atau penanda tentang konten Anda. Tentunya hal tersebut akan menyulitkan pembaca dalam mencari apa yang dia maksud. Apalagi tidaklah mungkin semua pembaca memiliki waktu cukup untuk membaca semua tulisan Anda, apalagi apabila pembaca hanya membutuhkan bagian tertentu saja.
Mengapa daftar isi penting?
Dalam artikel yang sesuai dengan persyaratan minimum google (high content), jumlah karakter, kata, dan kalimat dalam karya tulis tersebut dapat mencapai puluhan atau bahkan ratusan. Dengan jumlah kalimat serta bagian konten yang begitu banyak serta jenis-jenis konten yang terkandung di dalamnya, saya rasa membuat daftar isi dan mengingat bagian menjadi sangat sulit untuk dilakukan dan memakan banyak waktu. Apalagi dilakukan secara manual.
Untuk itu saya akan membagikan bagaimana membuat daftar isi yang memudahkan pekerjaan kita dalam menulis konten, sehingga potensi waktu dapat kita maksimalkan dengan baik tanpa terbuang percuma. Kode ini menggunakan javascript, yang oleh pembuatnya diklaim lebih cepat dan SEO friendly daripada menggunakan jQuery karena loadingnya yang lambat karena harus mengimport dulu jQuery.
Ok, langsung saja, beginilah caranya.
Cara membuat daftar isi otomatis di postingan Blogger
Adapun cara menginjeknya cukup mudah, asalkan Anda mengikuti langkah-langkah dengan benar, saya rasa tidak akan menjadi masalah.
Memasang kode CSS dan JS daftar isi otomatis pada postingan Blogger di Edit HTML
Cara membuat Postingan dengan daftar isi
Silakan masuk ke blogger Anda ⟶ kemudian klik di menu Tema disebelah kiri ⟶ pada tombol panah kebawah di tombol SESUAIKAN, silahkan pilih Edit HTML.
Cari kode /head kemudian copas kode berikut diatasnya
<b:if cond='data:view.isPost'><style type='text/css'>
.mbtTOC2{background-color:#f8f9fa;border:1px solid #a2a9b1;padding:7px 4px 8px 13px;border-radius:4px;display:table;line-height:1.6em}
.mbtTOC2 button{background:none;font-family:inherit;font-size:17px;position:relative;outline:none;border:none;padding:0}
.mbtTOC2 button:before{content:"";width:24px;height:24px;display:inline-block;vertical-align:-7px;margin-right:5px;background:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M3 17v-2h14v2H3Zm0-4v-2h14v2H3Zm0-4V7h14v2H3Zm17 8q-.425 0-.713-.288T19 16q0-.425.288-.713T20 15q.425 0 .713.288T21 16q0 .425-.288.713T20 17Zm0-4q-.425 0-.713-.288T19 12q0-.425.288-.713T20 11q.425 0 .713.288T21 12q0 .425-.288.713T20 13Zm0-4q-.425 0-.713-.288T19 8q0-.425.288-.713T20 7q.425 0 .713.288T21 8q0 .425-.288.713T20 9Z"%2F%3E%3C%2Fsvg%3E')}
.mbtTOC2 button a{color:#0080ff;padding:0 2px;cursor:pointer;border:none}
.mbtTOC2 button a:hover{text-decoration:underline}
.mbtTOC2 button span{font-size:15px;vertical-align:baseline;margin:0 10px}
.mbtTOC2 li{list-style:none;margin:0}
.mbtTOC2 li a{border:none;text-decoration:none;font-size:18px;text-transform:capitalize}
.mbtTOC2 li a:hover{text-decoration:underline}
.mbtTOC2 li li{margin:0;padding:0;border:none}
.mbtTOC2 li li a{color:#289728;font-size:15px}
.mbtTOC2 ol{counter-reset:section1;list-style:none;margin:0 25px 0 30px;padding:0px}
.mbtTOC2 ol ol{margin-left:20px;counter-reset:section2}
.mbtTOC2 ol ol ol{margin-left:20px;counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}
.point2 {list-style-type:lower-alpha}
.point3 {list-style-type:lower-roman}
.point4 {list-style-type:disc}
</style>
<script type='text/javascript'>
//<![CDATA[
//*************TOC Plugin V2.0 by MyBloggerTricks.com
function mbtTOC2(){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='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")}
//]]>
</script>
</b:if>
Langkah berikutnya silakan cari data:post.body/ pada kode yang pertama kemudian ganti dengan
<div id='post-toc'><data:post.body/></div>
Sekarang kita tinggal membuat postingan. Dan perlu diingat, untuk memasukkan kode berikut kita harus masuk pada tampilan HTML di postingan!!!. Pada postingan usahakan di line pertama masukkan kode berikut
<div class="mbtTOC2"> <button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button> <div id="mbtTOC2"></div> </div>
Kemudian diakhir postingan tambahkan juga kode berikut
<script>mbtTOC2();</script>
Demikian tutorial membuat daftar isi otomatis di postingan Blogger, semoga bermanfaat. Terima kasih telah mampir ke Agung Jaka Nugraha. Wassalam
