Cara membuat table of konten blogger

Table of Content

Daftar Isi

• 1Cara membuat table of konten
• 2Kode css
• 3Kode table of konten

Blogstyle.my.id - Cara membuat table of konten di blogger, apa itu table of konten ?

Table of Content dalam Bahasa Indonesia disebut juga dengan nama Daftar Isi, yaitu kumpulan atau susunan judul dan nomor halaman yang menjadi Tema utama pada Bab (Chapter) tertentu dan menggambarkan atau menjelaskan poin penting dari Bab tersebut.

Jadi untuk mempermudah pembaca dalam mencari bagian2 penting dalam postingan yang kita buat ya.

Cara membuat table of konten

Pertama yang harus kalian lakukan adalah menyalin dan pastiken kode css berikut tepat di atas </style> atau ]]></b:skin> . Yang berada di template kalian.

Kode css

.toc {border:1px solid #ccc; padding:10px 12px;border-radius:5px;display:table; line-height:1.6em;} .toc h3 {display:inline-block; margin:0 10px 0 0;font-size:20px} .toc a {text-decoration:none} .toc a:hover {text-decoration:underline} .toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left} .toc ul li a {color:#0000ee;margin-left:.5em} .toc ul li {list-style-type:none;} .toc ul li ul {margin-left:2em} .toctogglelabel {cursor:pointer; color:#0000ee} :not(:checked) > .toctoggle {display:inline !important; position:absolute; opacity:0} :not(:checked) > .toctogglespan:before {content:'['} .toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'Sembunyikan';display: inline} .toctoggle:checked + .toctitle .toctogglelabel:after {content:'Tampilkan'} :not(:checked) > .toctogglespan:after {content:']'} .toctoggle:checked ~ ul{display:none} :target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

Cara nya login terlebih dahulu ke blogger kalian lalu masuk pada thema dan edit HTML nya, untuk memasang kode css tadi.

Selanjutnya salin code berikut dan tempel kan di setiap postingan yang akan kalian pakai table of konten ini.

Kode table of konten

<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h3>Daftar Isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
<li>1<a href="#toc1">Heading 1</a></li>
<li>2<a href="#toc2">Heading 2</a></li>
<li>3<a href="#toc3">Heading 3</a>
<ul>
<li>3.1<a href="#toc3-1">Sub Heading 3.1</a></li>
<li>3.2<a href="#toc3-2">Sub Heading 3.2</a></li>
</ul>
</li>
<li>4<a href="#toc4">Heading 4</a></li>
</ul>
</div>

Cara penggunaan !!

Berikan id dengan nama toc pada setiap judul kecil di postingan kalian, contoh

<h2 id="toc1">Ini adalah table of konten<h2>

<p>Ini adalah isi konten table of konten</p>

<h2 id="toc2">Ini adalah table of konten<h2>

<p>Ini adalah isi konten table of konten</p>

<h2 id="toc3">Ini adalah table of konten<h2>

<p>Ini adalah isi konten table of konten</p>