Cara membuat table of Content Website atau Blog

Konten [Tampil]

 Table of Content adalah sebuah tautan daftar isi yang mewakili keseluruhan rangkaian artikel yang ada pada konten tersebut. Dengan adanya daftar isi, sehingga pengunjung dapat dengan cepat melakukan jumping read atau mengecek secara keseluruhan terkait pembahasan artikel tersebut.

Alasan lain membuat table of content blog tidak hanya untuk acuan pembaca, disisi lain fitur ini menjadi salah satu bentuk optimasi SEO artikel.

Cara membuat Table Of Conten Artikel.

Cara membuat daftar Isi Blogger
Table of Content bisa diartikan sebagai daftar isi yang ada dalam struktur artikel. 

Ada dua platform populer yang banyak dipakai oleh para blogger. Yakni CMS Wordpress dan Blogger, keduanya memiliki kekurangan dan kelebihan masing -masing.

 Termasuk dari fiturnya, apabila wordpress dapat memasang ToC Memakai Pluggin maka pada pengguna platform Blogger hanya bisa menerapkan table of Content secara manual.

"Maksud dari manual adalah dengan menyisipkan atau menambahkan script kedalam templete".

Ada beberapa versi daftar isi artike yang bisa kalian gunakan pada platform blogger , yakni versi otomatis dan manual.

Versi Otomatis sangat simple, kalian cukup memasang script daftar isi konten kedalam tema dan menyimpanya. Maka setiap kali anda telah membuat artikel otomatis akan dilist menjadi daftar isi.

Versi manual biasanya sama-sama mengharuskan kalian menyisipkan script. Tetapi pekerjaan kalian tidak hanya sampai disana, pasalnya anda harus tetap menunjuk tag yang akan dijadikan toc. Ya , menuut saya ribet,namun ini masalah selera,.

Pada tutorial SEO kali ini saya akan memberikan pembahasan cara membuat daftar isi artikel yang dapat dipasang pada plaftom blogger secara otomatis.

Baca juga, Cara Oprimasi Featured Snippet Google

Table of Contents Otomatis Blogspot

Setelah memasang scirpt dibawah dan selesai secara sukses seharusnya secara otomatis setiap artikel yang sudah kalian publikasi akan memiliki table of content tanpa menentapkan secara manual.

Menampilkan seluruh isi berdasarkan tag H2-H6. Sehingga agar artikel kalian akan memiliki struktur daftar isi , pastikan mengandung tag heading yang memadai. Mulai dari judul, sub judul dan seterusnya. 

Berikut cara memasang Toc Blogspot

Yang pertama Masuk Ke halaman Blogger , login memakai alamat email dan password sesuai akun yang digunakan.

  • Kemudian pilih Blog / Web Yang akan dipasangi ToC (Daftar Konten Otomatis)
  • Gulir bagian menu Beranda, kemudian Pilih tema dan pada bagian sesuaikan klik icon Segitiga. Disana kalian bisa memili cadangkan terlebih dahulu untuk menghindari kesalahan dan mudah untuk memulihkannya.

Cara membuat ToC Blogspot
  • Kemudian pilih Opsi "Edit Html"
Membuat daftar Isi konten Blogsopt

  • Kemudian masukan kode diabwah diletakan diatas </head>. Untuk mempercepat pencarian gunakan fitur atau kolom search atau dengan Cara Ctrl +F kemudian ketik </head>

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>

<style media='all' type='text/css'>

/* 

 * Blogspot TOC

 * https://bibit.ws/toc-di-blogspot.php

*/

.bwstoc {

 margin: 10px 0;

 background: #F0F0F0;

 border: 1px solid #ddd;

}

.bwstoc ol, .bwstoc ul {

 margin: 0 0 15px 20px;

 padding: 0;

}

.bwstoc ul {

 list-style: disc;

}

.bwstoc ol li, .bwstoc ul li {

 font-size: 95%;

 padding: 5px 10px 0 0;

 margin: 0 0 0 30px;

}

.bwstoc a {

 text-decoration: none;

}

.bwstoc a:hover {

 text-decoration: underline;

}

.bwstoc .bwstocHeader {

 font-weight: bold;

 font-size: 100%;

 position: relative;

 outline: none;

 border: none;

 padding: 5px 15px 5px 5px;

 margin: 5px 10px;

}

.bwstoc .bwstocHeader a {

 text-decoration: none;

 cursor: pointer;

}

.bwstoc .bwstocHeader a:hover {

 text-decoration: underline;

}

</style>

