Cara Membuat Table Of Content (TOC) atau Daftar Isi SEO di Blog


membuat daftar isi (toc) seo di blog
Cara membuat TOC di blog

Pernah melihat Table Of Content (TOC) atau daftar isi konten artikel dihalaman situs atau blog orang lain dan memiliki tombol Show dan Hide? Ternyata memasang table of content atau daftar isi tersebut tidak sulit loh. Dan katanya juga bagus untuk SEO

Apa itu table of content dan fungsinya?


Daftar isi pada konten artikel blog atau yang biasa disebut Table Of Content (TOC) merupakan daftar pembahasan yang akan mempermudah seseorang mencari informasi yang ia butuhkan disebuah halaman,terutama jika artikel pada halaman tersebut sangat panjang. Sehingga dengan memberikan penomoran (list) pada Daftar isi akan sangat membantu pembaca.

Manfaat TOC! Benarkah mempengaruhi SEO?


Berdasarkan informasi yang saya kutip di situs Kompiajaib.com mengatakan bahwa Daftar isi pada TOC tersebut dapat diindex oleh mesin pencari Google. Sehingga akan dapat meningkatkan kualitas sebuah artikel dan termasuk Search Engine Optimized atau yang lazim disebut SEO.

Manfaat lainnya tentu untuk mempermudah pembaca mencari informasi penting diartikel yang anda publikasikan

Cara memasang TOC di Blog


Untuk memasang TOC yang SEO, responsive dan bagus serta memiliki list number di blog sangat mudah. Kalian hanya perlu mengikuti tahapan dibawah ini

  • Buka Akun blogger > Pilih Tema > dan klik Edit HTML
  • Copy kode CSS dibawah ini dan pastekan diatas kode </style> atau ]]></b:skin>

  • /* Settingan baku TOC Kurazone */
    .kuratoc{padding:1px 4px 2px;border-radius:3px;color:#fff;font-weight:bold}
    .toctogglelabel {cursor:pointer; color:#0645ad}
    :not(:checked) > .toctoggle {display:inline !important; position:absolute;  opacity:0}
    :not(:checked) > .toctogglespan:before {content:'['}
    .toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'hide';display: inline}
    .toctoggle:checked + .toctitle .toctogglelabel:after {content:'show'}
    :not(:checked) > .toctogglespan:after {content:']'}
    .toctoggle:checked ~ ul{display:none}
    :target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}
    /* Untuk mengatur background, numbering dan jarak TOC Kurazone */
    .toc {background-color:#F0F7FF; border:1px solid #007bfd; padding:9px; display:table; line-height:1.6em;}
    .toc h2 {display:inline; margin-right:10px}
    .toc a {text-decoration:none;color:black}
    .toc a:hover {text-decoration:underline}
    .toc ul {list-style-type:none; list-style-image:none; margin-left:0px; margin-bottom:0px; padding:0px; text-align:left}
    .toc ul li a {margin-left:.5em}
    .toc ul li ul {margin-left:2em}

  • Kemudian Simpan perubahan template


  • Memanggil TOC dan Menampilan di Postingan



  • Buatlah Postingan baru atau edit postingan yang ingin diberi TOC
  • Klik pada mode HTML jangan kompose

  • <div class="toc">
    <input type="checkbox" role="button" id="toctoggle" class="toctoggle">
    <div class="toctitle">
    <span class="kuratoc" style="background:#007bfd">Daftar isi</span>
    <span class="toctogglespan">
    <label class="toctogglelabel" for="toctoggle"></label></span></div>
    <ul>
    <li>1 <a href="#toc1" title="deskripsi">Ini TOC 1</a></li>
    <li>2 <a href="#toc2" title="deskripsi">Ini TOC 2</a></li>
    <li>3 <a href="#toc3" title="deskripsi">Ini TOC 3</a></li>
    <li>4 <a href="#toc4" title="deskripsi">Ini TOC 4</a></li>
    <li>5 <a href="#toc5" title="deskripsi">Ini TOC 5</a></li>
    </ul>
    </div>

  • Copy kode HTML dibawah dan letakkan sesuai keinginan anda
  • Dan edit daftar isi sesuai postingan

  • Sangat mudah bukan untuk membuat TOC atau daftar isi keren di blog!

    Dapatkan Tips Menarik Setiap Harinya!

    • Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
    • Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
    • Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense

    0 Response to "Cara Membuat Table Of Content (TOC) atau Daftar Isi SEO di Blog"

    Posting Komentar

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel