bQsqpPcZvKyg8Vvzo6jobl9lgcVr4zroDMLffJhS
Bookmark

Membuat Table of Contents Otomatis dan Manual di Blogspot dengan Mudah

membuat table of contents atau daftar isi di blogspot blogger
Tahupost.Net - Dalam postingan kali ini, mimin akan menjelaskan bagaimana cara membuat Table of Contents atau Daftar Isi untuk blog Blogger atau Blogspot anda. Seperti yang kita ketahui, Blogger tidak memiliki plugin TOC seperti yang ada pada Wordpress. Tapi dengan sedikit berusaha, pasti akan ada hasilnya.


Sebelum memasang Table of Contents yang akan mimin berikan, pastikan kita tahu terlebih dahulu apa itu Table of Contents, fungsi dan manfaat pada kualitas SEO.

Pengertian Table of Contents

Table of Contents (TOC) sama halnya dengan daftar isi yang kita ketahui pada umumnya. Table of Contents adalah daftar yang terdiri dari beberapa poin penting atau sub judul yang dibahas dalam sebuah artikel atau postingan dengan memanfaatkan jump link internal.

Manfaat TOC untuk SEO

Google sangat menyukai artikel blog yang menjelaskan sesuatu dengan sangat rinci dan terstruktur dengan baik. Dengan memasang Table of Contents pada artikel di blog, maka akan membuat artikel pada blog kita lebih terstruktur.

Apabila artikel yang ada pada blog kita dianggap terstrukur dengan baik oleh Google maka akan diberikan jump link pada deskripsi meta tag di hasil pencarian seperti yang ditandai warna orange di bawah ini.
jump link pada meta deskripsi hasil pencarian di Google

Meningkatkan Pengalaman Pengguna

Pengalaman Pengguna atau User Experience adalah bagian lain yang sangat penting dari sebuah blog tetapi banyak para Bloger tidak menanggapinya dengan serius. Hal ini begitu penting karena menurut sebuah studi, pengalaman pengguna adalah kunci untuk mendapatkan peringkat yang lebih tinggi di SERP.

Dan Table of Contents akan membantu kita dalam meningkatkan pengalaman pengguna blog. Menurut sebuah penelitian oleh NN Group, lebih dari 79% dari total pembaca web dan blog adalah orang yang hanya membaca poin-poin penting dari suatu halaman web atau blog.

Dengan menambahkan Table of Contents pada artikel blog kita, maka akan memungkinkan pembaca blog untuk melompat ke bagian penting dari artikel yang dibacanya. Dengan begitu bisa menjadi terobosan untuk pengalaman pengguna web atau blog kita.

Setelah cukup dengan penjelasan di atas, saatnya kita akan membahas bagaimana cara membuat Table of Contents secara otomatis dan secara manual.

Membuat Table of Contents Otomatis di Blogspot

Tahap 1: Yang pertama akan kita lakukan adalah masuk ke dashboard Blogger masing-masing lalu menuju menu Tema dan pilih Edit HTML. Sudah itu tambahkan kode JavaScript di bawah ini tepat di atas atau sebelum </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[           
//*************TOC plugin untuk Blogspot         
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)           
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
//]]>              
</script>

Tahap 2: Pada tahap ini kita akan memasang kode CSS untuk Table of Contents. Untuk itu kita perlu menambahkan kode CSS di bawah ini sebelum ]]</b:skin>. Atau bisa juga pasang kodenya di antara <style> dan </style> sebelum </head>.

.mbtTOC{
        border:5px solid #f7f0b8;
        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: inline block;
         width: auto;
        } 
  
.mbtTOC ol,.mbtTOC ul {
        margin:0;
        padding:0;
                      } 
       
.mbtTOC ul {
        list-style:none;
           }   
     
.mbtTOC ol li,.mbtTOC ul li {
        padding:15px 0 0;
        margin:0 0 0 30px;
        font-size:15px;
                            } 
          
.mbtTOC a{
        color:#0080ff;
        text-decoration:none;
          } 
          
.mbtTOC a:hover{
        text-decoration:underline; 
              }

        
.mbtTOC 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;
               }  
      
.mbtTOC button:after{
        content: "f0dc"; 
        font-family:FontAwesome; 
        position:relative; 
        left:10px; 
        font-size:20px;
                    }

Tahap 3: Di sini kita hanya mencari <data:post.body/> dan ganti dengan kode yang mimin berikan di bawah ini dan Simpan Tema.

<div id="post-toc"><data:post.body/></div>
Jika kalian menemukan <data:post.body/> lebih dari satu, silakan ganti semuanya dengan kode di atas
Tahap4: Di tahap ini kita sudah tidak berurusan lagi dengan Edit HTML template. Saatnya untuk mengaktifkan Table of Contents dalam artikel yang akan di buat.

Tambahkan kode HTML yang ada di bawah ini ke dalam artikel yang akan dibuat, dan tentukan di paragraf mana Table of Contents mau dipasang. Mimin menyarankan kalian untuk memasangnya setelah paragraf pertama.

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Daftar Isi</button> 
    <ol id="mbtTOC"></ol> 
</div>

Tahap 5: Ini yang terakhir untuk membuat Table of Contents otomatis. Tambahkan kode JavaScript di bawah ini pada akhir (pasang paling bawah) dari tiap artikel yang ingin dipasangi Table of Contents.

