Cara Membuat Daftar isi Table of Content di Blog Blogger, Wordpress »
Home » Berita Hari Ini » Design Website » Cara Membuat Daftar isi Table of Content di Blog Blogger, WordPress

Cara Membuat Daftar isi Table of Content di Blog Blogger, WordPress

Bagaimana Cara Membuat Daftar isi (Table of Content) Blogger, WordPress. Ada banyak solusi yang sampai detik ini bisa kamu pilih untuk membuat daftar isi di Blog. Memang banyak tutorial tentang Toc / Daftar isi yang sering di Tulis oleh sejumlah kalangan, tapi tidak semua panduan itu bekerja dengan baik. Sehingga dalam bab kali ini, Saya akan membahas secara detail tentang hal itu dan pengaruhnya terhadap SEO.

Sebelum saya bahas lebih jauh, Simak ilustrasi Table of Content berikut ini. Ilustrasinya adalah … Pada suatu halaman artikel di salah satu website memiliki daftar isi. Pada halaman itu tertulis jelas “Cara membuat daftar isi”. Maka ketika di Klik, sorang pembaca akan di Arahkan langsung ke topik yang di inginkan yakni heading atau List tersebut. Sebagaimana tertulis pula sub judul serupa dengan Link Table toc yang di klik oleh pembaca. Apakah sudah ada gambaran tentang Table Of Conten / Daftar isi Blog tersebut?, Jika sudah, Mari pelajari lebih lanjut sebelum kamu terapkan pada blog kesayangan Anda.

Memang Blogger bisa di Pasangi table Toc ?

Menilik Platform blogger secara default tidak mendukung PHP maka solusinya adalah menggunakan pemrograman Java Script, HTML dan CSS. Lain halnya dengan situs yang di Bangun dari wordpress. WordPress sudah di Dukung oleh beberapa fitur Plugin Khusus sehingga pemilik blog tidak perlu memasang JavaScript atau HTML secara manual. Cukup memanfaatkan Plugin yang ada maka Daftar isi / table of content akan terbentuk secara otomatis.

Pengertian Table Of Content (Toc)

Table Of Content Atau biasa di Singkat TOC Merupakan suatu daftar isi yang akan terbentuk otomatis atau manual lewat Tag Heding yang telah di Sesuaikan oleh pemilik Blog sebelumnya. Biasanya table toc ini di Buat atas penerapan Heading yaitu dari H1 – H6. Karena menurut teori SEO H1 lebih fokus untuk kerangka Title Pos, Maka Pemilik website tidak menggunakan fungsi H1 pada table toc. Sehingga table of content saat ini di Terapkan mulai dari H2 – H6 saja.

Fungsi Table Of Content

Karena TOC adalah daftar isi, maka sangat berguna untuk membuat rangkaian suatu konten Artikel panjang. Daftar isi ini sering di Terapkan pada suatu artikel dengan jumlah kata di Atas 700 karakter. Jika kamu lihat dari segi klarifikasi, maka toc ini berperan sebagai Sub judul yang mengandung keyword sehingga baik untuk SEO On Page dan mampu menambah trafik secara signifikan. Tidak percaya dengan pengaruh Trafik karena penggunaan daftar isi? Coba baca dan pelajari Fakta table of content terhadap SEO dan kualitas artikel

Mengenai peran Table toc untuk SEO On Page sudah saya jabarkan dan Silahkan pelajari pada artikel yang berjudul Fungsi Table of Content untuk SEO

Cara membuat Table of Content di Blogger

Seperti yang kita tahu bahwa Platform blog Builder Blogger tidak di Dukung program PHP. Sehingga cara membuat daftar isi pada blogger tidak bisa memanfaatkan plugin. Tapi ada cara yang bisa kamu gunakan untuk membuat daftar isi tersebut yaitu dengan memanfaatkan Script HTML (Untuk memanggil Toc) dan CSS untuk mendesign tampilan.

Script Css table Toc :

#btn_toc{font-weight:bold;cursor:pointer}
 #btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}

