Cara Membuat Table Of Content Otomatis Pada Blogger

Cara Membuat Table Of Content Otomatis Pada Blogger


Pelajar DesignPada umumnya Tabel Of Content pada postingan blog berfungsi sebagai alat untuk menunjukkan judul atau sub-judul dari postingan artikel dan memberikan inti dari seluruh postingan. Table Of Content dalam bahasa Indonesia disebut juga dengan Daftar Isi, biasanya Table Of Content ada di dalam buku yang tebal, laporan dll.

# Apa Itu Table Of Content?

Tabel Of Content (TOC) atau Daftar Isi biasanya ada sebelum atau setelah paragraf pertama pada postingan. Table Of Content berisi judul atau sub-judul dasar dari postingan dan memberi inti dari seluuh postingan.

# Manfaat Menggunakan Table Of Content

Ada beberapa manfaat apabila di blog kita dipasang Table Of Content (TOC)

1. Memudahkan Mencari Pokok

Table Of Content memudahkan pembaca untuk mencari pokok dari pembahasan yang ingin dibaca, dengan hanya mengklik link pada Table Of Content (TOC) maka pembaca akan diarahkan pada pembahasan tersebut.

2. Memudahkan Mesin Pencari

Table Of Content memudahkan mesin pencari mengenali artikel kita, karena dianggap lebih informatif bagi pembaca.

3. Lebih Terstruktur

Table Of Content membuat artikel yang kita buat lebih terstruktur dan mudah diakses oleh pembaca.

4. Memberitahu Poin-Poin

Table Of Content memberitahu pembaca poin-poin yang ingin disampaikan kepada pembaca.

Diatas adalah beberapa manfaat dari Tabel Of Content, apabila ada kesalahan silahkan kalian komentar dibawah.

# Table Of Content Dapat Meningkatkan SEO

Table Of Content dapat membantu Optimasi Mesin Pencarian. Ketika kalian menulis artikel yang panjang, konten kalian akan dibagi menjadi beberapa sub-bagian dan masing-masing sub-bagian memiliki aspek berbeda tentang topik yang sama.

Artikel yang panjang cenderung memiliki peringkat lebih tinggi di mesin pencari dam Google akan menganggap artikel yang panjang sebagai faktor peringkat.

Cara Membuat Table Of Content Otomatis Pada Blogger

1. Masuk ke Blogger.com.
2. Pilih menu TEMA  > Edit HTML.
3. Pastekan kode dibawah ini tepat DIATAS kode ]]></b:skin> atau </style>.

.mbtTOC{
box-shadow:5px 5px 0 #7b7b7b;
background-color:#e6e6e6;
color:#000000;
line-height:1.4em;
margin:30px auto;
border-radius: 5px;
padding:20px 30px 20px 10px;
font-family:Arial;
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:0px 0 0 50px;
font-size:15px;
}

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

.mbtTOC a:hover{
text-decoration:underline;
}

.mbtTOC button{
background:#ffffe000;
font-size:22px;
position:relative;
outline:none;
border:none;
color:#000000;
padding:0 0 0 15px;
}

.mbtTOC button:after{
font-family:FontAwesome;
position:relative;
left:10px;
font-size:20px;
}

:target::before {
content: '';
display: block;
height: 50px;
margin-top: 0px;
visibility: hidden
}

4. Lalu simpan kode dibawah ini DIATAS kode </head>.

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

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

5
. Simpan.

# Cara Penggunaan Table Of Content Pada Artikel

1. Buat Artikel dan jadikan heading pada poin-poin penting pada artikel.

Menjadikan Heading Pada Poin Poin

2. Masuk ke menu HTML, lalu masukkan kode ini DIAWAL dan DIAKHIR artikel.

Penerapan Table Of Content Atau TOC Pada Artikel

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

ISI ARTIKEL

<script>
    mbtTOC();
</script>

Jika pemasangan benar maka hasilnya akan seperti digambar.

Cara Membuat TableHasil Akhir Dari Pembuatan Table Of Content Atau TOC Of Content Otomatis Pada Blogger

Bagaimana tutorial tentang Cara Membuat Table Of Content Otomatis Pada Blogger. Silahkan download dibawah dan jangan lupa berikan komentar tutorial apalagi yang kalian inginkan untuk saya bahas.

Referensi : https://www.tahupost.net/2020/01/membuat-table-of-contents-otomatis-dan-manual-di-blogspot.html

You may like these posts