rp0bNChIFHEQLNOWnNlTR7tYV3Qi69riOvEhpJHL
Banner IDwebhost

Cara Membuat Tabel Of Content (TOC) di Postingan Blogger


Samied.com - Apabila artikel yang sobat tulis panjang bahkan sampai lebih dari 1000 kata, sangatlah dianjurkan untuk memakai widget ini, supaya pengunjung lebih mudah membaca keseluruhan artikel yang sobat buat.

Bukan sekedar untuk gaya-gayaan dan agar tampilannya lebih menarik, namun ada satu manfaat besar dari sisi SEO. Menu-menu tersebut akan ikut terindex dan tampil dihasil pencarian. Ini disebut juga dengan jump link atau ketika di-klik maka otomatis akan loncat ke menu yang dituju.

Pemasangan TOC ( Tabel Of Content) juga berpengaruh ketika sedang mendaftar Google AdSense. Blog yang kita daftarkan ke google adsense akan mendapatkan peluang lebih besar diterima menjadi publisher di Google AdSense.

Pengertian TOC ( Tabel Of Content )

Tabel Of Content adalah sebuah daftar isi dari sebuah artikel yang berisi poin-poin atau bagian-bagian penting yang terdapat pada artikel tersebut. TOC bisa digunakan sebagai rincian dari isi artikel yang berbentuk link sehingga memudahkan pembaca untuk memilih bagian informasi yang akan dibaca.

Tentunya ini akan membuat pengunjung tidak perlu repot-repot scroll atas bawah membacanya.

Cara bikin TOC di dalam Postingan Blogspot


Untuk membuatnya silahkan ikuti langkah-langkah berikut ini.

Buka Blogger > Pilih Menu Tema > Pilih Menu Edit HTML > lalu tambahkan kode CSS berikut tepat diatas kode </head>

<style type='text/css'>
/* CSS Table of Contents */
#samied-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>

Kemudian tambahkan kode berikut ini sebelum </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>

Terakhir pilih tombol Simpan Tema

Sekarang kita lanjut ke bagian membuat daftar isi atau tabel of content didalam postingan blogger. Tambahkan kode berikut pada tab HTML ( bukan Compose ). Lalu letakkan kode ini diawal paragraf.

<div id="samied-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>

Kemudian atur penulisan judul ( heading ) artikel dengan ID yang sama seperti tabel of content. Berikut contoh penerapannya.

<h4 id="toc_1">
Heading Bagian 1</h4>

.... isi artikel anda

<h4 id="toc_2">
Heading Bagian 2</h4>

.... isi artikel anda

<h4 id="toc_3">
Heading Bagian 3</h4>

.... isi artikel anda

<h4 id="toc_4">
Heading Bagian 4</h4>

.... isi artikel anda

<h4 id="toc_5">
Heading Bagian 5</h4>

.... isi artikel anda

Dan ini contoh penerapan tabel of content yang telah sobat terapkan pada template blog tadi.

Sekian artikel tentang cara membuat tabel of content di blogger, semoga mudah dipahami dan bermanfaat. Saya sarankan untuk menggunakan TOC ini hanya pada artikel yang benar-benar panjang. Semangat untuk terus berkarya blogger Indonesia.
Related Posts
Silvia
Tidak normal tapi spesial. Blogger merangkap content writer yang secara ajaib tersesat di bidang keuangan. Semua tulisan di sini tersedia berkat bantuan kopi tanpa gula.
SHARE

Related Posts

Subscribe to get free updates

Post a Comment