Cara Membuat Table Of Contents Otomatis di Blogger

Cara Membuat Table Of Contents di Blogger - Table Of Contents merupakan rangkaian daftar judul yang dibahas pada sebuah artikel, anda dapat mengatur daftar judul yang akan digunakan sebagai daftar isi artikel, Table Of Contents berfungsi untuk mempermudah pembaca agar dapat langsung menemukan bagian artikel yang ingin mereka baca. Jadi pembaca tidak perlu lagi untuk menggulir halaman artikel kebawah. Terlebih, jika artikel yang kita buat sangat panjang. Yang pasti akan memakan waktu lama bukan.

Ada point terpenting dalam menentukan Daftar Isi yaitu kalimat yang akan kita jadikan daftar isi dimana setiap kalimat itu harus terlebih dahulu kita rubah menjadi heading. Yang kami maksud heading yaitu adalah text atau kalimat yang terletak di atas paragraf. Jadi anda harus menseleksi text mana saja yang akan kita jadikan heading, setelah itu fitur pada Table Of Contents akan secara otomatis mengelompokkan heading-heading tersebut menjadi sebuah daftar isi fungsinya adalah agar artikel lebih terstruktur dan lebih readable (mudah di baca).

Cara Membuat Table Of Contents di Postingan Blogspot

1. Seperti biasa, pergi ke halaman Dashboard Blogger - >> Template - >> Edit HTML dan temukan kode ]]></b:skin> atau </style>

2. Salin dan tempel kode CSS tepat di atas ]]></b:skin> atau </style> berikut kode yang kami sediakan di bawah ini.

.mbtTOC{
        border:5px solid #f7f0b8;
        box-shadow:1px 1px 0 #EDE396;
        background-color:#FFFFE0;
        color:#707037;
        line-height:1.4em;
        margin:30px auto;
        padding:20px 30px 20px 10px;
        font-family:oswald, arial;
        display: inline block;
         width: auto;
        } 
  
.mbtTOC ol,.mbtTOC ul {
        margin:0;
        padding:0;
                      } 
       
.mbtTOC ul {
        list-style:none;
           }   
     
.mbtTOC ol li,.mbtTOC ul li {
        padding:15px 0 0;
        margin:0 0 0 30px;
        font-size:15px;
                            } 
          
.mbtTOC a{
        color:#0080ff;
        text-decoration:none;
          } 
          
.mbtTOC a:hover{
        text-decoration:underline; 
              }

        
.mbtTOC button{
        background:#FFFFE0;
        font-family:oswald, arial; 
        font-size:20px;position:relative; 
        outline:none;
        cursor:pointer; 
        border:none; 
        color:#707037;
        padding:0 0 0 15px;
               }  
      
.mbtTOC button:after{
        content: "f0dc"; 
        font-family:FontAwesome; 
        position:relative; 
        left:10px; 
        font-size:20px;
                    }

3. Jika sudah cari kode <data:post.body/> lalu anda ganti dengan kode dibawah ini

<div id="post-toc"><data:post.body/></div>

Perhatikan :
Biasanya kode <data:post.body/> terdapat lebih dari satu, silahkan ganti semua dengan kode di atas

4. Lalu silahkan anda klik Simpan.

Pada tahap ini kita sudah selesai untuk menerapkan kode yang ada pada edit Html, langkah yang selanjutnya kita akan membuat artikel.

Cara Memasang Tabel Of Contents di Postingan Blog

Untuk membuat Table Of Contents dalam artikel, kita perlu menambahkan kode lagi agar Table Of Contents dapat muncul pada postingan artikel blog.

1. Buat Postingan yang akan di tambah Table Of Contents

2. Masukan kode HTML berikut pada Postingan Letakkan pada Paragraf pertama ( klik Mode HTML bukan Compose)

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Daftar Isi</button> 
    <ol id="mbtTOC"></ol> 
</div>

3. Tambah kode di bawah ini pada akhir atau paling bawah dari setiap artikel yang ingin anda pasang Table of Contents

<script>mbtTOC();</script>

4. Jika sudah silahkan anda Simpan atau bisa juga langsung di Publikasikan

Catatan :
Table of Contents otomatis hanya akan mendeteksi tag h2. Jadi anda usahakan untuk membuat sub judul pembahasan dari tag h2.

Demikian untuk Cara Membuat Table Of Contents di Blogger, semoga bisa menjadi referensi dan bermanfaat untuk semua. Selamat mencoba!