Pendahuluan
Seperti yang dibahas sebelumnya pada artikel atau postingan tentang Pembahasan : Body Tag/ Body Heading Tag ( Tag H1 , H2, H3 dan H4 ) dimana Table Of Content menggunakan tag tersebut untuk membuat daftar isi yang tersusun rapih.
Baca selengkapnya : Pembahasan : Body Tag/ Body Heading Tag ( Tag H1 , H2, H3 dan H4 )
Pengertian Table Of Content
Apa itu Table Of Content ?
Table Of Content adalah sebuah daftar isi yang disusun secara rapih didalam tabel menggunakan Body Heading Tag seperti : H1 , H2 , H3 , H4 , untuk memudahkan para pengguna/pembaca/pelihat konten untuk melihat isi dari konten tersebut.
Kegunaan Table Of Content
Jump To Content
Selain untuk memudahkan pengguna internet ternyata Table Of Content juga berguna untuk robot crawl mengindeks halaman dengan fitur "Jump To" dimana pengguna mesin pencari dapat melompat kedalam topik konten yang sedang mereka cari.
SEO
Table Of Contens merupakan salah satu teknik SEO , karna isinya yang dibuat dengan Body Heading Tag seperti H1 , H2 , dst. Hal ini memudahkan robot crawl menelusuri topik isi dari konten tersebut.
Cara Terbaru Membuat Table Of Content Hirarki Otomatis Blogspot
- Login dan masuk ke Blogger
- Pilih Tema >> Edit HTML
- Cari kode </head>
- Lalu Copy dan Tempel kode dibawah ini 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.0function 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>
- Selanjutnya cari kode ]]></b:skin>
- Sekarang Copy dan Tempel kode dibawah ini diatas 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: 4px 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-increment: section5
}
/*
.point2 {list-style-type:lower-alpha}
.point3 {list-style-type:lower-roman}
.point4 {list-style-type:disc}
*/
- Selanjutnya cari dan ganti semua kode <data:post.body/> dengan kode dibawah ini
<div class="mbtTOC2"> <button>Table Of Content <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div>
<div id="post-toc"><data:post.body/></div><script>mbtTOC2();</script>
- Simpan template
- Selesai
Itulah Cara Terbaru Membuat Table Of Content Hirarki Otomatis Blogspot (Daftar Isi Postingan Blogger) yang dibagikan oleh NgareBlog, Jika ada pertanyaan silahkan berkomentar dibawah.
Semoga Bermanfaat .
Terima Kasih.