Cara Menciptakan Table Of Contents Otomatis Di Artikel Blogger
Cara Membuat Table of Contents Otomatis di Artikel Blogger dengan Pure Javascript dan CSS
Note: Tutorial ini hanya berlaku untuk anda yang menggunakan Template Blogger non-AMP, atau hanya sanggup ditempatkan pada halaman non-AMP saja.
Setiap harinya, Google selalu memperbaharui Algoritmanya. Ini bertujuan semoga Google semakin memudahkan penggunanya dalam mencari warta di mesin pencari.
Semakin banyaknya perbaikan dan update yang dilakukan Google, menciptakan para Webmaster dan SEO maupun Blogger untuk bekerja lebih ekstra semoga website yang dikelolanya tetap sanggup bersaing di Google.
Beberapa waktu yang lalu, Google sempat memperbaharui algoritma untuk hasil penelusuran mobile. Dimana sebuah konten yang mempunyai Table of Contents, mempunyai 'perlakuan khusus' di Google. Saya akan menjelaskan secara rinci, mulai dari apa itu Table of Contents, efek baik terhadap hasil penelusuran, serta Cara membuanya.
Apa itu Table of Contents (ToC) ?
Bisa dibilang, Table of Contents ini merupakan "daftar isi" bagi sebuah artikel. Daftar isi ini akan mempermudah pengguna untuk melompat ke bab artikel yang ingin mereka baca. Makara ketika pengguna mengklik isi dari Table of Contents tersebut, pengguna akan pribadi sanggup membaca bab yang mereka klik tersebut.
Jika anda pernah membaca artikel di Wikipedia, tentu saja anda pernah melihat Table of Contents, yang memudahkan anda menuju bab artikel tertentu. Begitulah sekiranya mengenai Table of Contents.
Dampak TOC terhadap SEO?
Ternyata, penggunaan Table of Contents pada sebuah konten website cukup penting, khususnya bagi anda yang mengandalkan trafik website dari Google. Kenapa penting?
Karena ternyata, robots mobile Google akan memakai bab atau subheading yang terdapat artikel (yang sudah memakai TOC) menjadi sebuah sitelink. Anda sanggup melihat teladan di screenshot hasil penelusuran mobile di bawah ini:
Yang saya tandai berwarna merah tersebut merupakan sitelink yang dibentuk Google, dengan mengambil data dar Table of Contents pada Artikel Blog.
Memasang Table of Contents pada Blogger Secara Otomatis
Jika anda pengguna CMS WordPress, tentunya sangat gampang untuk membuat Table of Contents pada artikel secara otomatis, cukup memakai plugin embel-embel yang sudah banyak tersedia di gallery plugin WordPress.
Namun bagi pengguna Blogger, memasang TOC harus memakai JavaScript yang ditanam dalam template.
Kali ini, saya akan membahas Tutorial Cara Memasang Table of Contents pada Blogspot secara otomatis. Otomatis yang saya maksud, anda tidak perlu menulis artikel dalam mode HTML, dan memasukan instruksi manual setiap kali menulis artikel.
Semua instruksi yang akan saya bagikan berikut ini cukup pasang di template Blogger anda, dan anda cukup membua subheading H3 (subheading) dan H4 (minor subheading), dan Blockquote.
Langsung saja ikuti langkah berikut ini:
Buka tab Themes pada Dashboard Blogger.com, kemudian klik Edit HTML untuk memasang instruksi JavaScript dan CSS untuk Table of Contents otomatis.
Kemudian copy CSS berikut ini, dan paste sebelum
]]></b:skin> atau diantara instruksi <style>/*CSS ToC Alinux*/ .TOCalinux { line-height: 1.4em; padding: 20px 30px 20px 10px; display: block; width: 95%; margin: 0 auto; background: #f0f3f4; border: 1px solid #ccc; box-shadow: 1px 1px 2px #fff inset, -1px -1px 2px #fff inset; border-radius: 3px/6px } .TOCalinux ol, .TOCalinux ul { margin: 0; padding: 0; } .TOCalinux ul { list-style: none; } .TOCalinux ol li, .TOCalinux ul li { padding: 15px 0 0; margin: 0 0 0 30px; font-size: 15px; } .TOCalinux a { color: #0080ff; text-decoration: none; } .TOCalinux a:hover { text-decoration: underline; } .TOCalinux button { background: #FFFFE0; font-family: oswald, arial; font-size: 20px; position: relative; outline: none; cursor: pointer; border: none; color: #707037; padding: 0 0 0 15px; } .TOCalinux button:after { content: "\f107" font-family: " Font Awesome 5 Free" position: relative; left: 10px; font-size: 20px; } Selanjutnya, kita akan memasang JavaScript yang mempunyai kegunaan untuk memasang Table of Contents secara otomatis di artikel Blogspot. Copy instruksi ini diatas
</head> atau </head><<script type='text/javascript'> //<![CDATA[ function TOCalinux() { var TOCalinux = i = headlength = gethead = 0; headlength = document.getElementById("post-toc").querySelectorAll("h3, h4").length; for (i = 0; i < headlength; i++) { gethead = document.getElementById("post-toc").querySelectorAll("h3, h4")[i].textContent; document.getElementById("post-toc").querySelectorAll("h3, h4")[i].setAttribute("id", "point" + i); TOCalinux = "<li><a href='#point" + i + "'>" + gethead + "</a></li>"; document.getElementById("TOCalinux").innerHTML += TOCalinux; } } function mbtToggle() { var mbt = document.getElementById('TOCalinux'); if (mbt.style.display === 'none') { mbt.style.display = 'block'; } else { mbt.style.display = 'none'; } } //]]> </script> Sampai disini, pemasangan JavaScript untuk ToC sudah selesai, tinggal mengaktifkannya di artikel semoga muncul secara otomatis setiap kita publish artikel. Untuk itu, proses selanjutnya ialah memanggil script tersebut pada tag data data:post.body .
Silahkan cari <data:post.body/> pada template anda, kemudian ganti dengan instruksi di bawah ini. Perlu diperhatikan, biasanya instruksi <data:post.body/> muncul lebih dari satu, silahkan anda sesuaikan saja.
<div class='TOCalinux'> <button onclick='mbtToggle()'>Contents</button> <ol id='TOCalinux' /> </div> <data:post.body/> <script> TOCalinux(); </script>
Semua proses pemasangan JavaScript dan CSS sudah selesai, klik Save untuk mengkonfirmasi perubahan template.
Untuk melihat hasil / demo Table of Contents Blogger, silahkan klik artikel Data Tag Blogger Advance Level berikut ini.
Cara Membuat Artikel Blog semoga TOC Muncul
JavaScript diatas akan secara otomatis membaca tag heading h3 dan h4, yang kemudian akan menjadi Table of Contents untuk artikel tersebut.
Jadi, semoga Table of Contents tidak kosong, pastikan anda menggunakan Subheading dan atau Minor Heading ketika menulis artikel pada panel Blogger. lebih jelasnya untuk cara merubah sebuah kalimat menjadi Subheading dan Minor heading, lihat gambar di bawah ini
Yap, itulah tutorial mengenai Cara Membuat Table of Contents Otomatis di Artikel Blogger. Semoga bermanfaat, kalau mempunyai kegunaan akan sangat berterima kasih kalau artikel ini anda bagikan di sosial media :)
