Cara Membuat Daftar Isi Artikel Otomatis di Blog
Daftar isi atau Table
Of Content merupakan salah satu elemen yang tergolong penting
dalam sebuah blog / web. Layaknya sebuah buku, blog juga harus memiliki daftar
isi sebagai tempat informasi bagi para pengunjung blog yang berisi daftar judul
- judul artikel yang telah dipublikasikan, sehingga pengunjung bisa dengan
mudah mencari informasi yang di butuhkan.
5 BLOGGER SUKSES YANG WAJIB KITA IKUTI
Selain itu, menurut para ahli SEO, membuat sitemap blog juga termasuk
salah satu bentuk SEO, sebab di dalam sitemap memuat susunan link yang sangat
komplek dan secara otomatis memperkuat link building sebuah blog.
Mengapa disebut daftar isi otomatis? Karena setiap postingan yang anda
publikasikan akan secara otomatis tersimpan / tercantum di dalam halaman daftar
isi blog. Jadi kita tidak perlu menulisnya secara manual, Praktis boss.
Berikut ini cara membuat daftar isi / sitemap otomatis di blog
menggunakan script yang bisa di bilang sangat ringan atau Responsive, sebab
halaman daftar isi sederhana ini di muat tidak menggunakan bantuan link dari
luar
Sedulur kabeh, Bagaimana caranya untuk membuat daftar isi di dalam
artikel secara otomatis atau table of content (TOC) di blogspot atau
blogger.com?. Caranya sangat mudah untuk demonya mari kita lihat diblog ini,
mari teman-teman blogger simak tutorial dibawah ini.oke? okelah kalo begitu.
Cara Membuat Table Of Content (TOC) Otomatis di Blogspot
Langkah 1: Backup/ Cadangkan Template Blog
Sebelum meng-edit HTML alangkah baiknya kita meng-back up
Template(Theme) kita dahulu. Dengan cara klik setelan, klik cadangkan.
Apa tujuan dari membackup
template?. dibuat jaga-jaga jika template yang sudah diedit error.kita bisa pulihkan lagi Template tersebut. Jadi aman kan? heheheh
Langkah 2: Cari kata </head>
Dan copykan kode ini diatas
</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>
Baca Juga: Makanan Dengan Protein Tingggi
Langkah 3: Cari kode <data:post.body/>
Dan ganti semua kode
<data:post.body/> menjadi kode dibawah ini.
Jika anda tidak bisa menemukan
kode <data:post.body/>, maka setelah masuk edit HTML kita klik
Ctrl+f otomatis muncul deh kode <data: post.body/> biasanya kode <data:
post.body/> ada yang berjumlah dua
dan ada pula berjumlah tiga.
Oke klo sudah ketemu copi paste kode 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>
Langkah 4: Simpan Template
Setelah selesai mengedit
template blog tersebut langkah terakhir adalah klik "simpan".
Mengatasi Daftar Isi tidak Muncul
Seperti pengalaman saya
sebelumnya, daftar isi artikel sebelumnya diblog ini tidak muncul. Setelah
ditelusuri dan diamati teryata blog ini tidak memakai h1, h2, h3 tetapi memakai
Normal, Large, Largest.
Siiippp
BalasHapus