Cara Menambahkan Daftar Isi di Postingan Blogger

Oleh Diposting pada
Cara Menambahkan Daftar Isi di Postingan Blogger

Saat ini kita sering sekali melihat sebuah web ataupun blog yang membahas mengenai sebuah tulisan artikel terdapat sebuah daftar isi seperti situs web wikipedia.

Daftar Isi merupakan suatu alat yang membantu untuk menampilkan semua judul dan sub-judul dari isi blog Anda kepada pengunjung blog. Sehigga nantinya dapat memudahkan pembaca dalam mengetahui isi atau poin -poin tulisan yang ada pada postingan pada blog anda.

Banyak yanag beranggapan bahwa daftar isi sangat penting dalam mendongkarak perangkingan di Google terutama ketika kita menggunakan tools seo dalam sebuah web maka tools tersebut merekomendasikan untuk menggunkan daftar isi supaya nilai seo nya akan semakin baik.

Tentunya hal ini akan membuat para bloger akan mencari cara supaya dapat meneapkanya pada blog mereka. Karena mereka harus bersaing dengan kompetitornya.

Daftar Isi

Sekilas mengenai Daftar Isi Otomatis

Daftar Isi Otomatis adalah suatu alat canggih yang secara otomatis mengatur semua judul dan sub-judul dari isi blog Anda dalam ringkasan singkat, sederhana dan ramah pengguna dengan format tabel.

Pada peggunaanya daftar isi blog atau sebuah web memiliki peranan yang sagat banyak keberadaanya dan sangat penting terutama ketika suatu artikel memiiki suatu sub judul sehigga isinya sangat pajang,  dengan adanya daftar isi pada sebuah web atau blog kita bisa langsung membaca topik tertentu dengan mengklik judul tertentu dari daftar isi. Sehingga  akan menghemat waktu dalam membaca sebuah artikel.

Pada pegaplikasiannya daftar isi pada sebuah web atau blog merangkum heading, sub heading dan minor heading untuk memberikan desain daftar isi yang manis dan sederhana.

Untuk melihat isi daftar isi, Anda hanya perlu mengklik sekali saja. Dan untuk membaca tentang topik tertentu, Anda hanya perlu mengklik sekali pada heading, sub-heading, atau minor heading yang diberikan.

Selain itu juga daftar isi memiliki manfaat antara lai yakni :

  1. Membantu untuk memberikan tampilan profesional pada posting atau artikel Anda.
  2. Membantu untuk mengatur poin-poin penting dari posting atau artikel Anda secara sistematis.
  3. Membantu memberikan peta jalan kepada audiens Anda untuk dengan mudah menavigasi seluruh posting atau artikel Anda.
  4. Membantu pengunjung blog Anda untuk menghemat waktu dan tenaga mereka untuk mencari tentang topik tertentu di blog Anda.
  5. Memberikan pengalaman yang ramah pengguna kepada pengunjung blog Anda.
  6. Membantu blog Anda dalam optimasi mesin pencari (SEO) sehigga dapat muncul di Halaman teratas Hasil Mesin Pencari (SERP).
  7. Membantu blog Anda untuk mendapatkan peringkat lebih cepat di mesin pencari seperti Google, Yahoo, Bing, Yandex, dll untuk mendapatkan volume lalu lintas yang besar.

Pada kesempatan kali ini untuk membuat sebuah daftar isi disini saya menggunaka sebuah script yang diadaptasi dari sebuah plugin TOC Versi 2.0, ada beberapa alasan mengapa saya merekomedasikan script ini utuk dapat digunaka dalam mebuat sebuah daftar isi pada blog ada yakni :

  1. Script yang diguakan kali ini adalah sebuah plugin ringan yang SEO Friendly.
  2. Tidak mempengaruhi kecepatan dari loading/akses blog Anda.
  3. Hanya membutuhkan satu kali pengaturan dalam tema.
  4. Setelah setup, Anda dapat menggunakannya seumur hidup tanpa melakukan coding apapun di blog.
  5. Memiliki tombol untuk dapat menyembunyikan dan menampilkan fitur daftar isi.
  6.  sangat responsif dan dapat disesuaikan.
  7.  Untuk mejalankannya cukup dengan megaktifkanya pada halama postingan blog. Anda dapat mengaktifkan atau menonaktifkan fitur ini di postingan atau halaman tertentu hanya hitungan detik saja.

Catatan – Pastikan  mengunduh tema (backup template) terlebih dahulu sebelum menyesuaikan atau membuat perubahan pada tema blog, sehingga jika terjadi kesalahan,  dapat dengan memulihkan tema asli dengan mudah.

Cara Menambahkan Daftar Isi di Posting Blogger

Untuk membuat sebuah daftar isi pada postingan blog dilakukan denga dua cara yakni dengan menambahkan atau mengedit script kode pada template yang telah digunakan, kemudian jika sudah maka anda dapat mengaktifkannya di postingan yang akan hedak di tambahkan daftar isi.

Baca juga  Cara Redirect Blog URL di Blogger

1. Menambahkan kode atau script Daftar Isi di Posting Blogger

