Tutorial Blog: Membuat Table of Content Pada Postingan Di Blog Secara Otomatis

Tutorial Blog: Membuat Table of Content Pada Postingan Di Blog Secara Otomatis

Table of Content atau yang biasa disebut dengan Daftar Isi merupakan point-point yang di tandai/dianggap penting dalam sebuah pembahasan, pada sebuah artikel yang akan disajikan pada penulis content, dan biasanya di pasang pada sebuah artikel yang panjang

www.margatomsio.com

Contoh penggunaan Table of Content ini dapat teman-teman temui, jika pernah atau bahkan sering mengunjungi situs Wikipedia, Jalantikus, Wikihow dan beberapa situs besar lainnya. Tujuan pemasangan Table of Content ini sendiri yang pastinya adalah untuk mempermudah pada pembaca artikel bisa langsung ke bagian yang dicarinya. Dan tentu saja, ini sangat berpengaruh terhadap SEO blog teman-teman

Nah untuk itu, pada kesempatan kali ini admin bakalan nge-share ke teman-teman yang mungkin saat ini lagi mencari tahu tentang bagaimana cara pemasangannya, simak tutorial singkat dibawah ini:
  • Login ke Dashboard blog teman-teman
  • Ke menu >Tema >Edit HTML
  • Letakan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau diantara tag <style> dan </style>
/* CSS ToC margatomsio.com */
.TOC {
    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
}
.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 {
 font-weight: 700;
    color: #4f4f4f;
    text-decoration: none;
}
.TOC a:hover {
    text-decoration: underline;
}
.TOC 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}
  • Selanjutnya letakan kode JavaScript dibawah ini diantara tag pembuka <head> dan atau tag penutup </head>
<script type='text/javascript'>
    //<![CDATA[                   
    function TOC() {
        var TOC = 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);
            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>


  • Cari kode <data:post.body/> dalam template kalian, gunakan CTRL+F untuk mempercepat pencarian. kemudian ganti dengan kode dibawah ini
<div id='post-toc'>
<div class='TOC'>
    <button onclick='mbtToggle()'>Daftar Isi</button>
    <ol id='TOC' />
</div>
<data:post.body/>
<script>
    TOC();
</script>
</div>

  • Simpan tema dan lihat hasilnya
Well, demikian pembahasan terkait Tutorial Blog: Membuat Table of Content Pada Postingan Di Blog Secara Otomatis pada artikel kali ini, semoga bermanfaat serta bisa menjadi referensi terbaik buat teman-teman semuanya. Jangan lupa berlangganan blog ini, guna mendapatkan notifikasi terbaru secara gratis
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.margatomsio.com. Terima kasih.

LANGGANAN ARTIKEL TERBARU VIA EMAIL:

0 Response to "Tutorial Blog: Membuat Table of Content Pada Postingan Di Blog Secara Otomatis"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel