 |
| Tampilan Table of Contents di halaman blog, Image credit: Techindopost |
Techindopost - Seperti yang kita ketahui, Google Blogger atau Blogspot tidak memiliki fungsi plugin seperti yang ada di Wordpress, sehingga dibutuhkan keterampilan untuk memodifikasi konten di halaman blog. Salah satunya adalah penambahan informasi Daftar Isi. Di artikel ini kami akan menjelaskan langkah demi langkah pemasangan Daftar Isi untuk platform Blogger dengan tujuan meningkatkan SEO blog kamu dan mempermudah pembaca untuk memahami konteks artikel yang kamu buat. Tapi sebelum itu ada baiknya kamu mengetahui terlebih dahulu apa itu Daftar Isi.
Daftar Isi
Apa itu Daftar Isi
Daftar Isi adalah potongan kecil dari sebuah artikel dengan format judul atau sub-judul yang dilengkapi dengan penomoran. Daftar Isi biasanya tampil di bagian awal artikel yang berfungsi untuk membantu pembaca mengetahui letak sebuah konten. Bayangkan jika artikel yang kamu buat memiliki banyak konten, hal tersebut akan mempersulit pembaca jika tidak menggunakan Daftar Isi, karena dengan Daftar Isi pembaca hanya tinggal klik judul atau sub-judul dan secara otomatis mereka akan diarahkan ke konten yang dipilih.
Nah di artikel ini kami akan mengimplementasikan Daftar Isi yang diatur secara otomatis. Daftar Isi ini memungkinkan kamu untuk mengatur semua tag heading dan sub-heading dari artikel yang kamu buat secara otomatis, sehingga pembaca bisa dengan mudah menavigasikan konten yang ada di artikel kamu.
Rekomendasi Editor Kami
Sebagai contoh ketika kamu mengunjungi website Wikipedia, disana kamu akan menemukan Daftar Isi di setiap artikel yang kamu baca, dan itu sangat membantu untuk berpindah dari konten satu ke konten lainnya. Tidak perlu jauh melihat website lain, website Techindopost juga mengimplementasikan Daftar Isi seperti yang ada di atas.
Keuntungan menggunakan Daftar Isi
Seperti yang sudah kami jelaskan di atas, Daftar Isi biasanya tampil di awal artikel, dan ini menjadi salah satu keuntungan pembaca karena mereka dapat memahami konteks dari artikel hanya dengan beberapa baris di awal. Selain itu, Daftar Isi yang diatur dengan baik juga dapat membantu:
- Memberikan tampilan profesional di artikel yang kamu buat,
- Secara sistematis mengatur konten artikel,
- Mengatur ekspektasi pembaca dengan memberikan konteks di awal,
- Memberikan kemudahan ke pembaca untuk menavigasikan konten yang ada di dalam artikel.
Selain itu apakah dengan menambahkan Daftar Isi bisa meningkatkan user experience blog kamu? Jawabannya iya, karena berdasarkan penelitian, lebih dari 80% pembaca di platform website hanya membaca poin-poin utama dari sebuah artikel. Sehingga penting untuk kamu menambahkan Daftar Isi ke dalam artikel yang kamu buat.
Apakah Daftar Isi Bisa Meningkatkan SEO Blog?
Tentu saja, dengan menambahkan Daftar Isi ke dalam artikel, kamu bisa meningkat SEO blog kamu dengan membagi konten menjadi beberapa sub-bagian, yang mana masing-masing bagian memiliki poin yang membantu pembaca untuk memahami konteks dari artikel yang kamu buat.
Baca juga: 4 Cara Meningkatkan SEO Blog 2022
Salah satu trik nya adalah membuat artikel dengan konten yang panjang. Hal ini memungkinkan artikel kamu mendapatkan peringkat yang lebih baik di mesin pencari. Tidak ada jumlah konten yang pasti, tapi perlu kamu ketahui Google menjadikan konten yang panjang sebagai salah satu faktor peringkat di mesin pencarian mereka. Hal ini juga bisa meningkatkan Click Through Rate atau CTR blog kamu karena menampilkan informasi yang relevan ke pembaca.
Spesifikasi Kode Daftar Isi Otomatis
Sebelum kita masuk ke pengkodean, berikut spesifikasi dari kode yang akan kita gunakan:
- Kode menggunakan HTML, CSS, dan JavaScipt,
- Kode telah di atur untuk digunakan setelah seluruh halaman artikel dimuat, dan hanya akan berjalan pada saat dipanggil sehingga kamu dapat menampilkan Daftar isi untuk artikel tertentu,
- Kode yang digunakan ringan dan tidak akan mempengaruhi waktu muat halaman artikel,
- Kode SEO friendly, sehingga akan membantu menentukan peringkat artikel kamu di mesin pencarian,
- Kode memiliki tombol toggle untuk menammpilkan dan menyembunyikan Daftar Isi,
- Responsif dan dapat disesuaikan.
Cara Menambahkan Daftar Isi Otomatis
Silakan ikuti langkah-langkah berikut untuk menambahkan Daftar Isi Otomatis ke dalam artikel kamu:
- Masuk ke halaman Blogger,
- PIlih Theme, kemudian klik panah bawah di samping tombol Customize dan klik menu Edit HTML,
Admin dashboard Blogger, Image Credit: Blogger
- Kemudian cari tag </body> dengan menekan tomboll Ctrl + F, ketik </body> kemudian tekan Enter. Secara otomatis kamu akan diarahkan ke baris kode tag yang kamu cari.
Admin dashboard Blogger - Edit HTML, Image Credit: Blogger
- Selanjutnya silakan paste kode berikut tepat di atas tag </body> dan klik icon Save di menu kanan atas.
<b:if cond="data:view.isPost"><style>html{scroll-behavior:smooth;overflow-x:hidden}.pS details summary{list-style:none;outline:none}.pS details summary::-webkit-details-marker{display:none}details.k2Toc{padding: 10px 15px;background: #f3f3f3;color: black;font-weight: 600;margin: 10px 0px; border:2px solid; border-radius: 5px;box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;}details.k2Toc summary{display:flex;justify-content:space-between;align-items:baseline}details.k2Toc summary::after{content:attr(data-show);font-size:12px; opacity:.7;cursor:pointer}details.k2Toc[open] summary::after{content:attr(data-hide)}details.toc a:hover{text-decoration: none; color: #fe6c6c;}details.toc a:active{text-decoration: none; color: #fe6c6c;}details.toc a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; color:inherit}details.toc ol{list-style:none;padding:0;margin:0; line-height:1.6em; counter-reset:toc-count}details.toc ol ol ol ol{display:none}details.toc ol ol, .tocIn li:not(:last-child){margin-bottom:5px}details.toc li li:first-child{margin-top:5px}details.toc li{display:flex;flex-wrap:wrap; justify-content:flex-end}details.toc li::before{flex:0 0 23px; content:counters(toc-count,'.')'. ';counter-increment:toc-count}details.toc li a{flex:1 0 calc(100% - 23px)}details.toc li li::before{flex:0 0 28px; content:counters(toc-count,'.')}details.toc li li a{flex:1 0 calc(100% - 28px)}details.toc li li li::before{flex:0 0 45px}details.toc li li li a{flex:1 0 calc(100% - 45px)}details.toc .toc >ol{margin-top:1em}details.toc .toc >ol >li >ol{flex:0 0 calc(100% - 23px)}details.toc .toc >ol >li >ol ol{flex:0 0 calc(100% - 45px)}details.toc .toc >ol >li >ol ol ol{flex:0 0 calc(100% - 35px)}</style><script>/*<![CDATA[*/ /* Daftar Isi */class TableOfContents{constructor({from, to}){this.fromElement=from; this.toElement=to; this.headingElements=this.fromElement.querySelectorAll("h1, h2, h3, h4, h5, h6"); this.tocElement=document.createElement("div");}; getMostImportantHeadingLevel(){let mostImportantHeadingLevel=6; for (let i=0; i < this.headingElements.length; i++){let headingLevel=TableOfContents.getHeadingLevel(this.headingElements[i]); mostImportantHeadingLevel=(headingLevel < mostImportantHeadingLevel) ? headingLevel : mostImportantHeadingLevel;}return mostImportantHeadingLevel;}; static generateId(headingElement){return headingElement.textContent.replace(/\s+/g, "_");}; static getHeadingLevel(headingElement){switch (headingElement.tagName.toLowerCase()){case "h1": return 1; case "h2": return 2; case "h3": return 3; case "h4": return 4; case "h5": return 5; case "h6": return 6; default: return 1;}}; generateToc(){let currentLevel=this.getMostImportantHeadingLevel() - 1, currentElement=this.tocElement; for (let i=0; i < this.headingElements.length; i++){let headingElement=this.headingElements[i], headingLevel=TableOfContents.getHeadingLevel(headingElement), headingLevelDifference=headingLevel - currentLevel, linkElement=document.createElement("a"); if (!headingElement.id){headingElement.id=TableOfContents.generateId(headingElement);}linkElement.href=`#${headingElement.id}`; linkElement.textContent=headingElement.textContent; if (headingLevelDifference > 0){for (let j=0; j < headingLevelDifference; j++){let listElement=document.createElement("ol"), listItemElement=document.createElement("li"); listElement.appendChild(listItemElement); currentElement.appendChild(listElement); currentElement=listItemElement;}currentElement.appendChild(linkElement);}else{for (let j=0; j < -headingLevelDifference; j++){currentElement=currentElement.parentNode.parentNode;}let listItemElement=document.createElement("li"); listItemElement.appendChild(linkElement); currentElement.parentNode.appendChild(listItemElement); currentElement=listItemElement;}currentLevel=headingLevel;}this.toElement.appendChild(this.tocElement.firstChild);}}/*]]>*/</script><script>document.addEventListener('DOMContentLoaded', ()=> new TableOfContents({from: document.querySelector('#post-body'), to: document.querySelector('#toContent')}).generateToc() );</script></b:if> - Silakan buka artikel yang kamu ingin tambahkan Daftar Isi, kemudian klik HTML view untuk mengubah view ke editor HTML.
- Terakhir, paste kode berikut dimana pun kamu mau, tapi kami sarankan sebaiknya Daftar Isi ditempatkan di bawah kalimat pengantar atau di bawah gambar artikel kamu.
<details class="k2Toc toc"><summary data-hide="Tampilkan" data-show="Sembunyikan">Daftar Isi</summary> <div class="toc" id="toContent"></div></details>
- Langkah pengkodean berakhir disini, klik Publish untuk menyimpan dan kamu sudah selesai menambahkan Daftar Isi ke Artikel kamu :)
Penutup
Menambahkan Daftar Isi di artikel akan sangat membantu untuk meningkatkan pengalaman membaca pengunjung blog kamu, selain itu kamu juga bisa mendapatkan peringkat yang baik di mesin pencarian. Semoga dengan artikel Cara Menambahkan Table of Contents atau Daftar Isi 2022 ini bisa bermanfaat untuk pengembangan blog kamu. Jika kamu menemukan error atau masalah ketika mengimplementasikan kode di atas, silakan komentar di bawah ya, dan jangan lupa share dan rekomendasikan tips ini ke teman kamu yang membutuhkan.
#MARIMEMBACA
