Cara Memasang TOC (Table Of Content) Manual dan Otomatis di Blogspot

SERBARENA - Memasang TOC (table of content) di dalam blogspot hukumnya tidak wajib melainkan disarankan ada bagaimana cara pemasangan TOC (table of content) dalam blog?

Sebagai pemula pasti Anda memikirkan banyak hal tentang TOC (table of content). Anda pasti bertanya tentang:

1. Apa itu TOC (table of content)?
2. Mengapa harus TOC (table of content)?
3. Apa manfaat dari TOC (table of content)?
4. Cara memasang TOC (table of content) Manual?
5. Cara memasang TOC (table of content) Otomatis?
6. Bagaimana jika tidak memasang TOC (table of content) dalam SEO?

Sebelum ke tahap pemasangan SERBARENA akan memberikan pengetahuan terlebih dahulu mengenai TOC (table of content).

Pengertian TOC (Table of Contents)

Dalam bahasa Inggris TOC atau table of content artinya daftar isi. TOC (table of content) didalam bak adalah daftar isi yang memudahkan pengunjung untuk menuju informasi dengan mudah.

Pengunjung tidak perlu repot untuk scroll ke bawah atau ke atas dalam mencari sub judulnya. Dengan adanya TOC (table of content) pengunjung dapat langsung jump link internal tanpa harus berlama-lama membaca konten artikel blog.

Daftar isi dalam Wikipedia, biasanya menuju ke konten dengan sederhana dan disingkat secara informal. Singkatnya TOC adalah daftar. Biasanya TOC posisinya berada pada awal tulisan yang terbentuk daftar isi dan job judulnya secara singkat.

Seberapa penting TOC (Table Of Content) dalam SEO?

Tabel of content mungkin tidak secara langsung memberikan peringkat terhadap kualitas blog. Ketahuilah bahwa dengan TOC dapat meningkatkan pengalaman pengunjung dan kenyamanan dalam mencari informasi.

Anda harus memprioritaskan kepada pengunjung agar selalu betah dan berlama-lama di blog anda.

Blog seperti apa yang mengharuskan memasang TOC?

Tidak semua blok mengharuskan untuk memasang TOC. Biasanya lebih yang yang memiliki ribuan kata dan untuk mempersingkat nya adalah menggunakan TOC.

Jika konten artikel dalam blog Anda sedikit, tentu TOC dapat mengganggu pemandangan atau pengalaman pengunjung dalam membaca artikel.

1. Tidak pakai TOC. Halaman buku yang terdiri dari sekitar antara 300 hingga 500 kata tidak perlu memasang TOC. Namun tidak ada salahnya jika anda tetap memasang TOC.
2. Memakai TOC. Konten artikel di halaman blog yang terdiri dari 1000 kata atau lebih, harus memakai TOC. tentu hal ini akan memudahkan pengunjung untuk menyeleksi artikel yang dibutuhkan.

Manfaat TOC (Table of Content)

tabel of content memiliki beberapa kelebihan yang harus kita perhatikan. Adapun kelebihan tabel of content dalam blog antara lain :

1. Memudahkan pengunjung dalam mencari artikel
2. Menyingkat waktu untuk menuju konten blog
3. Meningkatkan seo blog
4. konten atau karya tulis di dalam blog lebih terlihat terstruktur
5. Terkesan rapi

Pengunjung akan mudah dalam menuju tulisan yang yang diinginkan. Selain itu menyingkat waktu waktu tanpa harus berlama-lama membaca dari atas sampai bawah.

Dimata Seo mesin pencari Google table of content lebih diprioritaskan daripada blok yang tidak memasang table of content. Hal ini dikarenakan karya tulis terlihat lebih terstruktur.

Tulisan blog dianggap rapi oleh pengunjung, sehingga tulisan Anda membuat pengunjung nyaman dan disukai.

Contoh Gambar TOC (Table of Contents)

Cara Membuat TOC (Table of Contents) di Blogspot

Memasang TOC (table of content) di dalam blog terdapat dua cara yaitu bisa dengan manual dan otomatis.

Memasang TOC (table of content) secara manual maksudnya adalah menulis di dalam mode HTML blog, blogger menulis script sendiri.

Sedangkan untuk TOC secara otomatis maksudnya adalah tanpa menuliskan script ulang. Mereka hanya cukup memanfaatkan fitur H1, H2, H3 dan seterusnya.

TOC (Table of Content) Otomatis

Pemasangan TOC dalam blog secara otomatis sudah disediakan di bawah untuk scriptnya. Anda tidak perlu menulis apel membuat dari pertama.

Manfaatkan script yang ada di bawah ini langsung di paste ke html blog anda. namun anda harus mengikuti cara pemasangannya.

Ada pin tahapan yang harus dilalui untuk memasang TOC antara lain :

Ingat !

TOC (Table of Content) versi otomatis ini cukup memberatkan dalam performa kecepatan. SEO Blog tentu lebih mengutamakan kecepatan loading blog. TOC di sini hanya bisa digunakan pada tag H2.

Cara Pertama : Pemasangan Kode JavaScript

• Pertama masuk ke dalam dashboard blogger
• Masuk ke perhatikan tema blog. caranya adalah pilih menu tema atau template kemudian edit tema
• Lihat grup tepat di bawah ini dan kopi semua scriptnya

<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[ //*************TOC plugin untuk Blogspot 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>

• Cari kode </head> dan pastikan semua script di atas sebelum atau diatasnya </head>

Cara Kedua : Pemasangan Kode CSS

Setelah menambahkan kode javascript diatas langkah selanjutnya adalah memasang CSS untuk merapikan TOC (Table of Content)

• Copy semua kode di bawah ini dan jangan sampai ada yang terlewatkan

.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: inline block; width: auto; } .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; }

