Cara membuat Table Of Content pada Blogspot

Nofantz at 2/05/2020

Daftar isi

• 1 Cara membuat Table Of Content pada postingan Blogspot
• 2 Langkah-langkah memasang Table Of Content pada Blogspot
• 3 Contoh Table Of Content

Cara membuat Table Of Content pada postingan Blogspot

Table Of Content atau bisa di sebut dengan Daftar Isi yang terdapat pada artikel atau postingan blogspot dan biasanya ditempatkan pada bagian atas dari isi artikelnya. Table Of Content ini merupakan daftar rincian atau daftar isi dari artikel suatu blog yang dapat mempermudah pembaca untuk mencari artikel yang di kehendaki dengan cepat. Karena Tabel Of Content ini merupakan link-link dari Sub Judul / Sub Heading dari suatu artikel.

Table Of Content ini mirip sekali dengan Daftar isi yang ada pada Buku-buku. Bila kita ingin membaca dengan judul tertentu, kita bisa langsung mencarinya dari daftar isi tersebut, ada pada halaman berapa artikel yang kita cari tersebut berada.

Kali ini admin akan membagikan tutorial cara memasang atau membuat Table Of Content pada postingan blogspot. Kalau untuk Wordpress mungkin beda lagi ya caranya. Ini khusus Blogspot saja.

Langkah-langkah memasang Table Of Content pada Blogspot

1. Pertama,Login dulu ke Akun Blogger kamu ➜ Menu ➜ Tema
2. Copy dan Paste kan Code CSS berikut sebelum ]]></b:skin> atau </style>. Kemudian Simpan.
   

   
   /* Table of Contents */
   .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}
   

3. Buat artikel atau edit artikel yang sudah ada dengan menambahkan kode berikut pada awal atau sebelum artikel.
   

   
   <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>
   

   Toc1, toc2, toc3 bisa kamu ganti sesuai keinginan.
   
4. Kemudian atur id dari Sub Heading artikel kamu seperti contoh 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
   

5. Publikasikan artikel, dan lihat hasilnya.

Contoh Table Of Content

Sekian Tutorial Cara membuat Table Of Content pada Blogspot, bila ada hal yang perlu ditanyakan, dapat kamu sampaikan pada kolom komentar di bawah.
Terima Kasih, dan Semoga Bermanfaat.

Related Posts