Membuat Table Of Contents Otomatis Di Artikel Blogger Nonamp
Cara Membuat Table of Contents Otomatis di Artikel Blogger dengan Pure Javascript dan CSS
Setiap harinya, Google selalu memperbaharui Algoritmanya. Ini bertujuan biar Google semakin memudahkan penggunanya dalam mencari gosip di mesin pencari.
Semakin banyaknya perbaikan dan update yang dilakukan Google, menciptakan para Webmaster dan SEO maupun Blogger untuk bekerja lebih ekstra biar 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, imbas 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 arahan manual setiap kali menulis artikel.
Semua arahan 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 arahan JavaScript dan CSS untuk Table of Contents otomatis.
Kemudian copy CSS berikut ini, dan paste sebelum
]]></b:skin> atau diantara arahan <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 arahan 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 biar 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 arahan di bawah ini. Perlu diperhatikan, biasanya arahan <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.
Cara Membuat Artikel Blog biar TOC Muncul
JavaScript diatas akan secara otomatis membaca tag heading h3 dan h4, yang kemudian akan menjadi Table of Contents untuk artikel tersebut.
Jadi, biar 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
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 :)