Menambah kode atau script Daftar Isi pada postingan blog sangatlah mudah, dengan mengedit HTML pada template yang anda guakan untuk langkahnya sebagai berikut :

  • Masuk ke Dasboard dari Blogger Anda.
  • Buka menu Tema, lalu klik Edit HTML.
  • Cari kode </head>. Untuk mempermudahnya dengan menekan “Ctrl+F” dari keyboard Anda, keudian masukan kode </head> pada kotak pencarian.
  • Salin kode dibawah ini, kemudian tempelkan sebelum/diatas kode </head>.
 <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>  
 <script type='text/javascript'>   
 //<![CDATA[   
 //*************TOC Plugin V2.0   
 function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=  
 document.getElementById("post-toc").innerHTML.replace(/<h([d]).*?>(.*?)</h([d]).*?>/gi,  
 function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol>  
 </li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),  
 a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.  
 display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")}   
 //]]>   
 </script>
  •  Kemudian cari kode ]]></b:skin>, jika sudah ketemu maka salin kode dibawah ini, lalu tempelkan tepat di atas kode ]]></b:skin>.
 /*####TOC Plugin V2.0*/  
 .mbtTOC2{  
 border:5px solid #0008FC ;  
 border-radius: 10px 50px 10px 50px;  
 box-shadow:5px 5px 5px 5px grey;  
 border-style:dashed;  
 background-color:#ACDEFB;  
 color:#707037;  
 line-height:1.4em;  
 margin:30px auto;  
 padding:20px 30px 20px 10px;  
  font-family:Oswald, arial;  
  display: block;width: 70%;  
  }  
  .mbtTOC2 button{  
  background:#ACDEFB;  
  font-family:oswald, arial; font-size:22px;  
  position:relative;  
  outline:none;  
  border:none;  
  color:#2E2E2E;  
  padding:0 0 0 15px;  
  }  
  .mbtTOC2 button a {  
  color:#FF0313;  
  padding:0px 2px;  
  cursor:pointer;  
  }   
 .mbtTOC2 button a:hover{  
  text-decoration:underline;   
  }   
 .mbtTOC2 button span {  
 font-size:15px; margin:0px 10px;  
  }  
 .mbtTOC2 li{margin:10px 0; }   
 .mbtTOC2 li a {  
 color:#EA1414;  
  text-decoration:none;  
  font-size:18px;  
  text-transform:capitalize;  
  }   
 .mbtTOC2 li a:hover {  
 text-decoration: underline;  
 }  
 .mbtTOC2 li li {margin:14px 0px;}  
 .mbtTOC2 li li a{  
  color:#040404;  
  font-size:15px;  
  }  
 .mbtTOC2 ol{counter-reset:section1;list-style:none}  
 .mbtTOC2 ol ol{counter-reset:section2}  
 .mbtTOC2 ol ol ol{counter-reset:section3}  
 .mbtTOC2 ol ol ol ol{counter-reset:section4}  
 .mbtTOC2 ol ol ol ol ol{counter-reset:section5}  
 .mbtTOC2 li:before{content:counter(section1);counter-  
 increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}  
 .mbtTOC2 li li:before{content:counter(section1) "." counter  
 (section2);counter-increment:section2;font-size:14px}  
 .mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "."   
 counter(section3);counter-increment:section3}  
 .mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) ".  
 "counter(section3) "." counter(section4);counter-increment:section4}  
 .mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) ".  
 "counter(section3) "." counter(section4)"." counter(section5);counter-i  
 ncrement:section5}  
 /*   
 .point2 {list-style-type:lower-alpha}   
 .point3 {list-style-type:lower-roman}   
 .point4 {list-style-type:disc}   
 */
  • Kemudian cari kode <data:post.body/> dan ganti Kode  tersebut dengan kode dibawah ini.
 <div id="post-toc"><data:post.body/></div>
  •  jika sudah selesai,tinggal klik tombol simpan .

Pada tahap ini anda telah menambahkan kode ataupun script daftar isi pada tema atau template yang anda gunakan, untuk dapat menggunakannya maka anda tinggal megaktifkan kode tersebut pada postigan yang akan anda gunakan fitur daftar isinya. untuk mengaktifkannya dapat mengikuti pembahasa dibawah ini

2.  Mengaktifkan Daftar Isi Pada Postingan Blogger

  •  Pergi ke postingan dari akun blogger Anda.
  •  Kemudian beralih ke mode “HTML” dan lalu paste kode HTML berikut tepat sebelum heading pertama..
 <div class="mbtTOC2">   
 <button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>   
 <div id="mbtTOC2"></div>   
 </div>
  •  Paste kode ini pada tampilan HTML posting blogger Anda di bagian terakhir.
<script>mbtTOC2();</script>
  •  Klik tombol Perbarui atau Terbitkan.

Sekian dari penjeasan bangaimana cara menambahkan Daftar Isi di postingan blogger. jika Anda memiliki kesulitan maka dapat ditanyakan dengan memberikan komentar di kolom kometar postingan kali ini.

 

Posting terkait:

Tinggalkan Balasan

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