Cara Membuat Kotak Daftar Isi Tabel Automatis Sembunyi Pada Postingan Blog


Postingan kali ini akan membahas mengenai Cara membuat daftar isi jika di klik bisa sembunyi secara automatis di dalam postingan blog blogger.Postingan ini tentu mungkin sudah sangat banyak yang mentutorialkan mengenai hal yang sama yaitu cara membuat daftar isi automatis.Jika kamu ingin mempunyai sebuah daftar isi dalam postingan blogmu,Kamu bisa megikuti tutorial dan menggunakan kode html pada artikle kali ini.
Daftar isi ini berfungsi mungkin akan menampilkan link di hasil pencarian google.Yang nantinya bisa membuat blog semakin SEO dan mendapatkan pengunjung yang banyak.Daftar isi ini sering di temukan di dalam postingan blog besar atau blog yang sangat populer,Dan daftar isi ini cocok untuk di pasangi jika blog sering mengupdate artikel yang sangat banyak.

Daftar isi ini berfungsi lain untuk memberikan suatu fungsi atau rangkuman singkat dengan postingan yang akan di bahas,Misalkan membahas mengenai sebuah informasi tentang smartphone,Maka contoh daftar isi yang di tebelkan seperti: Macam smartphone,Model smartphone dan lain - lain.Yang tentunya satu komplit dengan artikel yang di bahas pada postingan tersebut.

Bagaimana denganmu ? jika kamu ingin membuat daftar isi,kamu bisa mencoba tutorial yang blog ini bagikan pada kali ini.Berikut tutorialnya.

Cara mudah membuat Daftar isi pada postingan Blog.
Cara untuk membuat adftar isi di dalam postingan blogger bisa kamu coba tutorialnya dengan menempatkan kode kode di bawah ini,silahkan di simak ya:

1.Buka blogger dasbhord,Klik tema dan pilih edit html ,dan tekan ctrl f di keyboard dan masukan tag </style> atau tag ]]></b:skin> ,kemudian pastekan kode di bawah ini.

/* Table of Contents by igniel.com */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline-block; 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:0px; padding:0px; text-align:left}
.toc ul li {list-style-type:none;}
.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}

2.Jika sudah klik save kode di atas kemudian masukan kode html di bawah ini juga di bagian postingan saat mau menulis postingan,Pilih penulisan dengan mode Html.

<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="Judul Satu">Judul Satu</a></li>
    <li>2 <a href="#toc2" title="Judul Dua">Judul Dua</a></li>
    <li>3 <a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
    <li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a></li>
    <li>5 <a href="#toc5" title="Judul Lima">Judul Lima</a>
      <ul>
      <li>5.1 <a href="#toc5_1" title="Sub Judul Lima ke Satu">Sub Judul Lima ke Satu</a></li>
      <li>5.2 <a href="#toc5_2" title="Sub Judul Lima ke Dua">Sub Judul Lima ke Dua</a></li>
      </ul>
    </li>
    <li>6 <a href="#toc6" title="Judul Enam">Judul Enam</a></li>
  </ul>
</div>

3.Dan keterangannya di bawah ini.

Ganti = #toc1 dengan Url postingan yang akan di masukan.
Judul = di ganti dengan judul postingan yang di masukan

4.Dan terakhir klik publikasikan postingan yang sudah di buat tadi.Dan jika trik ini tidak berhasil,kamu bisa langsung cek ke blog asal tutorialnya di Cara membuat daftar isi By igniel

Nah itulah cara yang bisa kamu coba terapkan untuk membuat daftar isi di dalam postingan blog dengan sangat mudah berdasarkan refrensi dari igniel .Cara ini semoga bisa kamu pahami dengan sangat mudah dan pahami dengan cepat ya,Agar di dalam postinganmu terdapat sebuah daftar isi seperti TOC mirip wikipedia.

Author

Blogger Awam Blogger Awam Fiksioner is a free template that suitable for personal blogging because the layout is like a journal.

Post a Comment