#toc li,.back_toc{cursor:pointer;}
.back_toc{background:#ff0000;margin:1px;padding:3px;color:#fff;text-align:center;}

#toc{display:grid;background:#F8F8FF}
h4{color:green;font-weight:bold;}   :target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden;}
sumber{color:blue;font-weight:bold;}   :target::before{content:"";display:block;widtdh:100%;margin-top:-40px;visibility:hidden;}

Penjelasan :

Pada CSS di Atas saya menggunakan Tag Heading 4 untuk memanggil Link Toc, Anda bisa merubahnya dengan H1-h6 sesuai keinginan

HTML Table Toc Blogger

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

Penjelasan :

Pada kata “DAFTAR ISI” di Atas bisa Anda ganti dengan tulisan apapun sesuai keinginan Anda dan tulisan tersebut nantinya akan muncul sebagai menu daftar isi dan bisa di klik untuk menutup dan membuka daftar isi (table toc).

Cara pasang Table Toc ke Blogger

  1. Copy semua kode CSS table toc di Atas lalu Paste pada template blog sebelum kode dan simpan
  2. Masuk ke menu Posting baru
  3. Copy Semua kode HTML di Atas lalu pastekan pada area post pada mode HTML
  4. Buat Daftar isi menggunakan HTML Number list dan menggunakan Tag Div (lihat kode HTML di Bawah)
  5. Panggil Table toc dengan membuat sub judul dengan tag heading serupa yaitu H4

HTML Tag Div Number List table Toc

<div id="toc"><ol>
<li><a href="#toc1">Daftar isi 1</a></li>
<li><a href="#toc1">Daftar isi 2</a></li>
<li><a href="#toc1">Daftar isi 3</a></li>
<li><a href="#toc1">Daftar isi 4</a></li>
</ol></div>

Taruh HTML tag div Number list tersebut pada area post tepat di Bawah kode table toc agar tampilan daftar isi berada pada posisi paling atas atau bisa juga kamu taruh pada posisi yang kamu inginkan.

https://disqusweb.com

HTML untuk memunculkan Table Toc

<h4 id="toc_1">Daftar isi 1</h4>
<h4 id="toc_2">Daftar isi 2</h4>
<h4 id="toc_3">Daftar isi 3</h4>
<h4 id="toc_4">Daftar isi 4</h4>

Kode HTML tersebut nantinya akan mucul ketika HTML item list tersebut di klik dan akan mengikuti permalink #toc sesuai dengan urutan nomor. Jika anda menekan #toc_1 atau sama dengan “daftar isi 1” maka pembaca akan langsung di Arahkan ke toc_1 atau Daftar isi 1

https://disqusweb.com

Tips !!!

  1. Kode CSS di Atas jangan kamu rubah, kecuali Kode warna dan kode h4 serta ukuran resolusi background item list “li”
  2. Apabila kamu ahli dalam bidang CSS maka bisa merubah seluruh design css tersebut. Namun tidak berlaku untuk semua HTML table toc karena dapat menyebabkan kerusakan
  3. Table toc / Daftar isi blogger yang kami share sudah mendukung Google Search result dan Suport semua sitelink
  4. HTML item list juga bisa kamu ganti dengan number list html atau bisa kamu campur keduanya. Tidak mempengaruhi SEO on Page
  5. Table toc blogger tersebut mendukung search engine Google, Yahoo dan Bing

Apabila Tutorial di Atas kurang jelas, Silahkan ajukan masalah langsung pada kolom komentar dan kami akan menjawab semua pertanyaan Anda

Cara Membuat daftar isi Otomatis / TOC di Blog

Ini adalah penemuan terbaru yang sangat kami rekomendasikan untuk Anda. Kamu bisa menerapkan kode Script table toc ini pada blog yang di Bangun lewat platform building blogger. Cukup dengan memasukan heading saja maka akan muncul table toc / daftar isi yang dapat kamu manfaatkan untuk merangkum artikel panjang. Caranya adalah sebagai berikut :

  1. Masuk ke dasbord Blogger
  2. Klik menu Tema
  3. pada sisi kanan menu sesuaikan, Pilih Edit HTML
  4. Cari tag </head> atau <body> pada template XML Anda
  5. Copy CSS dan JS Table toc berikut ini, lalu paste keatas </head> atau <body>
    <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>
  6. Cari tag <data:post/body> pada template
  7. Copy dan paste HTML berikut ini
    <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 -->

    Kode diatas merupakan HTML yang menampilkan daftar isi secara tertutup dan sedangkan yang menampilkan Daftar isi terbuka maka bisa menggunakan HTML Berikut ini
    <div id='post-toc'> <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tutup</a>]</div><ul id='bwstoc' style='display:block'/></div> <data:post.body/> <script>bwstoc();</script> </div><!-- end TOC -->
  8. Klik Save pada template
  9. Cek hasilnya dan Selesai
  10. Demo