<!-- Blogger TOC -->

<script type='text/javascript'>

/* 

 * SEO Friendly Blogspot Table Of Contents

 * https://bibit.ws/toc-di-blogspot.php

*/

//<![CDATA[

function bwstoc() {

 var bwstoc = i = headinglength = getheading = 0;

 headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;

 if (headinglength > 1) { 

 // Hanya Tampil Jika Ditemukan Minimal 2 Heading

 for (i = 0; i < headinglength; i++) {

 getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;

 var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");

 var bws_2 = bws_1.trim();

 var getHeadUri = bws_2.replace(/\s/g, "_");

 document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);

 bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";

 document.getElementById("bwstoc").innerHTML += bwstoc;

 }

 } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }

}

function bwstocShow() {

    var bwstocBtn = document.getElementById('bwstoc');

 var bwstocWrapID = document.getElementById('bwstocwrap');

 var bwstocLink = document.getElementById('bwstocLink');

    if (bwstocBtn.style.display === 'none') {

        bwstocBtn.style.display = 'block';

 bwstocWrapID.style.display = 'block';

 bwstocLink.innerHTML = 'Tutup';

 

    } else {

        bwstocBtn.style.display = 'none';

 bwstocWrapID.style.display = 'inline-block';

 bwstocLink.innerHTML = 'Tampil';

    }

}

//]]>

</script>

<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>

</b:if>

Setelah semua kode diatas telah dimasukan, berikutnya kalian perlu melakukan satu tahapan lagi supaya artikel yang telah dibuat dapat terdeteksi memiliki struktrur daftar isi. 

Lanjutkan dengan cari <data:post.body/> kemudian ganti dengan script dibawah. Biasanya tag <data:post.body/> pada blogspot ada tiga kalian bisa mencoba satu persatu hingga artikel berhasil muncul daftar isi.

Berikut Script daftar isi blogspot.

<div id='post-toc'>

<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]</div><ul id='bwstoc' style='display:none'/></div>

<data:post.body/>

<script>bwstoc();</script>

</div><!-- end TOC -->

Setelah selesai, Klik Simpan dan Cek blog kalian sudah mempunyai daftar isi otomatis. Apabila berhasil pada artikle kalian dapat melihat ToC yang muncul pada artikel ini.

Bagaimana membuat daftar isi Otomatis Wordpress

Wordpress menjadi salah satu CMS yang populer banyak digunakan oleh para blogger pemula maupun yang telah berpengalaman. Selain tu Wordpress juga dinilai paling ideal untuk membuat website company profile dan keperluan lain.

Salah satu kelebihan Wordpress adalah dengan adanya dukungan plugin baik gratis dan premium. Salah satunya saat kalian akan mebuat daftar isi artikel, kalian cukup memasang plugin Table of Contents Plus kemudian mulai mengaturnya.

Pengaturan TOC Wordpress

  1. Gulir kebawah Pilih tap Settings > TOC+
  2. Kemudian pada tab Main Options , lalu tentukan position "Top" , Show When "4" dan Centang bagian "Post , Page"
  • Position - Mengatur posisi dari daftar isi artikel.
  • Show when - Menenukan jumlah TOC yang ditampilkan berdasarkan minimal sub-judul yang ada dalam artikel kalian.
  • Silakan centang bagian post ,  page apabila menginginkan kedua halaman tersebut menampilkan daftar isi pada konten
  • Heading text - Menentukan  nama dari daftar isi.
  • Show hierarchy - Menentukan jenis menampilkan hierarki pada daftar isi.
  • Number list items - Menentukan nomor pada daftar isi.
  • Width -  untuk setelan lebar dari daftar isi.
  • Wrapping - untuk setelan posisi.
  • Font size -  untuk setelan ukuran huruf.
  • Presentation -  untuk Setelan tampilan.
.. dan Seterusnya sama dengan mengatur plugin lain. disana juga kalian dapat melihat versi demo, atau visual hingga terpasang pada artikel.

Itulah pembahasan terkait dengan cara membuat table Of Content Blog otomatis yang dapat pasang pada platfom blogger baik yang masih berektensi blogspot atau yang sudah top level domain.

Source: Bibit WS

Belum ada Komentar untuk "Cara membuat table of Content Website atau Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Hello!

Silahkan Tanyakan Dulu, GRATIS

CS Website Pelayanan Order Web
6283837068818
CS SEO Pelayan Order SEO
6283837068818
Call us to +6283837068818 from 0:00hs a 24:00hs
Apa yang Bisa kami Bantu
×
How can I help you?