Skip to main content

Cara Membuat Daftar Isi Table Of Contents (TOC) di Postingan Blog AMP Dengan Mudah

Hallo sobat blogger, selamat datang di popularmassage.net pada kesempatan kali ini mimin akan memberikan sedikit tutorial seputar blogging yaitu Cara Membuat Daftar Isi Table Of Contents (TOC) di Postingan Blog AMP . Artikel ini saya buat semata-mata hanya buat refrensi pribadi saja, tapi bila sobat ingin mencoba untuk menerapkan ke postingan blog sobat silahkan, membuat daftar isi toc ini manfaat nya sangat bagus sekali untuk sebuah seo di postingan artikel blog.

Sebelum kepembahasan anda perlu tau apa itu table of contents dan apa kegunaannya ? Table of contents yang juga kadang di kalangan para blogger di singkat dengan toc merupakan salah satu daftar isi untuk sebuah postingan artikel di halaman blog. Kurang lebih cara yang akan kami berikan tampilannya seperti gambar di atas.

Cara membuat Daftar isi seperti gambar diatas cara nya sangat mudah sekali, bisa di buka tutup dengan menekan kata "sembunyikan" dan "tampilkan" .

Apakah Daftar Isi TOC Berpengaruh Terhadap SEO ?

Banyak yang bertanya apakah membuat daftar isi table of contents (toc) juga berpengaruh terhadap seo postingan yang ada di blog ? Jawabannya adalah iya. Toc tersebut sangat bagus sekali terhadap seo dan rangking sebuah postingan yang sudah dipasang toc. Google akan lebih mudah mendeteksi menelusuri semua isi postingan artikel kita yang nantinya tampilan di penelusuran google berbeda dengan artikle biasa tanpa toc. Nantinya tampilan di google akan seperti gambar diatas.

Tampilannya sangat berbeda dengan artikel lainnya, kita akan mendapatkan sebuah link setiap judul isi artikel yang ada di postingan tersebut.

Kita bisa mendapatkan link isi artikel tersebut bila postingan itu sendiri sudah bisa berada di rangking 10 besar di google.

Artikel Bagaimana Yang Layak di Buatkan Daftar Isi (TOC) ?

Sebetulnya semua postingan artikel juga tidak masalah bila di buatkan daftar isi untuk menambah seo on page postingan.

Akan tetapi dengan syarat harus terdapat sebuah judul (h2), atau judul (h3) dan seterusnya didalam artikel tersebut, bila tidak ada subdujul maka script toc yang akan nantinya di pasang tidak berfungsi.

Dan menurut saya pribadi toc wajib untuk postingan yang isinya panjang mulai dari 500 kata apa lagi sampai 1000 kata lebih, akan lebih baik bila di beri toc untuk mempermudah pengunjung blog kita menelusuri isi potingan tersebut.

Cara Membuat Daftar Isi Table Of Contents (TOC) di Postingan Blog AMP

Mungkin sudah jelas keterangan tentang daftar isi toc, selanjutnya kita beralih bagaimana cara membuatnya. Yuk simak dengan baik cara membuatnya.

  • Edit HTML

Pergi ke edit html kemudian cari kode "</style>" lebih mudah nya cari dengan "control f" bila menggunakan komputer atau semacamnya, bila anda edit html menggunakan hp android harus mencari secara manual.

  • Kemudian anda salin script dibawah ini, letakkan tepat diatas nya "</style>"

  /* Table Of Content by popularmassage.net*/
#toc_wrapper {
   background:#ddd;
   max-width:450px;
   position:relative;
   padding:10px;
   border-radius:4px;
   margin:20px auto;
}
.tombol_toc {
   position: relative;
   font-weight: bold;
   outline: none;
}
.tombol_toc svg {
   float:right;
}
#daftarisi {
   background:#fff;
   padding:10px 10px 0;
   border-radius:4px;
   margin-top:10px;
   -webkit-box-shadow: 0 2px 15px rgba(0,0,0,.05);
   box-shadow:0 2px 15px rgba(0,0,0,.05);
}
#daftarisi a {
   text-decoration:none;
}
#daftarisi ul {
   padding:0 0 0 20px;
   margin:0
}
#daftarisi ul li.lvl1 {
   line-height:1.8em;
   padding:4px 0;
}
#daftarisi ul li.lvl1:nth-child(n+2) {
   border-top:1px dashed #ddd;
}
#daftarisi ul li.lvl1 a {
   font-weight:600;
}
#daftarisi ul li.lvl2 a {
   font-weight:400;
}
#daftarisi ul li a:hover {
   text-decoration:underline;
}
:target::before {
   content:&quot;&quot;;
   display:block;
   height:60px;
   margin-top:-60px;
   visibility:hidden;
}
Selanjutnya jangan lupa klik simpan...!

  • Membuat daftar isi postingan
Setelah memasang kode css yang ada diatas, selanjutnya anda membuat daftar isinya di postingan yang akan anda beri daftar isi toc. Dengan cara dari mode compose beralih ke mode html postingan artikel. Kemudian letakkan kode script dibawah ini di mana saja sesuai keinginan.


<div id="toc_wrapper">
<div class="tombol_toc" on="tap:daftarisi.toggleVisibility" 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="daftarisi">
<ul>
  <li class="lvl1">
    <a href="#toc1" title="judul">judul</a>
       <ul>
         <li class="lvl2"><a href="#toc1_1" title="judul">judul</a></li>
         <li class="lvl2"><a href="#toc1_2" title="judul">judul</a></li>
         <li class="lvl2"><a href="#toc1_3" title="judul">judul</a></li>
       </ul>
  </li>
  <li class="lvl1"><a href="#toc2" title="judul">judul</a></li>
  <li class="lvl1"><a href="#toc3" title="judul">judul</a></li>
  <li class="lvl1"><a href="#toc4" title="judul">judul</a></li>
</ul>
</div>
</div>
Lantas bagaimana cara mencocokan dengan judul atau subjudul yang ada di dalam artikel ? baik, coba sobat perhatikan gambar yang ada di bawah ini dengan baik.


Harus disertakan <h2 id="toc1"> dan toc5_1 bila ingin membuat subjudul. Seperti itu sampai selesai. Setelah itu klik simpan atau publikasikan.

Warning!

Cara membuat toc ini biar tidak ada yang eror dan tampil sesuai keinginan, bila anda sudah membuat toc postingan tersebut jangan beralih lagi ke mode compose, karena bila anda beralih ke mode compose harus mengatur kembali kode script yang ada di atas seperti semula.

Maka dari itu kami sarankan membuat daftar isi postingan setelah anda yakin dan selesai menulis artikel sampai selesai semua, kemudian anda bisa beralih ke mode html dan melakukan pembuatan toc.

Sumber kode script: www.idnxmus.com Semuga bermanfaat dan kami ucapkan terimakasih sudah berkunjung ke blog kami.
Info: Konten yang ada di dalam blog ini murni tulisan dari time PopularMassage.Net - sangat tidak di perkenankan bila melakukan copy paste terhadap isi artikel yang ada di dalam blog ini.

Comment: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar