Cara Membuat Daftar Isi Otomatis di Postingan Blogger

Cara Membuat Daftar Isi Otomatis di Postingan Blogger. Daftar isi atau yang sering di sebut oleh blogger sebagai table of contents (TOC) di postingan blogger merupakan poin penting dari sebuah artikel yang biasanya di tempatkan paling atas di sebuah artikel blogger.

Fungsi dari daftar isi atau table of contents (TOC) di postingan blogger biasanya menunjukkan poin-poin penting yang ada di dalam artikel blogger.

Dengan adanya menu table of contents (TOC) atau daftar isi di artikel blogger dapat mempermudah pengunjung untuk melihat poin-poin penting dalam sebuah artikel.

Artikel-artikel blogger yang panjang biasanya menggunakan daftar isi otomatis untuk mempermudah pengunjung memilih poin mana yang akan di baca.

Untuk membuat table of contents (TOC) atau daftar isi di blogger yang menggunakan WordPress tentunya sangat mudah karena sudah ada plugin yang di sediakan secara khusus.

Akan tetapi jika sobat pengguna blogger penanganannya akan berbeda, tapi bukan berarti tidak biasa ya, bisa tapi harus di pasang secara manual di edit HTML.

Tapi sobat tidak perlu bingung karena yang akan tagul bahas di sini adalah cara membuat table of contents (TOC) atau daftar isi otomatis di postingan blogger pengguna CMS blogger.

Memasang daftar isi otomatis di postingan blogger sebenarnya tidak terlalu sulit, hanya saja bagi sobat yang masih pemula di blogger akan sedikit meras bingung.

Dengan mengikuti langkah-langkah yang tagul berikan di harapkan sobat bisa membuat daftar isi otomatis di blogger tanpa terjadi error.

Cara Membuat Daftar Isi Otomatis di Postingan blogger

Silahkan ikuti langkah-langkah seperti yang akan tagul bahas di bawah untuk membuat table of contents (TOC) atau daftar isi otomatis di postingan blogger.

Untuk template blog yang tagul gunakan adalah Viomagz yang di buat oleh Mas Sugeng, untuk sobat yang blog-nya menggunakan template lain silahkan sobat sesuaikan dengan template-nya.

Bagi sobat yang ingin memiliki template Viomagz Premium punya Mas Sugeng bisa kunjungi situsnya disini, mumpung lagi banyak potongan harga.

Berikut cara membuat daftar isi otomatis di postingan blogger

1. Login Blogger

Cara Membuat Daftar Isi Otomatis di Postingan Blogger

Silahkan sobat Login terlebih dahulu ke blog yang sobat miliki untuk memulai pembuatan daftar isi.

Setelah masuk ke tampilan dasboard blogger silahkan sobat pilih pada Menu Tema kemudian klik di menu Edite HTML.

2. Masukkan Kode CSS

Cara Membuat Daftar Isi Otomatis di Postingan Blogger

Untuk membuat tampilan daftar isi yang menarik di butuhkan kode CSS untuk membuat tampilan daftar isi terlihat lebih berwarna.

Setelah sobat sudah masuk di tampilan tema dari blog sobat sekarang waktunya mencari kode ]]></b:skin> atau </style> dengan cara kursor di klik pada area kode template kemudian tekan CTRL + F pada keyboard.

Ambil kode CSS yang sudah tagul siapkan di bawah, kemudian letakkan di atas kode ]]></b:skin> atau </style>.

 
  /*CSS ToC */

.TOC {
    line-height: 1em;
    padding: 20px 30px 20px 10px;
    display: block;
    width: 95%;
    margin: 0 auto;
    background: #F5F5F5;
    box-shadow: 1px 1px 2px #fff inset, -1px -1px 2px #fff inset;
    border-radius: 3px/6px
}

.TOC ol,
.TOC ul {
    margin: 0;
    padding: 0;
}

.TOC ul {
    list-style: none;
}

.TOC ol li,
.TOC ul li {
    padding: 15px 0 0;
    margin: 0 0 0 30px;
    font-size: 15px;
}

.TOC a {
    color: #0080ff;
    text-decoration: none;
}

.TOC a:hover {
    text-decoration: underline;

}

3. Masukkan Kode JavaScript

Cara Membuat Daftar Isi Otomatis di Postingan Blogger

Untuk mendapatkan tampilan table of contents atau daftar isi yang bisa di bilang sempurna membutuhkan kode JavaScript yang di letakkan dalam template.

Hampir sama seperti langkah di atas sobat harus mencari kode <head> dan </head> yang natinya di jadikan sebagai patokan untuk meletakkan kode JavaScript daftar isi.

Setelah sobat menemukan kode <head> dan </head> di halaman tema blog sobat silahkan ambil kode JavaScript yang sudah tagul siapkan di bawah untuk di letakkan di antara kode <head> dan </head>.

 
<script>
    //<![CDATA[                   
    function TOC() {
        var TOC = i = headlength = gethead = 0;
        headlength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
        for (i = 0; i < headlength; i++) {
            gethead = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
            document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", "point" + i);
            TOC = "<li><a href='#point" + i + "'>" + gethead + "</a></li>";
            document.getElementById("TOC").innerHTML += TOC;
        }
    }

function mbtToggle() {
    var mbt = document.getElementById('TOC');
    if (mbt.style.display === 'none') {
        mbt.style.display = 'block';
    } else {
        mbt.style.display = 'none';
    }
}
//]]>             
</script>

4. Panggil Kode CSS

Cara Membuat Daftar Isi Otomatis di Postingan Blogger

Supaya tampilan daftar isi di postingan blog bisa tampil secara otomatis sobat harus meletakkan kode panggilan yang berfungsi ketika sobat posting artikel di blog daftar isi bisa tampil secara otomatis.

Daftar isi yang bisa tampil otomatis di postingan blog akan memudahkan sobat karena tidak perlu menambahkan kode script setiap melakukan posting artikel.

Caranya hampir sama yaitu sobat harus mencari kode <data:post.body/> di halaman tema dengan bantunan CTRL + F kemudian cari kode <data:post.body/>.

Jika sobat menggunakan template Viomagz kode tersebut ada tiga, akan tetapi untuk template lain biasanya jumlahnya berbeda-beda.

Silahkan ganti kode <data:post.body/> yang berada di paling bawah dengan kode di bawah ini yang sudah tagul siapkan.

 
<div id='post-toc'>
<div class='TOC'>
    <button onclick='mbtToggle()'> DAFTAR ISI </button>
    <ol id='TOC'/>
</div>
<data:post.body/>
<script>
    TOC();
</script>
</div>

Untuk teks Daftar Isi yang berwarna merah bisa di ganti sesuai dengan yang sobat inginkan.

Kemudian simpan tema dan lihat hasilnya.

Di sarankan untuk setiap melakukan Edite Tema biasakan untuk bekup tema terlebih dahulu untuk berjaga-jaga jika ada kesalahan ketikan memasang kode daftar isi.

Itulah cara membuat daftar isi otomatis di postingan blogger yang bisa membuat tampilan blog sobat terlihat berbeda dengan yang lain dan memberi kemudahan untuk melihat poin-poin penting dari isi artikel blog sobat.