• Pastel semua kode di atas tepat sebelum atau di atasnya ]]</b:skin>. Anda juga bisa memasang di antara <style> dan </style> yang ada di sebelum </head>

Cara Ketiga : Pengubahan Script

• Tetap berada di mode html template template blog, cari kode dibawah ini

<data:post.body/>

• Copy kode tersebut dan gantikan dengan script TOC berikut ini

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

• Jika anda memiliki kode <data:post.body/> lebih dari 1 maka ubahlah semua dengan kode yang di atas 
• Simpan templatenya dan selanjutnya masuk ke mode kompos atau tulis artikel

Cara Keempat : Mengaktifkan TOC ( Table of Content)

Langkah di sini kita berada di Compose atau tulis artikel dengan mode HTML. Adapun langkah yang dilakukan antara lain sebagai berikut :

• Masuk ke Compose atau tulis artikel mode HTML
• Anda bisa menentukan ke paragraf manapun sesuai keinginan anda. Sarannya taruh di paragraf ke-5.
• Copy Script TOC di blog berikut dan pasti ke paragraf ke-5

<div class="mbtTOC"> <button onclick="mbtToggle()">Daftar Isi</button> <ol id="mbtTOC"></ol> </div>

• Langkah terakhir adalah copy script berikut dan paste javascript kedalam tulisan terakhir bagian paling bawah

<script>mbtTOC();</script>

Nah itu sudah cara membuat Table of Contents secara otomatis di Blogger atau Blogspot. Jika kurang suka dengan Table of Contents versi otomatis, di bawah ini mimin sediakan cara membuat Table of Contents versi manual.

TOC (Table of Content) Manual di Blogspot

table of content lebih disarankan pada pengguna yang terbiasa dengan html atau pemrograman. Jika anda pemula dalam blogger maka saran adalah menggunakan table of content otomatis.

Walaupun sebenarnya dalam hal kecepatan loading blog secara manual lebih cepat dibandingkan yang otomatis.

TOC (table of content) secara manual disini cukup melelahkan. Karena harus bolak-balik ke ke mode tulis biasa menuju mode html. Setelah itu kembali lagi ke mode tulis biasa.

Bagaimana langkah pemasangan TOC "table of contents" secara manual di blogspot? Berikut langkah-langkahnya :

Langkah Pertama : Memasang CSS

Langkah pertama yang harus diperhatikan yaitu tentang tampilan atau CSS.

• Sama seperti di atas, yaitu membuka dasbor blogger
• Masuk ke menu utama atau template dan menuju ke edit tema
• Copy semua script di bawah ini dan pastekan CSS ini sebelum </head>.

<style type='text/css'> /* CSS Daftar Isi */ #light-toc{background:#039789;border-radius:3px;padding:10px 20px;color:#fff} #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:#fff} #toc li a:hover{color:#fff} #toc{display:grid} .back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#039789;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s} .back_tocontent:hover{background:#2f303f;color:#fff} :target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden} </style>

• Selesai dan lanjutkan ke langkah kedua yaitu memasang JavaScript

Langkah Kedua : Memasang JavaScript

• Tetap pada edit tema di HTML
• Copy juga script Java script dibawah ini dan paste sebelum tag </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>

• Selesai dan simpan

Langkah Ketiga : Penulisan TOC di Tulis Artikel

• Keluar dari mode html blog sekarang kembali ke tulis artikel
• Tulis artikelnya dengan menggunakan mode html untuk penambahan TOC
• Salin semua kode di bawah ini dan paste mode html dalam tulis artikel

<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"> Daftar Isi <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="#sub1" title="Subheading 1">Bagian Subheading 1</a></li> <li><a href="#sub2" title="Subheading 2">Bagian Subheading 2</a></li> <li><a href="#sub3" title="Subheading 3">Bagian Subheading 3</a></li> <li><a href="#sub4" title="Subheading 4">Bagian Subheading 4</a></li> </ol> </div> </div>

• Simpan dan jangan dipublikasikan dulu

Ingat!!

TOC disini sangat direkomendasikan untuk konten artikel yang memiliki lebih dari 1000 kata. Hal ini dikarenakan bisa menambahkan H1, H2, H3 dst.

Langkah keempat : Tetap Di Tulis Artikel Mode HTML

Saatnya menulis TOC agar headingnya muncul sesuai keinginan. Adapun contoh untuk menulis heading sebagai berikut :

<h2>Subheading 1</h2> Website yang memberikan informasi terkini seputar teknologi, android, blogger, pendidikan, ramalan dan lain sebagainya di Serba Arena.

Tambahkan kode (id="sub1") pada setiap Subheading baik itu heading 1, heading 2 dan seterusnya. Sesuaikan headingnya dengan kebutuhan.

<h2 id="sub1">Subheading 1</h2> Website yang memberikan informasi terkini seputar teknologi, android, blogger, pendidikan, ramalan dan lain sebagainya di Serba Arena.

Bagaimana Jika Tidak Memasang TOC?

Tidak ada salahnya untuk memasang TOC. Justru dengan TOC dapat memperbagus kualitas blog.

Gunakan TOC untuk memudahkan pengunjung atau pembaca dalam membuka website atau blog anda. Anda bisa memakai kedua cara diatas dan sama-sama bermanfaatnya.

Kesimpulan

TOC adalah sebuah cara yang memudahkan untuk pengunjung dalam memahami konten melalui daftar isi.

Dalam web atau blog lebih disarankan menggunakan TOC walaupun tidak sepenuhnya mampu memberi peningkatan kualitas blog.

Semoga dengan memasang TOC (table of contents) di blog dapat meningkatkan kualitas blog dan memberi kenyamanan pengunjung.