Cara Membuat Table of Content Otomatis (TOC) Dalam Postingan Blog (Seo Friendly + Hirarki)
Cara Membuat Table of Content Otomatis (TOC) Dalam Postingan Blog (Seo Friendly + Hirarki)
Kebanyakan dari blogger sekarang, cenderung menulis artikel yang panjang dengan alasan semakin banyak kata dan kalimat yang ditulis akan semakin dilirik oleh mesin pencari.
Namun sebagian besar pengunjung yang datang dari mesin pencari akan langsung membaca point utama di dalam artikel. Untuk memudahkan pengunjung mengakses langsung point - point penting tersebut, saya sarankan untuk menggunakan Daftar isi di dalam artikel.
Daftar isi atau lebih dikenal dengan nama Table of Content (TOC).
Cara kerja script ini akan mengambil judul heading di dalam artikel (h2,h3,h4) dan menjadikannya sebuah daftar isi yang tampil bertingkat. berikut ini cara membuat table of content otomatis yang lebih seo friendly di blog.
Table Of Content Otomatis
TOC ini hanya bisa tampil di atas artikel atau di bawah judul blog, tidak bisa di tempatkan di dalam artikel. Jika ingin menempatkan TOC di dalam artikel silahkan ikuti langkah kedua yaitu Semi Otomatis.
Pertama, silahkan masuk ke menu Dashboard Blog » Edit HTML, lalu simpan script berikut ini tepat di atas code </head>.
<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>
Selanjutnya, cari code <data:post.body/> lalu ganti dengan code HTML berikut ini.
<div id='postMiddle'>
<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>
<data:post.body/>
<script>tockeren();</script>
</div>
Nah, selanjutnya tinggal tambahkan kode CSS berikut ini untuk memperindah tampilan Daftar isinya.
/* 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) > .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("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><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'/></svg>");
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:"";
display:block;
height:60px;
margin-top:-60px;
visibility:hidden;
}
@media screen and (max-width:480px) {
.post-body .tableOfContent {
font-size:15px;
}
}
Informasi :Jika menggunakan header melayang, atur tinggi header pada code css :target::before { yang sudah saya tandai. Jika tidak, silahkan hapus code tersebut.
Jangan lupa klik tombol Simpan Tema untuk melihat hasilnya.
TOC Semi-Otomatis (Recomended)
Table Of Content yang satu ini sangat saya rekomendasikan, kenapa? karena, TOC ini bisa ditampilkan di dalam artikel sesuai keinginan anda.
Yang harus anda lakukan, pasang dulu script TOC otomatis yang saya tulis di atas, simpan tepat di atas code </head>.
Selanjutnya, cari code <data:post.body/> lalu ganti dengan code HTML berikut ini.
<div id='postMiddle'>
<data:post.body/>
</div>
Selanjutnya, tinggal tambahkan kode CSS yang juga sudah saya tulis di atas untuk memperindah tampilan Daftar isinya.
Terakhir, agar TOC tampil di dalam artikel. selipkan code berikut ini sesuai keinginan kalian. bisa di atas tag <h2> atau di antara paragraf 2 dan 3.
<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>
Kurang lebih penerapannya seperti berikut ini.
............................
....................
.................
<br/>
<br/>
....................
.........................
..............
<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>
<h2>Judul Heading</h2>
..............
..................
<br/>
<br/>
....................
.........................
..............
<h3>Judul Sub Heading</h3>
...........................
.........................
..............
<br/>
<br/>
...........................
.........................
..............
<!-- akhir artikel -->
<script>tockeren();</script>
Untuk code script <script>tockeren();</script> sebaiknya anda letakkan di akhir artikel agar pemanggilan scriptnya dilakukan setelah halaman berhasil dimuat. Jadi tidak akan memberatkan blog.
Untuk hasilnya bisa di lihat melalui demo berikut ini.
Kesimpulan
TOC Otomatis dan Semi Otomatis menggunakan script yang sama, hanya saja cara pemanggilan scriptnya yang berbeda. TOC semi otomatis lebih fleksibel karena penggunaanya yang sesuai keinginan. Jika ingin menggunakan TOC di dalam artikel, tinggal pasang code pemanggilnya.
Post a Comment