Cara Membuat Table Of Content Di Postingan Blogger

Zona Internetku No Comment June 15, 2019

TOC atau Table Of Content memiliki peran yang begitu besar untuk meningkatkan kualitas artikel pada blog kita, karena dengan memasang widget ini kita dapat memudahkan para pengunjung web kita dalam menemukan kata kunci utama (topik kalimat utama) yang mereka cari.

Selain memudahkan pengunjung dalam menjelajahi situs kita, TOC juga bisa di indeks oleh mesin telusur (Search Engine), biasanya Daftar yang paling di utamakan oleh mesin telusur TOC yang mengandung kata kunci yang saling berhubungan dengan artikel yang kamu buat, kualitas artikel dan rasio klik, sehingga hal ini bisa membawa halaman artikel kita ke peringkat atas.

Cara Membuat Dan Memasang Widget TOC Pada Postingan Blogger

Setelah kalian sudah paham fungsi dari widget Table Of Content maka selanjutnya kita akan membuat TOC pada blog kita. Untuk membuat dastar isi alias TOC di blog, kita hanya bisa membuatnya secara manual pada setiap artikelnya

1. Masuk ke dalam blogger.com dan pilih blog kalian
2. Setelah itu kalian masuk ke menu "Tema/Template" dan pilih "Edit HTML"
3. Cari kode ]]></b:skin> atau </style>
4. Copy kode css dibawah ini, lalu Paste di atas kode ]]></b:skin> atau </style>

/* TOC Article */
div#toc-container {
    display: block;
    background: #c6f1ca;
    padding: 2px 4px;
    border: 2px solid #21e433;
}
div#btn_toc {
    font-size: 20px;
    font-weight: bold;
    color: #c6f1ca;
    background: #21e433;
    padding: 3px 10px;
}
div#btn_toc:after{    content: "\f07c";
    color: rgb(198, 241, 202);
    font-size: 20px;
    font-family: FontAwesome;
    line-height: 25px;
    float: right;
}
div#toc ol li a {
    text-decoration: none;
    color: #0600ff;
}

5. Setelah kalian klik tombol "Simpan Tema"
6. Jika sudah silahkan kalian masuk ke menu "Postingan" dan edit salah satu artikel yang ingin diberi widget TOC
7. Kemudian pilih mode "HTML" dan paste kode di bawah ini

<div id="toc-container">
<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</div>
<div id="toc">
<ol>
<li><a href="#toc1" title="Subheading 1">Subheading 1</a></li>
<li><a href="#toc2" title="Subheading 2">Subheading 2</a></li>
<ol>
<li><a href="#toc2_1" title="Subheading 2_1">Subheading 2_1</a></li>
<li><a href="#toc2_2" title="Subheading 2_2">Subheading 2_2</a></li>
</ol>
<li><a href="#toc3" title="Subheading 3">Subheading 3</a></li>
<li><a href="#toc4" title="Subheading 4">Subheading 4</a></li>
<li><a href="#toc5" title="Subheading 5">Subheading 5</a></li>
</ol>
</div>
</div>

Perhatian

Silahkan ganti tulisan #toc1, #toc2 dan seterusnya sesuai dengan jumlah dan urutan sub headingatau minor heading pada artikel kamu
Ganti juga title Subheading sesuai dengan kata kunci yang sama dengan sub heading artikel
Kalian juga harus mengubah teks Subheading 1, Subheading 2 dan seterusnya sesuai dengan sub heading artikel

8. Selanjutnya adalah kalian harus menambahkan atribut id yang dengan nama toc pada setiap sub heading artikel kamu, contoh
<h3 id="toc1">Subheading Pertama</h3>
<h3 id="toc2">Subheading Kedua</h3>
<h3 id="toc3">Subheading Ketiga</h3>
dan begitu juga seterusnya
9. Jika semua selesai silahkan kalian pilih tombol "Publikasikan" atau "Perbarui"

Demo

Baca juga :
2 Cara Membuat Live Chat WhatsApp Di Website
Cara Membuat Tombol Demo Dan Download Keren Di Blog
Cara Membuat Featured Post Di Homepage Blog

Solusi Apabila Link TOC Berubah Menjadi Link Halaman Blogger

Saya merekomendasikan saat kalian memasang TOC di artikel kalian, sebaiknya saat artikel tersebut sudah siap posting baru kita menambahkan TOC di dalam artikel tersebut. Hal ini bukanlah tanpa alasan, karena saat kalian memasang link a href="#toc1" di mode "HTML" kemudian pindah ke mode "Compose" maka akan berubah menjadi
https://www.blogger.com/blogger.g?blogID=xxxxxxxxxxxxxxxxxxx#toc1

Hal ini disebabkan a href tidak mengenali permalink #toc1, untuk mengatasinya adalah kalian harus memposting artikel melalui mode "HTML" atau bisa juga menambahkan link artikel tersebut sebelum tanda #toc1 seperti ini
websitekamu.com/url-artikel-kamu#toc1

contohnya adalah seperti berikut
https://zonainternetku.blogspot.com/2018/08/cara-menghasilkan-uang-dari-internet.html#toc1

Promo Menarik