Penting untuk dicermati !!!

  • Table toc otomatis blogger di Atas hanya akan tampil apabila dalam 1 artikel memiliki minimal 2 heading / lebih
  • Jenis heding yang di Dukung adalah H2, H3, dan H4, apabila ingin menambah jenis heding maka bisa ubah pada javacript
  • Berhubung kode table toc blogger otomatis ini gratis maka pengguna di Larang menghapus kredit komentar pada js dan css untuk menghargai karya seseorang
  • Apabila kredit pada script tersebut kamu hapus maka daftar isi tidak akan bekerja secara maksimal

Rekomendasi Plugin Table Toc SEO

Lain halnya pada blogger yang harus menulis sebuah kode secara manual, kalau Anda menggunakan WordPress maka cukup menginstall Plugin Gratis dan saya merekomendasikan untuk mengintall “Easy Table of Contents” karena menurut saya selain mudah di pahami, Plugin ini memiliki fitur lengkap dan Kualitas SEO yang bagus.

Plugin ini dapat bekerja otomatis dan mampu membentuk sebuah daftar isi. Posisinya nanti akan berada tepat di Atas heading pertama sesuai pengaturan yang kamu sesuaikan. Dari segi design, Kamu bisa merubah warna link dan juga warna background. Lakukan hal ini melalui pengaturan plugi. Menariknya, Plugin Daftar isi blog otomatis ini sudah di Lengkapi dengan pengaturan Loyout. Sehingga pengguna bisa merubah tampilan menjadi responsive loyout dan dengan begitu pula menjadikan suatu halaman menjadi lebih User Friendly (Syarat Seo On Page).

Plugin Easy Table of Contents ini juga sering di Gunakan oleh sejumlah pemilik website karena memiliki pengaturan yang sangat Variable. Selain itu, Plugin Easy table toc ini sudah di Dukung desimal daftar list / Sub per sub pada judul yang nantinya akan mewakili dari subjudul utama. ketika hal itu terjadi maka mampu memberi kesan rangkuman yang rapi dan mudah di Pahami oleh pembaca

Cara membuat Daftar isi dengan Plugin Easy Of Contents

