Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

Cara Membuat Table Of Content (TOC) / Daftar Isi Artikel di Blogspot Secara Otomatis (Bab 16)

Daftar Isi [Tampil]

Cara Membuat Table Of Content di Blogspot Secara Otomatis - Mempunyai sebuah blog dengan tampilan yang bagus dan mudah dipahami adalah hal yang sangat penting. Karena dengan hal tersebut kita akan memaksimalkan penjelasan kita kepada para pengunjung. Dan tentu saja akan mempermudah pengunjung dalam mendapatkan informasi di dalam blog kita.

Beberapa settingan pastinya perlu kita lakukan agar blog kita mempunyai tampilan yang maksimal tersebut. Salah satunya adalah dengan membuat daftar isi pada blog milik kita. Daftar isi sendiri bisa berupa daftar isi diluar artikel yang saya buat dalam halaman sitemaps contohnya. Kemudian di dalam artikel atau sering disebut table of contents.

Cara Membuat Table Of Content di Blogspot Secara Otomatis

Oke sobat, pada kesempatan kali ini saya akan menjelaskan bagaimana cara membuat table of contents atau daftar isi di blogspot secara otomatis. Langkah-langkahnya antara lain sebagai berikut : 

1. Masuk ke dashboard, kemudian lakukan back up template terlebih dahulu

2. Buka Halaman Html Blog, di dalam menu tema

3. Cari kata atau kode </head>

Copykan kode html dibawah ini tepat diatas kata atau kode </head>

<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>

4. Langkah selanjutnya, cari kode <data:post.body/>

Kemudian ganti semua kode <data:post.body/> dengan kode html dibawah ini : 

<div id='post-toc'>
  <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'>
    <div class='bwstocHeader'>
      Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]
    </div>
      <ul id='bwstoc' style='display:none'/>
  </div>
<data:post.body/>
<script>bwstoc();</script>
</div>

5. Klik Simpan Template

Jika sobat berhasil, maka akan tampil tampilan seperti pada gambar dibawah ini :

Tabel daftar isi diatas akan otomatis muncul ketika Anda melakukan update artikel baru tanpa harus melakukan setting kembali. Oke sobat saya kira sudah cukup jelas mengenai bagaimana cara membuat Table Of Content Otomatis atau daftar isi blog otomatis di blogspot. Semoga bisa memberikan manfaat dan terima kasih sudah berkunjung di mazkin.org

Posting Komentar untuk "Cara Membuat Table Of Content (TOC) / Daftar Isi Artikel di Blogspot Secara Otomatis (Bab 16)"