Apa itu Table Of Content ? Cara Membuat Otomatis, Semi dan Manual di Blogger

Apri Nurrohmat June 24, 2019
KelasHiro, Karawang - Hmm, pada kesempatan kali ini kami akan kembali melakukan sharing kepada kalian semua terkiat dengan informasi Table of Content, sampai dengan tentang bagaimana cara membuat tabel of content. Beikut ini pembahasannya untuk kalian semua.
Silahkan disimak dengan baik - baik ya guys.

Table of Content?
Table of content atau yang dikenal dengan daftar isi merupakan point-point daripembahasan yang terdapat pada sebuah artikel. Table of content biasanya dipasangkan pada artikel-artikel tertentu yang panjang.

Table of content dapat kalian temui pada situs-situs yang cukup terkenal seperti Wikipedia. Tujuan nya adalah untuk dapat memasang table of content pada blogger. Untuk dapat mempermudah pembaca artikel terkait dengan artikel yang sedang dibahas dan tentunya sangat berpengaruh pada SEO.

Cara Memasang Table of Content di Blogger
  • Menuju ke Dashboard kalian.
  • Pilih menu Tema > Edit HTML.
  • Jangan lupa untuk kalian letakkan kode CSS dibawah ini tepat berada diatas kode ]]></b:skin> atau diantara <style> dan </style>.
CSS
/* CSS ToC KelasHiro*/
.TOCopit {
    line-height: 1.4em;
    padding: 0 30px 20px 10px;
    display: block;
    width: 95%;
    margin: 0 auto;
    background: #eaeaea;
    border: 1px solid #ccc;
    border-radius: 3px/6px
}
.TOCopit ol,
.TOCopit ul {
    margin: 0;
    padding: 0;
}
.TOCopit ul {
    list-style: none;
}
.TOCopit ol li,
.TOCopit ul li {
    padding: 15px 0 0;
    margin: 0 0 0 30px;
    font-size: 15px;
}
.TOCopit a {
 font-weight: 700;
    color: #4f4f4f;
    text-decoration: none;
}
.TOCopit a:hover {
    text-decoration: underline;
}
.TOCopit button {
    background: #eaeaea;
    font-family: oswald, arial;
    font-size: 20px;
    position: relative;
    outline: none;
    cursor: pointer;
    border: none;
    color: #2d2d2d;
    padding: 20px 0 0 20px;
}
:target::before{content:"";display:block;height:50px;margin-top:-50px;visibility:hidden}
  • Selanjunya adalah Kalian dapat meletakkan kode JavaScript berikut diantara kode <head> dan </head>. 
Javascript
<script type='text/javascript'>
    //<![CDATA[                 
    function TOCopit() {
        var TOCopit = i = headlength = gethead = 0;
        headlength = document.getElementById("post-toc").querySelectorAll("h3, h4").length;
        for (i = 0; i < headlength; i++) {
            gethead = document.getElementById("post-toc").querySelectorAll("h3, h4")[i].textContent;
            document.getElementById("post-toc").querySelectorAll("h3, h4")[i].setAttribute("id", "point" + i);
            TOCopit = "<li><a href='#point" + i + "'>" + gethead + "</a></li>";
            document.getElementById("TOCopit").innerHTML += TOCopit;
        }
    }
function mbtToggle() {
    var mbt = document.getElementById('TOCopit');
    if (mbt.style.display === 'none') {
        mbt.style.display = 'block';
    } else {
        mbt.style.display = 'none';
    }
}
//]]>           
</script>
  • Dan yang terakhir adalah kalian dapat simpan atau save.
Table of Content Otomatis
Jika kalian memang menyukai yang namanya membuat artikel yang cukup panjang, sekitar 600 kata lebih, kami sangat merekomendasikan kalian menggunakan Table of Content secara otomatis ini.

Karena kalian sudah tidak perlu lagi yang namanya ribet-ribet memasang table of content seperti biasanya. Akan tetapi, kekurangan table of content ini ialah tidak cocok untuk diterapkan pada artikel yang pendek.

Berikut ini adalah langkah - langkahnya.
  • Buka kembali halaman Tema > Edit HTML.
  • Cari kode <data:post.body/>, kemudian ganti dengan kode berikut: 
HTML
<div id='post-toc'>
<div class='TOCopit'>
    <button onclick='mbtToggle()'>Daftar Isi</button>
    <ol id='TOCopit' />
</div>
<data:post.body/>
<script>
    TOCopit();
</script>
</div>
  • Simpan dan Save.
Table of Content Semi-otomatis
Table of content semi-otomatis ini tidak memiliki yang namanya kekurangan, karena kalian akan langsung dapat mengatur muncul atau tidaknya table of content pada artikel yang sedang kalian gunakan.

Jadi, jika ada beberapa artikel kalian memang dinyatakan pendek, maka alangkah baiknya kalian langsung menggunakan table of content semi otomatis.

Berikut ini adalah langkah - langkahnya.
  • Menuju halaman Posting, lalu kalian dapat langsung memilih artikel yang ingin dipasangkan table of content.
  • Letakkan kode berikut di awal postingan, yang hendak kalian buat menjadi artikel.
HTML
<div id='post-toc'>
<div class='TOCopit'>
    <button onclick='mbtToggle()'>Daftar Isi</button>
    <ol id='TOCopit' />
</div>
  • Dan jangan lupa juga, Letakkan kode berikut di akhir postingan 
HTML
<script>
    TOCopit();
</script>
</div>
  • Simpan dan Save
Demikian informasi yang dapat kami sampaikan untuk kalian semua. Semoga informasi ini dapat membantu kalian semua dan mempermudah kalian semua untuk dapat menjadi kan halaman website kalian menjadi jauh lebih baik lagi. 

0 Comments