. cara membuat daftar isi otomatis pada artikel blog cara membuat daftar isi otomatis pada artikel blog - arif07 -->

cara membuat daftar isi otomatis pada artikel blog

 

pada kesempatan kali ini kita akan membahas cara menambahkan daftar isi pada artikel blog kita , daftar isi ini otomatis sama seperti artikel saya sebelumnya cara menambah kan baca juga oke langsung saja .

1.langkah pertama 

kalian pergi ke menu tema pada blogspot kalian kemudian pilih edit html . pasti sudah tau yah nih gw kasih gambar 

noh jelas kan 

2.tambahkan xml, javascript, dan css

kalian cari tag </head> dan masukan code javascript dan css di bawah ini 

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>

<style media='all' type='text/css'>

.bwstoc {

 margin: 10px 0;

 background: #F0F0F0;

 border: 1px solid #ddd;

}

.bwstoc ol, .bwstoc ul {

 margin: 0 0 15px 20px;

 padding: 0;

}

.bwstoc ul {

 list-style: disc;

}

.bwstoc ol li, .bwstoc ul li {

 font-size: 95%;

 padding: 5px 10px 0 0;

 margin: 0 0 0 30px;

}

.bwstoc a {

 text-decoration: none;

}

.bwstoc a:hover {

 text-decoration: underline;

}

.bwstoc .bwstocHeader {

 font-weight: bold;

 font-size: 100%;

 position: relative;

 outline: none;

 border: none;

 padding: 5px 15px 5px 5px;

 margin: 5px 10px;

}

.bwstoc .bwstocHeader a {

 text-decoration: none;

 cursor: pointer;

}

.bwstoc .bwstocHeader a:hover {

 text-decoration: underline;

}

</style>

<!-- Blogger TOC -->

<script type='text/javascript'>

//<![CDATA[

function bwstoc() {

 var bwstoc = i = headinglength = getheading = 0;

 headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;

 if (headinglength > 0) {

 // Hanya Tampil Jika Ditemukan Minimal 1 Heading

 for (i = 0; i < headinglength; i++) {

 getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;

 var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");

 var bws_2 = bws_1.trim();

 var getHeadUri = bws_2.replace(/\s/g, "_");

 document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);

 bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";

 document.getElementById("bwstoc").innerHTML += bwstoc;

 }

 } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }

}

function bwstocShow() {

    var bwstocBtn = document.getElementById('bwstoc');

 var bwstocWrapID = document.getElementById('bwstocwrap');

 var bwstocLink = document.getElementById('bwstocLink');

    if (bwstocBtn.style.display === 'none') {

        bwstocBtn.style.display = 'block';

 bwstocWrapID.style.display = 'block';

 bwstocLink.innerHTML = 'Tutup';



    } else {

        bwstocBtn.style.display = 'none';

 bwstocWrapID.style.display = 'inline-block';

 bwstocLink.innerHTML = 'Tampil';

    }

}

//]]>

</script>

<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>

</b:if>

3.menambah xml agar muncul secara otomatis

sekarang adalah langkah terakhir yaitu menambah xml nya. kalian cari tag <data:post.body/>pada tamplate kalian dan ganti dengan script berikut 

<b:if cond='data:blog.metaDescription'>

  <data:blog.metaDescription/><br/><br/>

</b:if>

<div id='post-toc'>

  <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'>

    <div class='bwstocHeader'>

      daftar isi [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]

    </div>

      <ul id='bwstoc' style='display:none'/>

  </div>

<data:post.body/>

<script>bwstoc();</script>

</div>

nah pada artikel sebelum nya juga kita mencari tag ini kan jadi tag itu lah yang kita ganti dengan code di atas .
dan selesai sudah selamat mencoba

5.penutup

kalian harus menggunakan tag <h2>,<h3>,<h4> pada artikel kalian misal di judul-judul step itu kalian harus menggunkan tag itu agar daftar isi nya muncul di artikel kalian 

oke mungkin cukup di sini , silakan coment jika tidak mengerti atau ter jadi masalah ...

terimakasih  

logo
[Les't learn networking and programming]
  • WhatsApp
  • Instagram
  • Subscribe Our Newsletter

    Related Posts

    Buka Komentar
    Tutup Komentar

    0 Response to "cara membuat daftar isi otomatis pada artikel blog "

    Iklan Atas Artikel

    loading...

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel