Cara Menciptakan Table Of Contents Otomatis Di Blogger - Masgunggoyo

Cara Menciptakan Table Of Contents Otomatis Di Blogger

Script Table Of Contents Otomatis

Sebelumnya aku sudah pernah menciptakan tutorial cara memasang table of contents di blogger, namun cara tersebut masih manual.

Artinya, kita harus kerja ekstra dengan menambahkan attribut ID pada setiap tag heading(h2,h3,h4,h5,h6) artikel jikalau akan memasang table of contents.

Nah, untuk tutorial kali ini berbeda dan lebih mudah, script yang digunakan akan mendetek semua tag heading yang ada di dalam artikel lalu akan ditampilkan menjadi table of contents.

Jadi, sahabat tidak usah ribet untuk menambahkan atribut id dan menciptakan list secara manual, semua menjadi otomatis.

Kelebihan Dan Kekurangan Memasang Table Of Contents Otomatis di Blogger

Kelebihan

  1. Mudah, Karena Otomatis
  2. Memudahkan Visitor Membaca Isi Artikel
  3. Artikel Menjadi Lebih SEO Friendly
    Artikel dengan Table Of Contents biasanya akan mendapatkan sitelink dari google.
Sebelumnya aku sudah pernah menciptakan tutorial  Cara Membuat Table of Contents Otomatis Di Blogger
Contoh Artikel Yang Mendapatkan Sitelink Karena Menggunakan Widget Table Of Contents

Kekurangan

  1. Karena otomatis, jadi kurang cocok untuk artikel pendek. Tapi jikalau dibentuk menjadi semi-otomatis, pemasangan table of contents ini tidak memiliki kekurangan!

Cara Memasang Table Of Contents Otomatis di Blogger

1. Pertama, buka editor template blogger.
2. Cari </head>, lalu letakan script ini diatasnya.
<b:if cond='data:view.isPost'> 
<style>
.mbtTOC2{margin-bottom:15px;padding-left:1em;border-left:3px solid #0f7aff}.toggle{padding:0;outline:0;border:none; background:none;font-size:16px}#mbtTOC2 ol{padding:0;margin:0;list-style:none}#mbtTOC2 ol ol{margin-left:20px}#mbtTOC2 ol ol ol{margin-left:25px}
</style>
<script>
//<![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="Tutup"):(a.style.display="none",b.innerHTML="Buka")}
//]]>
</script>
</b:if>

3. Cari <data:post.body/> untuk halaman posting (biasanya yang ke dua), ganti dengan aba-aba di bawah ini.
<div id="post-toc">
<div class="mbtTOC2">
<button class='toggle'>Daftar Isi <span>[<a onclick="mbtToggle2()"  id="Tog">Tutup</a>]</span></button>
<div id="mbtTOC2"></div>
</div>
<data:post.body/>
<script>mbtTOC2();</script>
</div>

4. Simpan tema, lihat jadinya pada halaman posting. Jika ToC tidak muncul, coba ganti <data:post.body/> yang lain.

Keterangan

Marking (Merah) Keterangan
1 *Ganti sesuai selera.
2 *Berfugsi untuk fitur buka tutup table of contents.
3 *Untuk memanggil fungsi script buka tutup table of contents, hapus aba-aba ini jikalau script buka tutup(marking 1) dihapus
4 *Script ini optional, jikalau tidak dihapus, maka table of contents akan muncul otomatis di semua postingan.

Jika dihapus, maka TOC menjadi semi-otomatis. Jadi, jikalau ingin menampilkan TOC, sahabat harus menambahkan script tersebut di final postingan pada hidangan HTML untuk memanggil fungsi scriptnya.

Itulah cara gampang menciptakan table of contens secara otomatis di postingan blogger, selamat mencoba. Terimakasih…

Referensi:
https://www.masgunggoyo.com//search?q=table-of-contents-untuk-blogger
()

0 Response to "Cara Menciptakan Table Of Contents Otomatis Di Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel