Cara Membuat Table Of Content Seperti Blog Kurazone

Sebelum nya juga saya pernah membuat tutorial cara membuat table of content, tetapi pada kesempatan kali ini saya akan memberikan tutorial cara membuat table of content ( toc ) seperti blog kurazone. untuk versi kurazone memiliki tombol show hide mirip sekali dengan wordpress.

Daftar isi

• 1 Cara Memasang Table Of Content Di Blogger
• 2 Cara Memasang Table Of Content Di Wordpress
• 3 Cara Memangil Code TOC Pada Postingan Blog
• 4 Penting Nya Table Of Content Bagi SEO
• 5 Menyisipkan Keyword LSI Di Table Of Content

oke langsung saja anda bisa langkah-langkah di bawah ini untuk membuat table of content seperti blog kurazone.

#1 Pemasangan Script CSS Melalui EDIT HTML

1. Menuju ke blogger.com > tema > edit HTML
2. Copy code css di bawah letakan tepat di atas code </style>

/* Settingan baku TOC Kurazone */ .kuratoc{padding:1px 4px 2px;border-radius:3px;color:#fff;font-weight:bold} .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:'hide';display: inline} .toctoggle:checked + .toctitle .toctogglelabel:after {content:'show'} :not(:checked) > .toctogglespan:after {content:']'} .toctoggle:checked ~ ul{display:none} :target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden} /* Untuk mengatur background, numbering dan jarak TOC Kurazone */ .toc {background-color:#F0F7FF; border:1px solid #007bfd; padding:9px; display:table; line-height:1.6em;} .toc h2 {display:inline; margin-right:10px} .toc a {text-decoration:none;color:black} .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}

3. Jangan lupa untuk simpan template

#2 Cara Memunculkan TOC Di Dalam Artikel Blog ( Manual )

1. Buatlah postingan atau anda bisa edit postingan anda untuk penghijaun artikel
2. Pindah ke mode HTML
3. Copy code HTML ini letakan sesuai keinginan anda

<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle">
<div class="toctitle">
<span class="kuratoc" style="background:#007bfd">Daftar isi</span>
<span class="toctogglespan">
<label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
<li>1 <a href="#toc1" title="Cara Memasang Table Of Content Di Blogger">Cara Memasang Table Of Content Di Blogger</a></li>
<li>2 <a href="#toc2" title="Cara Memasang Table Of Content Di Wordpress">Cara Memasang Table Of Content Di Wordpress</a></li>
<li>3 <a href="#toc3" title="Cara Memangil Code TOC Pada Postingan Blog">Cara Memangil Code TOC Pada Postingan Blog</a></li>
<li>4 <a href="#toc4" title="Penting Nya Table Of Content Bagi SEO">Penting Nya Table Of Content Bagi SEO</a></li>
<li>5 <a href="#toc5" title="Menyisipkan Keyword LSI Di Table Of Content">Menyisipkan Keyword LSI Di Table Of Content</a></li>
</ul>
</div>

4. Save postingan atau publish postingan.

Jika anda ingin mengubah warna pada toc anda bisa mengubah nya di bagian css, dan saya mengucapkan terimakasih kepada blog kurazone atas script toc nya. semoga artikel Cara Membuat Table Of Content Seperti Blog Kurazone bermanfaat.