Cara Menciptakan Table Of Contents Di Blogger

cara menciptakan tabel of contents pada postingan di blogger

kali ini admin akan memperlihatkan tutorial menciptakan table of content menyerupai mirip wikipedia yang SEO Friendly. Tabel of content itu menyerupai daftar isi pada sebuah postingan di blog yang mempunyai jumlah kata yang banyak dengan ada nya tabel of content memudahkan pengunjung dalam memahami isi apa saja yang ada pada blog. bingung? pribadi aja ke tutorial nya...

untuk mempercantik tampilannya tambahkan arahan CSS berikut : "Sebelum/DiAtas" tag epilog </style>

 /* Table of Contents by mejapedia.com */ .toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;} .toc h2 {display:inline; margin-right:10px} .toc a {text-decoration:none} .toc a:hover {text-decoration:underline} .toc ul {list-style-type:none; list-style-image:none; margin-left:0px; margin-bottom:0px; padding:0px; text-align:left} .toc ul li a {margin-left:.5em} .toc ul li ul {margin-left:2em} .toctogglelabel {cursor:pointer; color:#0645ad} :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} 

kini ke sajian utamanya yaitu menciptakan table of content dalam postingan blog, saat menciptakan postingan gres pastikan dalam mode HTML bukan COMPOSE. kemudian simpan arahan dibawah ini di paragraf awal

 <div class="toc">   <input type="checkbox" role="button" id="toctoggle" class="toctoggle">   <div class="toctitle">     <h2>Daftar isi</h2>     <span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span>   </div>   <ul>     <li>1 <a href="#toc1" title="Cara Membuat Table Of Contents di Blogger">Judul Satu</a></li>     <li>2 <a href="#toc2" title="Cara Membuat Table Of Contents di Blogger">Judul Dua</a></li>     <li>3 <a href="#toc3" title="Cara Membuat Table Of Contents di Blogger">Judul Tiga</a></li>     <li>4 <a href="#toc4" title="Cara Membuat Table Of Contents di Blogger">Judul Empat</a></li>     <li>5 <a href="#toc5" title="Cara Membuat Table Of Contents di Blogger">Judul Lima</a>       <ul>       <li>5.1 <a href="#toc5_1" title="Cara Membuat Table Of Contents di Blogger">Sub Judul Lima ke Satu</a></li>       <li>5.2 <a href="#toc5_2" title="Cara Membuat Table Of Contents di Blogger">Sub Judul Lima ke Dua</a></li>       </ul>     </li>     <li>6 <a href="#toc6" title="Cara Membuat Table Of Contents di Blogger">Judul Enam</a></li>   </ul> </div> 

#toc1,#toc2,#toc3, dan lain lain ialah elemen pemanggilnya. gunakan sesuai yang kau butuhkan dapat dikurangi atau ditambahi

selanjutnya atur penulisan heading atau judul didalam artikel dengan memakai id yang sama dengan table of contents pola lihat dibawah

 <h2 id="toc1">Judul Satu</h2> ...isi paragraf satu  <h2 id="toc2">Judul Dua</h2> ...isi paragraf dua  <h2 id="toc3">Judul Tiga</h2> ...isi paragraf tiga  <h2 id="toc4">Judul Empat</h2> ...isi paragraf empat  <h2 id="toc5">Judul Lima</h2> ...isi paragraf lima  <h3 id="toc5_1">Sub Judul Lima ke Satu</h3> ...isi paragraf lima part 1  <h3 id="toc5_2">Sub Judul Lima ke Dua</h3> ...isi paragraf lima part 2  <h2 id="toc6">Judul Enam</h2> ...isi paragraf enam 

sekian dulu dari mimin cara menciptakan table of contents di blogger. agar dapat dipahami dengan gampang oleh sobat. lebih baik table of contents ini dipakai untuk postingan yang benar benar mempunyai jumlah kata yang sangat banyak. happy blogging

Sumber https://mejapedia.blogspot.com/