Cara Memasang Table Of Contents Blog Otomatis

Cara Memasang Table Of Contents Blog Otomatis

Ilmu Satria - Halo selamat malam para desainer blogger wkwk, pada kesempatan kali ini saya mau berbagi lebih tepatnya berbagi mengenai cara membuat table of contents otomatis di postingan blogger, untuk mengetahui lebih lengkapnya langsung simak saja yah teman-teman.

Apa Sih Table Of Contents ?


Table of contents yaitu sebuah tabel yang biasanya terdapat pada website terkenal Wikipedia yang memberikan daftar bab dan sub bab atau heading dan subheading yang akan dibahas pada artikel tersebut.

Jujur saja, fitur ini sangat memudahkan bagi para pembaca untuk lebih mudah mencari apa saja yang dibahas pada artikel kamu, walaupun untuk sekarang saya belum memasangkan pada blog saya tapi saya rekomendasikan agar kamu memasangnya.

Kelebihan Memasang Table Of Contents


Banyak manfaat yang bisa anda peroleh dengan Table Of Content. Setiap konten tersebut memang masih bisa dikategorikan membutuhkan Daftar isi untuk memudahkan pembaca dan mempersingkat waktu mereka menentukan topik yang dibahas sebelumnya.

  1. Meningkatkan Kualitas Artikel : Bisa dikatakan membuat TOC adalah salah satu SEO On page karena pada dasarnya google juga akan lebih mengutamakan situs yang memiliki hak yang lebih dari biasanya salah satunya TOC berikut ini.
  2. Meningkatkan SERP Google : Jika diatas disebutkan bahwa TOC adalah salah satu SEO Artikel On page maka sudah pasti jika artikel yang sebelumnya mungkin ada di page 5, lama kelamaan akan meningkatkan dengan sendirinya bisa jadi bahkan ada di page 1.
  3. Meningkatkan Pageview : Inilah tujuan akhir dari optimasi Seo On page yakni mendapatkan visitor bejibun. Sehingga penghasilanpun meningkatkan.
  4. Membuat Pengunjung lebih Nyaman : dengan cara ini anda bisa membuat pengunjung lebih betah lagi ada di artikel anda karena anda membuat beberapa trobosan sekaligus cara agar pembaca lebih mudah menemukan topik yang mereka cari.
Untuk sementara saya belum bisa memberikan demo dulu yah, soalnya blog yang harusnya untuk demo sedang bermasalah, tapi kalian bisa langsung mencobanya kok.

Cara Mudah Memasang Table Of Contents


1. Buka dashboard blogger dan menuju ke edit html seperti biasanya.

2. Salin kode dibawah ini dan pastekan kode dibawah ini tepat pada atas kode ]]></b:skin>.

/* TOC SEO  */

.TOC {

    padding: 15px 30px;

    margin: 0;

    border: 1px solid #dadce0;

    border-radius: 8px;

}

.TOC a {

    color: inherit;

    text-decoration: none;

}

.TOC a:hover {

    text-decoration: underline;

}

.TOC button {

    color: inherit;

    background: 0 0;

    font-size: 20px;

    position: relative;

    outline: 0;

    border: none;

    padding: 0;

    font-family: inherit;

    font-weight: 500;

}

.TOC button a:hover {

    cursor: pointer;

}

.TOC li {

    margin: 5px 0;

    padding: 0;1

    line-height: 1.5em;

    list-style: none !important;

}

3. Jika kamu menggunakan template viomagz, cari kode seperti ini <b:if cond='data:post.isDateStart'> yang berada di di bawah kode <div class='blog-posts'> jika kamu sudah menemukanya salin kode dibawah ini dan pastekan dibawahnya. 

<b:attr cond='data:view.isSingleItem' value='postToc' name='id'/>

4. Langkah selanjutnya, copy kode dibawah ini dan pastekan tepat diatas kode </head>.

/* TOC SEO  */

.TOC {

    padding: 15px 30px;

    margin: 0;

    border: 1px solid #dadce0;

    border-radius: 8px;

}

.TOC a {

    color: inherit;

    text-decoration: none;

}

.TOC a:hover {

    text-decoration: underline;

}

.TOC button {

    color: inherit;

    background: 0 0;

    font-size: 20px;

    position: relative;

    outline: 0;

    border: none;

    padding: 0;

    font-family: inherit;

    font-weight: 500;

}

.TOC button a:hover {

    cursor: pointer;

}

.TOC li {

    margin: 5px 0;

    padding: 0;1

    line-height: 1.5em;

    list-style: none !important;

}


5. Langkah terakhir adalah simpan tema.

Bagaimana Cara Menerapkanya ?


Kamu pasti bingung dan bertanya-tanya didalam hati bagaimana cara menerapkanya ya wkwk, baik saya akan memberikan tutorialnya berikut cara menerapkan table of content otomatis pada blog.

1. Buatlah sebuah artikel di blog kamu seperti biasanya dan masuk ke menu html ( sebelah compose ).

2. Buatlah table of content seperti contoh dibawah ini dalam penerapnya.

PARAGRAF BARIS PERTAMA ATAU PEMBUKA



PARAGRAF BARIS KEDUA




PARAGRAF BARIS KETIGA H1 H2 H3 PARAGRAF BARIS PENUTUP


3. Pratinjau artikel untuk memastikan bahwa sudah benar.

4. Terakhir Publikasikan.

Penutup


Demikian tutorial yang bisa saya sampaikan mengenai cara memasang table of contents, jika kamu merasa gagal atau tidak berhasil bisa ditanyakan melalui kolom komentar di bawah dan jangan lupa juga untuk share artikel ini ke media sosial kamu jika bermanfaat, terima kasih.

Baca juga

2 comments

Post a Comment