Home / Blog

Membuat Daftar Isi di dalam Postingan Blog

By Agung 1 comment
daftar isi blog

Postingan yang menarik adalah postingan yang mempunyai struktur penulisan. tujuannya adalah agar pembaca blog akan dengan mudah memahami judul, sub judul sehingga artikel yang dibaca dapat dengan mudah dipahami. 

Pada artikel kali admin akan berbagi info tentang bagaimana membuat daftar isi di dalam postingan blog. Berikut daftar isi pembahasannya

    Daftar Isi

  1. apa itu daftar isi Postingan dalam Postingan Blog
  2. Fungsi daftar isi Postingan dalam Postingan Blog
  3. Cara Membuat daftar isi Postingan dalam Postingan Blog


1. Apa itu daftar isi dalam postingan blog

Ibaraat sebuah buku, daftar isi adalah hal yang penting. daftar isi adalah penunjuk sebuah halaman tertentu. Bayangkan saja jika sebuah buku tidak memiliki daftar isi, maka sudah pasti pembacanya repot untuk mencari memahami topik tertentu

Bagi pengguna blog dengan platform Wordpress, daftar isi postingan ini sudah tersedia dalam plugin. sementara untuk platform blogspot belum tersedia. akan tetapi kita bisa membuatnya dengan cara-cara yang akan admin jelaskan dalam artikel ini.

2. Fungsi daftar isi dalam postingan

Fungsi utama adalah untuk memudahkan pembaca blog dalam memahami isi artikel apalagi jika artikel yang buat sangat panjang. fungsi utamanya adalah SEO. apalagi jika artikel yang ditulis memiliki lbih dari 500 karakter.

Tujuannya adalah agar tulisan terlihat rapi dan tidak membosankan pembaca dan tentunya akan lebih mudah terindex oleh Google.

3. Cara membuat daftar isi

Sebelum membuat daftar isi sebaiknya siapkan terlebih dahulu script dan kode HTML seperti yang akan saya jabarkan dibawah ini. ok langsung saja

  • Login dulu ke akun blogger
  • Masuk ke HTML BloggerCari kode: </head> (gunakan CTRL+F untuk memudahkan pencarian kode)
  • Copy kode di bawah ini:
<script type='text/javascript'> //<![CDATA[ function tockeren(){ var a=1,b=0,c=""; document.getElementById("postMiddle").innerHTML=document.getElementById("postMiddle").innerHTML.replace(/<h([d]).*?>(n.*?|.*?)</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="#'+f.replace(/[^a-z0-9]/gi," ").trim().replace(/s/g,"_")+'" title="'+f+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='"+f.replace(/[^a-z0-9]/gi," ").trim().replace(/s/g,"_")+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("tocContent").innerHTML+=c} //]]> </script>

  • Letakkan di atas kode </head>
  • Cari semua kode: <data:post.body/> Kemudian ganti dengan kode berikut ini:
<div id='postMiddle'> <data:post.body/> </div>

  • Cari kode: ]]></b:skin>, kemudian Copy kode di bawah ini:

/* TOC Otomatis by idnxmus.com */ .post-body .tableOfContent { padding:12px 15px; margin:20px 0; background-color:#f8f9fa; border:1px solid #e4e9ef; border-radius:4px; font-size:16px; line-height:1.5em; } .post-body .tableOfContent #tocContent { margin:5px 0; } .post-body .tableOfContent #tocContent ol, .post-body .tableOfContent #tocContent ul { margin:0 0 10px; padding:10px 0 0 17px; position:relative; } .post-body .tableOfContent #tocContent ol ol, .post-body .tableOfContent #tocContent ul ul, .post-body .tableOfContent #tocContent ol ul, .post-body .tableOfContent #tocContent ul ol { padding-left:30px; } .post-body .tableOfContent #tocContent li { position:relative; margin:0 0 10px; } .post-body .tableOfContent #tocContent ol ul:before, .post-body .tableOfContent ol ol:before, .post-body .tableOfContent #tocContent ul ol:before, .post-body .tableOfContent ul ul:before { content:''; display:block; width:1px; height:calc(100% - 10px); position:absolute; left:-11px; border-left:1px dashed rgba(0,0,0,.2); top:0; } .post-body ol.point2 li:before { content:''; display:block; height:1px; width:15px; border-top:1px dashed rgba(0,0,0,.2); position:absolute; left:-38px; top:10px; } .post-body .tableOfContent #tocContent a { display:inline-table; margin-left:5px; } .post-body .tableOfContent #tocContent .point2 a { margin:0; } .post-body .tableOfContent #tocContent a:hover { text-decoration:underline; } .post-body .tableOfContent .toctogglelabel { display:block; cursor:pointer; } .post-body .tableOfContent .toctogglespan i.icon.icon-dropdown { float:right; margin:0; } ol.point2 li { list-style-type:circle; position:relative; } :not(:checked) &gt; .toctoggle { display:inline !important; position:absolute; opacity:0; } .tableOfContent .toctogglespan .toctogglelabel:before { content:'Daftar Isi :'; font-weight:600; } .toctoggle:checked ~ #tocContent { display:none; } label.toctogglelabel:after { background-image:url(&quot;data:image/svg+xml,&lt;svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'&gt;&lt;path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z' fill='%2309204C'/&gt;&lt;/svg&gt;&quot;); content:''; margin-top:3px; width:16px; height:16px; background-size:cover; background-repeat:no-repeat; background-position:center center; float:right; transition:all .3s ease; -webkit-transition:all .3s ease; } .toctoggle:checked + .toctogglespan .toctogglelabel:after { -webkit-transform:rotate(180deg); transform:rotate(180deg); } .post-body ol.point2 { padding-top:10px; } :target::before { content:&quot;&quot;; display:block; height:60px; margin-top:-60px; visibility:hidden; } @media screen and (max-width:480px) { .post-body .tableOfContent { font-size:15px; } }

  • Paste kode di atas, dan tempatkan di atas kode: ]]></b:skin>
  • Lalu Klik Simpan 

Sampai disini proses edit HTML di templat blogger sudah selesai, dan 

  • Selanjutnya masuk ke Postingan Blogger
  • Menulis seperti biasa dan gunakan Tag Heading 2 (Judul) dalam postingan Sobat
  • Ubah Tampilan Menulis menjadi Tampilan HTML
  • Sisipkan kode berikut sebelum menuju Tag <H2> di postingan

<div class='tableOfContent'> <input aria-label='Daftar Isi' class='toctoggle' id='toctoggle' role='button' type='checkbox'/> <span class='toctogglespan'><label class='toctogglelabel' for='toctoggle'/></span> <div id='tocContent'></div> </div> <script>tockeren();</script>


Selesai
Jikas berhasil, hasilnya akan seperti dibawah ini :

    Daftar Isi

  1. apa itu daftar isi Postingan dalam Postingan Blog
  2. Fungsi daftar isi Postingan dalam Postingan Blog
  3. Cara Membuat daftar isi Postingan dalam Postingan Blog

Demikian pembahasan tentang cara membuat daftar isi dalam postingan blog  dan semoga bermanfaat 

 Salam berbagi

Agung
Agung Simple Blogger - Anak Negri yang suka menulis dan belajar blog. Punya hobi mancing, ngopi dan jalan-jalan. Saat ini tertarik untuk mulai ngeblog dan mengelola blog berbagi info

1 comment for "Membuat Daftar Isi di dalam Postingan Blog"

  1. Unknown9/09/2021

    Terimakasih
    Atas infonya
    Artikel yang menaeik

    ReplyDelete

Post a Comment