Pada tulisan sebelumnya saya pernah mempelajari cara bagaimana membuat daftar isi secara manual pada templat blogger. Dan pada tulisan ini saya coba mempelajari cara bagaimana membuat daftar isi secara otomatis pada templat blogger.
Saat ini saya menggunakan daftar isi dengan cara yang lebih mudah pada tautan ini.
Perbedaan yang saya pahami kali ini menggunakan Javascript untuk membuatnya, berikut ini kode yang digunakan:
Kode CSS
Kode ini diletakan pada bagian </b:skin>
/* Table of Content */
.toc {
margin: 10px 0;
background: #F0F0F0;
border: 1px solid #ddd;
}
.toc ol, .toc ul {
margin: 0 0 15px 20px;
padding: 0;
}
.toc ul {
list-style: disc;
}
.toc ol li, .toc ul li {
font-size: 95%;
padding: 5px 10px 0 0;
margin: 0 0 0 30px;
}
.toc a {
text-decoration: none;
}
.toc a:hover {
text-decoration: underline;
}
.toc .tocHeader {
font-weight: bold;
font-size: 100%;
position: relative;
outline: none;
border: none;
padding: 5px 15px 5px 5px;
margin: 5px 10px;
}
.toc .tocHeader a {
text-decoration: none;
cursor: pointer;
}
.toc .tocHeader a:hover {
text-decoration: underline;
}
Kode Javascript
Kode ini diletakan pada bagian <body>
<!-- Table of Content -->
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<script type='text/javascript'>
//<![CDATA[
function toc() {
var toc = i = headingLength = getHeading = 0;
headingLength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
if (headingLength > 1) {
// Hanya Tampil Jika Ditemukan Minimal 2 Heading
for (i = 0; i < headingLength; i++) {
getHeading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
var bk_1 = getHeading.replace(/[^a-z0-9]/gi," ");
var bk_2 = bk_1.trim();
var getHeadUrl = bk_2.replace(/s/g, "_");
document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUrl);
toc = "<li><a href='#" + getHeadUrl + "' title='" + getHeading + "'>" + getHeading + "</a></li>";
document.getElementById("toc").innerHTML += toc;
}
} else { document.write("<style>.toc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function tocShow() {
var tocBtn = document.getElementById('toc');
var tocWrapID = document.getElementById('tocwrap');
var tocLink = document.getElementById('tocLink');
if (tocBtn.style.display === 'none') {
tocBtn.style.display = 'block';
tocWrapID.style.display = 'block';
tocLink.innerHTML = 'Sembunyikan';
} else {
tocBtn.style.display = 'none';
tocWrapID.style.display = 'inline-block';
tocLink.innerHTML = 'Tampilkan';
}
}
//]]>
</script>
<noscript>
<style media='all' type='text/css'>
#tocwrap,.toc{
display:none !important;
visibility:hidden !important;
width:0 !important;
height:0 !important;
}
</style>
</noscript>
</b:if>
Kode HTML
Kode ini diletakan pada bagian <b:includable id='post' var='post'>
<!-- Post Content Container -->
<div class='card-body' expr:id='"post-body-" + data:post.id'
expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
<div id='post-toc'>
<div id='tocwrap' class='toc'>
<div class='tocHeader'>
Daftar Isi [<a id='tocLink' onclick='tocShow()'>Sembunyikan</a>]
</div>
<ul id='toc' style='display:block'/>
</div>
<data:post.body/>
<script>toc();</script>
</div>
</div>
Sampai sini daftar isi akan dibuat secara otomatis pada setiap tulisan dengan menggunakan heading dan ditampilkan pada paragraf pertama atau paling atas setiap postingan.
Setelah saya amati tampilan ini kurang menarik dan tidak seperti blog yang lain yang menggunakan daftar isi akan ditampilkan biasanya setelah paragraf pertama. Oleh karena itu saya coba memindahkan kode ini ke bagian postingan setelah paragraf pertama, jadi setiap postingan perlu memasukan kode ini juga.
<div class="toc" id="tocwrap">
<div class="tocHeader">
Daftar Isi <span style="font-size: xx-small;">[<a id="tocLink" onclick="tocShow()">Sembunyikan</a>]</span>
</div>
<ul id="toc" style="display: block;"></ul>
</div>
Jadi pada bagian post content container hanya kode ini:
<!-- Post Content Container -->
<div class='card-body' expr:id='"post-body-" + data:post.id'
expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
<div id='post-toc'>
<data:post.body/>
<script>toc();</script>
</div>
</div>
Tidak ada komentar:
Posting Komentar
Terima kasih telah berkunjung dan membaca artikel ini. Silahkan berikan saran dan pertanyaan di kolom berikut ini.