Rizkys Mempelajari, Memahami, Mempraktekan lalu Menyampaikan.

Cara Membuat Table Of Contents (TOC) di Postingan Blogger

Cara Membuat Table of Contents di Postingan Blogger

Table Of Content / Daftar Isi di dalam postingan mungkin bagi kalian hanya dapat di buat di platform wordpress saja, Karena di blogger tidak memiliki plugin tersebut. Tapi itu adalah hal yang salah, Kita bisa membuat Table Of Contents (TOC) di Postingan Blogger tanpa menginstall plugin.

Apa itu Table Of Contents (TOC) ?

Cara Membuat Table Of Contents (TOC) di Postingan Blogger

Daftar Isi (TOC) adalah sebuah daftar topik atau bisa di sebut Chapter yang terdapat di dalam postingan blog dengan judul dan tautan topik pada halaman yang sama, Biasanya kita temukan sebelum Tag Heading / Sesudah heading (Tergantung Pengaturan-nya Juga) Jika kamu mengklik tautan apa pun dari daftar isi tersebut akan menju / lompat ke bagian topik tertentu.

Apakah Daftar Isi / TOC ini Penting?

Daftar isi di dalam sebuah postingan bisa jadi cara yang bagus untuk menampilkan isi topik pokok di dalam postingan blog sehingga dapat mempermudah pengguna untuk melewati topik / melompat ke topik yang di inginkan.

Cara Membuat Table Of Contents di Postingan Blogger Dengan Baik dan Benar

Di WordPress ada banyak plugin yang tersedia untuk membuat / menampilkan daftar isi di dalam postingan, tetapi tidak dengan Blogger, Kita harus mengedit / merubah sebuah kode HTML agar dapat menampilkan TOC ini.

Untuk membuat daftar isi kalian tidak perlu memahami kode ini kode itu karena saya akan memberikan cara yang mudah yang dapat kamu lakukan, Cukup Ikuti langkah-langkah di bawah ini untuk menambahkan TOS dalam postingan Blogger secara otomatis.

1. Masuk ke blog Blogger dan klik Theme -> Edit HTML lalu Cari kode </ head> dan Paste kode di bawah ini di atas kode </ head>

<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[
//*************Table of Content (TOC) plugin by www.akytera.com
function avsTOC() {var avsTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);avsTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("avsTOC").innerHTML += avsTOC;}}function avsToggle() {var avs = document.getElementById('avsTOC');if (avs .style.display === 'none') {avs .style.display = 'block';} else {avs .style.display = 'none';}}
//]]>
</script>

2. Selanjutnya, Cari kode ]]> </ b: skin> dan masukan kode di bawah ini tepat Sebelum Kode ]]></b:skin>, Sama seperti di bawah gambar ini

Baca Juga:  5 Alasan Blog Kamu Tidak Muncul di Halaman Pertama Google
Cara Membuat Table Of Contents (TOC) di Postingan Blogger
.avsTOC{border:5px solid #EE5535;
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: block;
width: 70%;}
.avsTOC ol,.avsTOC ul {margin:0;padding:0;}
.avsTOC ul {list-style:none;}
.avsTOC ol li,.avsTOC ul li {padding:15px 0 0;
margin:0 0 0 30px;font-size:15px;}
.avsTOC a{color:#EE5535;text-decoration:none;}
.avsTOC a:hover{text-decoration:underline; }
.avsTOC 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;}
.avsTOC button:after{content: "\f0dc";
font-family:FontAwesome; position:relative;
left:10px; font-size:20px;}

Kamu bisa merubah kostum di dalam daftar isi, Tergantung pada warna blog yang kamu miliki agar relevan:

  • Untuk mengubah warna latar belakang kotak TOC Edit #FFFFE0 dengan warna yang kamu inginkan.
  • Untuk Mengubah Warna Batas Kotak TOC Edit #EE5535 Dengan warna yang kamu suka.
  • Untuk Mengubah warna font dari huruf di judul TOC Edit #707037
  • Mengubah Warna Tautan Ubah #0080FF
  • Mengubah Ukuran Font Tautan Ubah 15px dengan ukuran sesuka kalian
  • Mengubah Ukuran Font dari teks isi / Head Edit 20px

3. Sekarang cari kode <data:post.body/> dan ganti dengan kode di bawah ini

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

4. Klik Simpan Template

Daftar isi akan muncul setiap kali kamu membuat paragraf dengan Tag H2, Nah mungkin hanya itu saja yang dapat saya sampaikan, Jika kalian masi kebingungan dan mengalami kesalahan, Saya siap membantu, Terimakasih.

Avatar
Rizkys Mempelajari, Memahami, Mempraktekan lalu Menyampaikan.

Tinggalkan Balasan

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