Berikut adalah Cara membuat daftar isi di wordpres dengan memanfaatkan Plugin Easy Table Of Contents lengap dengan pengaturan memunculkan Headin

  1. Install Plugin Easy Table of Contents

    Caranya adalah masuk ke menu Tambahkan Plugin lalu cari Plugin table of contents, Nanti anda akan melihat plugin tersebut di urutan pertama dan bisa langsung Install kemudian pasang dan aktifkan agar bisa digunakanCara Membuat Daftar isi table of Content

  2. Masuke ke Menu Setting Plugin

    Setelah Plugin ini aktif maka Pada semua artikel yang memiliki bagian heading akan mebampilkan daftar isi secara otomatis dan hal itu masih dalam keadaan Default karena belum di atur sebelumnya, Anda mungkin bisa tidak mengatur ulang, Akan tetapi semua tipe Heding akan ter Include ke Table toc tak terkecuali H1 yang berperan sebagai Title Single Post sehingga menut SEO kurang baik. Untuk itu, Atur terlebih dahulu plugin Easy Table of Contents dengan cara masuk ke semua daftar plugin dan lihat pada link bagian bawah. Ada link dengan Acor “Setting” Silahkan buka link tersebut.Cara Membuat Daftar isi Table of Content di Blog Blogger, WordPress

  3. Pilih Pos dan Laman pada pengaturan General Support

    Pengaturan ini berguna untuk menampilkan daftar isi dan saya merekomendasikan untuk tampil dibagian Artikel dan pada suatu halaman tertentu, Namun jika situs yang dibaguan adalah toko online maka cukup mengaktifkan pada Pos saja.bagaimana Cara Membuat Daftar isi table of Content

  4. Pilih Pos dan Laman Pada pengaturan Auto Instert

    Artinya adalah dimana Anda akan menampilkan Table Of Content tersebut secara otomatis? Apakah di semua bagian website atau hanya dihalaman tertentu saja. Kali ini saya juga merekomendasikan pada bagian Pos dan Halaman saja.kode html dan Cara Membuat Daftar isi table of Content

  5. Atur Position, Display, dan Jenis Daftar isi

    Untuk posisi baiknya pilih Opsi default yaitu “Before First heding” yang berguna untuk mempermudah pembaca menelusuri topik yang diinginkan, Sedangkan untuk tampilan memenuhi syarat ketik 4 yang artinya “Daftar isi tersebut akan tampil jika suatu halaman memiliki minimal 4 heading”, Kemudian pada bagian “Display Header Label” beri ceklist untuk memunculkan judul widget dan Anda juga bisa merubah Kata sesuai keinginan (Disini saya menuliskan “Daftar isi”) dan untuk tipe tampilan pilih Opsi “Toggle View” yang artinya Daftar isi atau tabel toc yang dibuat bisa di tutup oleh pembaca sehingga apabila tidak digunakan tidak menggangu. Pengaturan ini bertujuan untuk memberi kenyamanan pada pengguna web kita nantinya.css javascript Cara Membuat Daftar isi table of Content

  6. Tentukan Tipe Heading

    Ini adalah pengaturan lainya yang perlu di atur dan sisanya adalah design tampilan table toc yang menurut saya biarkan saja sebagai opsi default karena tidak terlalu berpengaruh dan akan bekerja secara otomatis. Ada 6 jenis Heading yaitu dimulai dari H1 – H6 dan silahkan beri cekslit pada opsi H2 – H6, Untuk H1 saya tidak memasukanya kedalam daftar isi karena H1 adalah Judul pos bukan rangkuman dari Isi Pos sehingga jika diterapkan menurut saya mengurangi SEO bagian User Friendly.kode lengkap Cara Membuat Daftar isi table of Content dii blogger

  7. Klik Save

    Apabila tidak ada yang perlu diatur lagi maka cukup klik simpan pada bagian bawah agar pengaturan yang dilakukan dapat bekerja. Untuk Demo atau Contoh hasil table toc bisa anda lihat pada halaman iniCara Membuat Daftar isi table of Content di wordpress

Beberapa pengaturan Easy table Of Contents yang di Biarkan default

  • Pengaturan tema seperti warna pada css dan resolusi loyout
  • Pengaturan Advence yaitu
  • Lowercase, Hyphenate, Homepage dan Custom CSS
  • Exclude Heading yang bertujuan untuk mengeliminasi heading tag agar tidak masuk ke dalam daftar isi
  • dan masih ada banyak lagi

Kenapa pengaturan tersebut di Biarkan Default ?

Hal pertama yang saya ambil adalah pengaturan utama yang dapat mempengaruhi kenyamanan pembaca. Yang mana sudah saya terangkan pada tutorial di atas. Sisanya saya biarkan default karena tidak menpengaruhi SEO terutama bab User Friendly

Ada beberapa faktor penting kenapa Table Of Contents atau Daftar isi (TOC) di Perlukan pada sebuah website. Selain itu hampir 50% pemilik website menggunakannya. Hal tersebut memang benar, bahkan ada kaitanya dengan SEO On Page. Pengaruhnya adalah untuk meningkatkan Trafik suatu Blog atau Website. Simak pembahasan lengkap pada Artikel Fungsi Table Of Content (toc) Untuk SEO. Tujuanya apa? agar kalian Tahu pentingnya penggunaan Daftar isi pada suatu halaman.

Itulah ulasan lengkap Cara Membuat daftar isi / Table of Content di Blogger dan WordPress.

Tentang penulis : Aceng Gimbal
Sosok antusias dengan dunia Blogging untuk mengejar perubahan.

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *