Skip to main content

Cara Membuat Table of Content di Blogger Lengkap

BlogDola Cara Membuat Table of Content di Blogger - Pada kesempatan kali ini saya akan membuat tutorial cara membuat table of content lengkap dengan gambar.


Apa Itu Table of Contect ? 


Table of Content ini sendiri adalah sebuah daftar yang berisi poin-poin dalam artikel kalian yang bisa digunakan sebagai pemintas jika pembaca ingin langsung menuju poin tertentu.

Table of Content ini juga berdampak baik pada seo yang nantinya jika beruntuk bisa mendapatkan sejenis sitelink atau mungkin sitelink itu sendiri untuk artikel kamu, contohnya seperti gambar berikut.

Blogdola.com

Baiklah, jika kalian mau memasang table of content seperti gambar paling atas berikut tutorial lengkap nya.

Cara Membuat Table of Content di Blogger


Langkah pertama buka dahulu Blogger > Tema/Theme > Edit HTML > Kemudian salin lalu paste kode berikut ini tepat diatas atau sebelum kode </head>

<style type='text/css'>/* CSS Table of Contents */#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}#toc_list{font-weight:700;cursor:pointer;margin:10px 0}#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}#toc_list svg{vertical-align:middle}#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}#toc ol li:before{left:-2em}#toc li a{color:#222}#toc li a:hover{color:#1e90ff}#toc{display:grid}.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}.back_tocontent:hover{background:#2d3436;color:#fff}:target::before{content:'';display:block;height:40px;margin-top:-40px;visibility:hidden}</style>

Langkah berikutnya, sisipkan kode dibawah ini tepat sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});//]]>
</script>

Kemudian Simpan Tema.

Selanjutnya untuk memasang table of content didalam postingan. Pilih Mode HTML (Bukan Compose) letakkan kode dibawah sesuai tempat yang kalian inginkan untuk memasang table of content.

<div id="light-toc"><div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div><div id="toc"><ol><li><a href="#toc_1" title="Poin Artikel 1">Poin Artikel 1</a></li><li><a href="#toc_2" title="Poin Artikel 2">Poin Artikel 2</a></li><li><a href="#toc_3" title="Poin Artikel 3">Poin Artikel 3</a></li><li><a href="#toc_4" title="Poin Artikel 4">Poin Artikel 4</a></li><li><a href="#toc_5" title="Poin Artikel 5">Poin Artikel 5</a></li></ol></div></div>

Agar table of content diatas dapat diklik dan mengarah ke poin-poin artikel yang kamu inginkan, ubah heading mu dan sisipkan id="toc_1", id="toc_2", dan seterusnya. Misal sebelum ditambahkan id.

<h4>Cara Membuat Table of Contents di Postingan Blogger</h4> Ini adalah lorep ipsum dolor sit amet-amet jabang bayi. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Setelah dipasangkan id.

<h4 id="toc_1">Cara Membuat Table of Contents di Postingan Blogger</h4> Ini adalah lorep ipsum dolor sit amet-amet jabang bayi. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Silahkan kreasikan kode diatas dan urutkan idnya sesuai heading poin artikel kalian. Contohnya seperti ini.

<h4 id="toc_1">Poin Artikel 1</h4> Ini adalah lorep ipsum dolor sit amet-amet jabang bayi. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_2">Poin Artikel 2</h4> Ini adalah lorep ipsum dolor sit amet-amet jabang bayi. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_3">Poin Artikel 3</h4> Ini adalah lorep ipsum dolor sit amet-amet jabang bayi. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_4">Poin Artikel 4</h4> Ini adalah lorep ipsum dolor sit amet-amet jabang bayi. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <h4 id="toc_5">Poin Artikel 5</h4> Ini adalah lorep ipsum dolor sit amet-amet jabang bayi. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Selesai...

Kendala yang Sering Terjadi

Kalo kalian mengalami masalah biasanya kendala yang terjadi adalah table of content ini gagal mengarah ke poin artikel, hal tersebut dikarenakan terdapat link yang ditambahkan otomatis oleh blogger. Seperti ini contohnya.

Blogdola.com

Hapus https://www.blogger..... dan sisakan #toc_1 saja. Jangan diubah kembali ke mode Compose karena jika kalian ubah ke compose akan kembali seperti gambar diatas lagi.

Saran saya untuk setting table of content lakukan pada waktu yang akhir sebelum di pos. Setelah kalian edit hasilnya akan seperti ini.

Blogdola.com

Sekian informasi yang saya berikan tentang Cara Membuat Table of Content di Blogger semoga bermanfaat bagi pengunjung dan kita semua.