2 Cara Menambahkan Daftar Isi di Blogger, Table of Content for Blogger

Baca Juga

Mambahkan Daftar Isi (Table of Content, TOC) dalam posting blog Blogger untuk menyederhanakan struktur posting dan user-friendly. 

Daftar Isi dalam posting blog Blogger memudahkan untuk membaca posting untuk pembaca, serta meningkatkan SEO blog.

Cara menambahkan daftar isi di Blogger berbeda dengan cara memasang TOC di Wordpress. Menambahkan daftar isi di WordPress sangat mudah, yaitu dengan menggunakan beberapa plugin. Tetapi sangat sulit untuk menambahkan daftar isi di Blogger karena Blogger tidak mendukung Plugin.

Berikut ini panduan langkah demi langkah untuk menambahkan daftar isi di Blogger. Sebelum menambahkan ini ke blog Anda, Anda harus mengetahui beberapa manfaat memiliki daftar isi (TOC) di posting blog Blogger.

Pengertian Daftar Isi

Daftar Isi (TOC) sama halnya dengan daftar isi yang kita ketahui pada umumnya. Daftar Isi adalah daftar yang terdiri dari beberapa poin penting atau sub judul yang dibahas dalam sebuah artikel atau postingan dengan memanfaatkan jump link internal.

Contohnya daftar isi postingan ini.

Manfaat SEO Daftar Isi (TOC)

Google selalu menyukai posting dan halaman blog yang detail dan terstruktur dengan baik. Dengan menambahkan daftar isi di posting blog Blogger, Anda membuat posting blog Anda terstruktur dengan baik dan ramah pengguna. tambahkan daftar isi di blogger untuk mendapatkan hasil yang lebih baik.

Jika Anda menambahkan TOC di posting blog Anda, itu akan terstruktur dan ramah pembaca. Google dapat menampilkan jump to link di Search Result Page, ini sangat bermanfaat bagi webmaster dan dapat meningkatkan CTR Anda.

Menurut penelitian oleh NN Group, lebih dari 79% dari total pembaca web adalah pemindai yang hanya membaca poin-poin penting dari sebuah halaman web. Kami juga senang membaca artikel yang mendetail.

Pengalaman pengguna atau User Experience (UX) adalah hal yang sangat penting untuk mendapatkan peringkat yang lebih tinggi di SERP (Halaman Hasil Pencarian). 

Pengalaman pengguna adalah bagian yang sangat penting dari sebuah blog untuk mendapatkan peringkat lebih cepat. Dan daftar isi akan membantu Anda meningkatkan pengalaman pengguna blog Anda.

Menambahkan TOC di Blogger akan memungkinkan pembaca untuk melompat ke bagian penting dari posting blog. Pembaca akan lebih mudah memahami isinya.

Google sangat menyukai artikel blog yang menjelaskan sesuatu dengan sangat rinci dan terstruktur dengan baik. Dengan memasang Daftar Isi pada artikel di blog, maka akan membuat artikel di blog kita lebih terstruktur.

Jika artikel yang ada pada blog kita dianggap terstrukur dengan baik oleh Google maka akan diberikan jump link pada deskripsi meta tag di hasil pencarian seperti yang ditandai warna oranye di bawah ini.

Cara Menambahkan Daftar Isi di Blogger

Langkah pertama login ke Blog Blogger Anda. Pilih blog yang akan ditambahkan daftar isi (TOC). 

1. Klik Tema > edit HTML

2. Copas kode berikut ini di atas kode </head> 

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> <script type='text/javascript'> //<![CDATA[ function mbtTOC() {var mbtTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}} //]]> </script>

3: Copas kode berikut ini di atas kode ]]></b:skin> 

.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;} .mbtTOC ol,.mbtTOC ul {margin:0;padding:0;} .mbtTOC ul {list-style:none;} .mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;} .mbtTOC a{color:#0080ff;text-decoration:none;} .mbtTOC a:hover{text-decoration:underline; } .mbtTOC 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;} .mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

4. Temukan kode <data:post.body/> dan ganti dengan kode ini:

<div id="post-toc"><data:post.body/></div>

5. Simpan Template!

Untuk memunculkannya di postingan klik mode HTML: 

- Copas kode berkut ini setelah alinea pertama.

<div class="mbtTOC"> <button onclick="mbtToggle()">Table Of Contents</button> <ul id="mbtTOC"></ul> </div>

- Copas juga kode berikut ini di bagian akhir tulisan:

<script>mbtTOC();</script>

Boom, Sekarang Anda dapat melihat Daftar Isi di posting Blogger. Anda harus menambahkan dua kode ini pada setiap halaman atau posting yang ingin Anda tampilkan daftar isi di Blogger.

Anda dapat memilih di mana Anda ingin menampilkan daftar isi, sebelum heading pertama atau setelah heading, Anda hanya perlu menempelkan skrip.

Cara Lain Membuat Table of Content Blogger (TOC di Blogspot)

Cara Bikin Table of Contents untuk Blogspot

1. Tema < Edit HTML.
2. Copy semua kode berikut dan tempel di atas kode </head> 

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'> <style media='all' type='text/css'> .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'> //<![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>

3. Ganti kode <data:post.body/> dengan kode di bawah ini:

<div id='post-toc'> <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> <data:post.body/> <script>bwstoc();</script> </div>

Akan ada beberapa (2 atau 3) kode <data:post.body/> di dalam Tema blogspot anda, jadi silakan ganti semua. Anda bisa mencarinya dengan shortcode keyboard ‘Ctrl+F’.

4. Simpan Tema!

Sebagai info tambahan, selain URL hasilnya lebih SEO friendly, script TOC blogspot di atas juga tidak memakai jQuery, tanpa Google Fonts dan tanpa Font Awesome, sehingga diharapkan lebih ringan.

Demikian 2 Cara Menambahkan Daftar Isi di Blogger, Table of Content for Blogger.*

Sumber