<script>mbtTOC();</script>
Catatan:
Table of Contents versi otomatis mengandung banyak JavaScript. Hal ini tidaklah cocok bagi kalian yang mengutamakan performa kecepatan blog. Di samping itu, Table of Contents otomatis hanya bisa mendeteksi tag h2. Jadi usahakan untuk membuat judul sub pembahasan dari tag h2.

Nah itu sudah cara membuat Table of Contents secara otomatis di Blogger atau Blogspot. Jika kurang suka dengan Table of Contents versi otomatis, di bawah ini mimin sediakan cara membuat Table of Contents versi manual.

Membuat Table of Contents Manual di Blogspot

Versi manual sangat tidak disarankan kepada sobat Bloger yang tidak suka dengan kegiatan membuat dan menyusun kode HTML. Namanya juga manual, mulai dari membuat layout TOC, jump link, atribut title sampai pada pemasangan id unik tiap judul sub pembahasan semuanya dikerjakan secara manual dan itu cukup melelahkan.

Mendengar itu pasti ada diantara sobat Bloger yang lebih memilih Table of Contents otomatis. Bagaimana cara membuat Table of Contents manual? Simak tahap demi tahap di bawah ini.

Tahap 1: Sama seperti sebelumnya, buka dasbor Blogger, lalu Tema dan Edit HTML. Tambahkan kode CSS di bawah ini sebelum </head>.

<style type='text/css'>
  /* CSS Daftar Isi */
  #light-toc{background:#039789;border-radius:3px;padding:10px 20px;color:#fff}
  #toc_list{font-weight:700;cursor:pointer;margin:10px 0}
  #toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
  #toc_list svg{vertical-align:middle}
  #toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
  #toc ol li:before{left:-2em}
  #toc li a{color:#fff}
  #toc li a:hover{color:#fff}
  #toc{display:grid}
  .back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#039789;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
  .back_tocontent:hover{background:#2f303f;color:#fff}
  :target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
  </style>

Tahap 2: Pasang juga kode JavaScript yang ada di bawah ini sebelum </body> lalu klik Simpan Tema.

<script type='text/javascript'>          
//<![CDATA[          
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>          
</script>

Tahap 3: Urusan di edit HTML sudah selesai. Kita melangkah lagi ke bagian postingan artikel blog. Pilih postingan yang ingin ditambahkan Table of Contents. Isi postingan tersebut dengan kode HTML di bawah ini.

<div id="light-toc">
<div id="toc_list" 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>
<div id="toc">
<ol>
<li><a href="#sub1" title="Subheading 1">Bagian Subheading 1</a></li>
<li><a href="#sub2" title="Subheading 2">Bagian Subheading 2</a></li>
<li><a href="#sub3" title="Subheading 3">Bagian Subheading 3</a></li>
<li><a href="#sub4" title="Subheading 4">Bagian Subheading 4</a></li>
</ol>
</div>
</div>
Table of Contents hanya cocok untuk artikel yang memiliki banyak sub pembahasan. Jadi jika ingin menggunakannya pastikan hal itu.
Tahap 4: Lihat nilai atribut href yang ditandai dengan warna kuning di atas. Sesuaikan dengan nilai dari atribut id pada tiap tag h2 sub pembahasan secara berurutan.

<h2>Subheading 1</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Tambahkan id="sub1" pada tiap Subheading. Jika demikian, maka Subheading harusnya akan terlihat seperti di bawah ini.

<h2 id="sub1">Subheading 1</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Mimin berikan dua warna agar lebih mudah dipahami. Yang kuning sesuaikan dengan warna kuning, warna hijau sesuaikan dengan yang warna hijau juga. Bagaimana? Mudah tidak?

Setelah sudah selesai, publikasikan postingan kalian dan lihat hasilnya. Untuk demo dari Table of Contents manual adalah artikel ini sendiri. Lihat, apakah berfungsi dengan baik.
Perhatian
Untuk semua Table of Contents di atas sesuaikan dengan karakter template blog masing-masing. Template Table of Contents di atas mimin telah membuat sedikit penyesuaian untuk tema Igniplex. Jadi untuk templae lain bisa di rombak sendiri.
4 komentar

4 komentar

Kebijakan berkomentar:
1. Meninggalkan komentar sebagai anonim tidak dibolehkan di blog ini.
2. Dilarang memasang link aktif dalam komentar.
3. Berkomentar sesuai topik.

Be nice and be respectful.
  • Bayu
    Bayu
    03 Mei, 2020 23:41
    Mantap bgt om
    Reply
  • Muhammad Rayhan
    Muhammad Rayhan
    31 Maret, 2020 13:11
    mau tanya tema blogspotnya apa ya ?
    • Muhammad Rayhan
      John Asto
      01 April, 2020 08:16
      Igniplex
    Reply
  • Lacoco Online
    Lacoco Online
    27 Maret, 2020 14:07
    Sudah saya coba di blog saya om...
    Ternyata memang tambah berat.. :(
    Akhirnya hapus lagi...
    Terimakasih ilmunya dan template blog TahuPost keren om..
    Minat beli besok kalau ada rejeki..
    :D
    Reply