Membuat Table Of Content (TOC) Pada Blog

Usuluddin, S.Kom    Kamis, Juni 06, 2019    TUTORIAL   

Membuat Table Of Content ( TOC ) Pada Blog

Table Of Content

• Cara Membuat Table Of Content (TOC) Pada Blog
  1. Langkah Pertama Menambahkan CSS Table Of Content
  2. Langkah Kedua Menambahkan Function Javascript Sebelum body
  3. Langkah Ketiga Menambahkan Kode TOC Pada Postingan

GoSEO.id - Table Of Content atau yang disingkat dengan TOC adalah sebuah daftar ide pokok utama dalam sebuah artikel atau konten.

TOC mempunyai peran penting dalam SEO. Jika anda menerapkannya dalam setiap artikel yang kamu tulis, maka akan mempermudah Search Engine seperti Google, Bing, Yandex, Yahoo, Amazon dan lainnya menemukan artikel tersebut karena perusahaan besar seperti mereka menyukai artikel yang informatif atau memberikan informasi.

Selain itu TOC juga membantu dan memudahkan pengunjung blog kamu untuk memilih informasi dari bagian pokok yang ingin dibaca.

Baiklah, kita langsung saja tips membuat Table Of Content (TOC) pada blog dengan mudah.

Cara Membuat Table Of Content (TOC) Pada Blog

1. Langkah Pertama Menambahkan CSS Table Of Content

Buka Blogger kamu > Lalu klik menu Tema > Klik tombol Edit HTML > Kemudian tambahkan kode CSS dibawah ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<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:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>

Atau untuk mempersingkat, kamu juga bisa mengganti kode CSS diatas dengan kode dibawah ini

<!-- CSS Table Of Content (TOC) -->
<link href='https://rawcdn.githack.com/usuluddin25/Kumpulan-JS-CSS-GOSEO/c8d14386247bc239150353d8529f1c0efdd9d7e7/CSS_TOC.css' rel='stylesheet' type='text/css'/>
<!-- CSS Table Of Content (TOC) -->

Kembali ke List TOC

2. Langkah Kedua Menambahkan Function Javascript Sebelum </body>

Pada tahap ini sama saja seperti tahap pertama, yaitu menambahkan kode Javascript sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

Ingat, masukkan kode dibawah ini sebelum atau tepat diatas </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<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>

Setelah melakukan tahap Pertama dan Kedua, lalu klik tombol Simpan Tema.

Kembali ke List TOC

3. Langkah Ketiga Menambahkan Kode TOC Pada Postingan

Pada tahap ini yaitu bagian postingan. Buat postingan di Editor Post blogger. Tambahkan kode dibawah ini pada tab HTML (Ingat Bukan Tab Compose).

<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="Subheading 1">Bagian Subheading 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Bagian Subheading 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Bagian Subheading 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Bagian Subheading 4</a></li>
<li><a href="#toc_5" title="Subheading 5">Bagian Subheading 5</a></li>
</ol>
</div>
</div>

Edit tulisan yang ditandai dengan tulisan kamu sendiri. Lalu tambahkan id="toc_n" pada setiap heading sesuai dengan ID pada kode di atas. Note: Ganti huruf "n" pada id="toc_n" dengan urutan ID pada Table of Content yang telah kamu buat. Contoh id="toc_1" atau id="toc_2" dan seterusnya.

Kemudian tambahkan kode dibawah ini pada bagian akhir setiap paragraf.

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">Kembali ke List TOC</div>

Kembali ke List TOC

Nah.. tips membuat TOC sudah selesai, lalu tinggal kamu Publish saja post yang telah kamu buat dan lihat hasilnya. Bagaimana? gampang bukan?

Demikianlah Tutorial Membuat Table Of Content (TOC) Pada Blog, semoga postingan ini bermanfaat. Silahkan berikan komentar jika ada tahapan yang tidak kamu pahami.