Pada artikel kali ini, Yaitu Membuat Daftar Isi di Blog Post Secara Otomatis di Blogspot, Ngomong-ngomong tentang Daftar Isi pada Blog, Daftar Isi di dalam Blog Post adalah yang menampilkan List Heading dan Sub Heading di dalam tulisan tersebut.
Di artikel ini, Saya akan menjelaskan Membuat Daftar Isi di Blog Post Secara Otomatis di Blogspot atau Blogger ya. Yuk mari simak dibawah ini.
Ohiya, sebelum melanjutkan ke langkah-langkahnya, Kita musti persiapkan dahulu. Karena Blogspot ini kita kudu berurusan dengan Kode-Kode HTML, CSS dan JavaScript. Tidak seperti Shortcode di WordPress yang Sesederhana. Si Blogspot ini memiliki fitur yang sangat terbatas dan tidak memiliki Plugin tidak seperti WordPress.
Membuat Daftar Isi di Blog Post di Blogspot, Berikut Langkah-Langkahnya :
Daftar Isi di dalam Blog Post ini sebenarnya konsepnya sangat sederhan. Di tiap-tiap Heading dan Sub Heading bakalan dikasih ID yang unik. Setelah itu, kita bikin List Teks Heading dan Sub Heading itu, Lalu kita pasangkan Link dengan target ke ID tersebut. Bisa banget dibikin Manual. Silahkan simak langkah-langkahnya d Link berikut ya:
Tetapi kalau Manual kan sangat melelahnya yak. Apa lagi kudu utak-atik HTML terus. Lebih Mudah dan Praktis kalau bisa di Generate secara Otomatis. Beginilah langkah-langkah untuk membuat daftar isinya secara otomatis.
#1 : Backup Themes Blog Terlebih Dahulu.
Untuk membuat Daftar Isi di dalam Blog Post secara Otomatis ini kita perlu utak-atik HTML dari Themes atau Template Blog. Biar aman, mending Backup dahulu aja Themes nya. Jadi kalau nanti ternyata ada yang salah dan Blog nya menjadi Error, Blog nya bisa di Restore lagi.
Untuk melakukan Backup, Silahkan klik menu Themes di Dashboard Blog. Lalu klik tanda panah bawah yang ada di tombol Customize, Pilih menu Backup. Lalu Simpan File Backup nya.
#2 : Tambahkan Kode untuk Generate Link Daftar Isi tersebut.
Selanjutnya mari kita edit HTML dari Themes yang digunakan. Masih dari menu dari tombol Customize sebelumnya, kali ini klik Edit HTML. Cari baris tag tersebut: </head> berada. Tekan Ctrl + F aja di Keyboard Kalian secara bersama.
Kemudian masukkan Kode berikut di atas tag </head> tersebut. Letakkan di bagian Kotak Merah seperti Capture di atas.
<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 15px !important; padding: 0 !important; }
.bwstoc ul { background: 0 0; list-style-type: none; list-style: none; }
.bwstoc ol li, .bwstoc ul li { font-size: 95%; padding: 5px 10px 0 0; margin: 0 !important; }
.bwstoc ol li:before, .bwstoc ul li:before { display: none; }
.bwstoc li.toc-h3 { padding-left: 15px; }
.bwstoc li.toc-h4 { padding-left: 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>
<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 > 1) {
for (i = 0; i < headinglength; i++) {
getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
var toc_class = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].tagName.toLowerCase();
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 class='toc-"+ toc_class +"'><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>
Kode di atas akan menghasilkan Daftar Isi yang diambil dari Teks di dalam tag h2, h3 dan h4. Kalau mau mengurangi, Misal mau h2 dan h3 saja, Bisa kalian Edit di Parameter: QuerySelectorAll.
Ohiya, Supaya kode ini mau menampilkan Daftar Isi di dalam Blog Post nya mesti ada Minimal 2 (Dua_ Heading. Sebagai contekan untuk Blogspot gunakan ini:
- Heading untuk H2
- Sub-Heading untuk H3
- Minor Heading untuk H4
#3 : Tambahkan Kode Untuk Menampilkan Daftar Isi.
Langkah berikutnya, kita perlu menambahkan Kode untuk menampilkan Daftar Isi yang sudah di Generate sebelumnya menggunakan Kode di atas. Masih di menu Edito HTML. Silahkan cari Kode <data:post.body/>.
Lalu, Ganti Kode di Kotak Merah di atas dengan Kode berikut :
<div id='post-toc'>
<div class='bwstoc' id='bwstocwrap' 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>
Kode di atas adalah Default nya untuk menampilkan Daftar Isi dalam kondisi tertutup. Kalau mau Membuka nya kita perlu klik link Tampil. Ohiya, kata Tampil atau Tutup ini bisa kalian ganti sendiri ya menggunakan Kata lain, Misalnya mau pakai Show dan Hide atau Tampilkan dan Sembunyikan dan sebagainya. Kata Konten kalau ingin diganti juga silahkan.
Kalau mau Daftar Isi nya muncul dalam kondisi Terbuka, Silahkan gunakan Kode berikut :
<div id='post-toc'>
<div class='bwstoc' id='bwstocwrap' style='display: block;'>
<div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]</div>
<ul id='bwstoc' />
</div>
<data:post.body/>
<script>
bwstoc();
</script>
</div>
#4 : Simpan Themes Blogspot dan Check Hasilnya.
Kalau sudah beres, tinggal klik Icon disket alias Save yang berada di kanan atas. Periksa juga di Artikel yang sudah mempunyai Heading, Apakah Daftar Isinya muncul sesuai yang kalian inginkan atau belum.
Berikut contoh hasilnya :
Dengan kode-kode di atas, Daftar Isi akan selalu dimuncul di awal tulisan. Kalau misalnya kalian ingin memunculkan Daftar Isi tersebut di beberapa Paragraf. Kode untuk menampilkan Daftar Isi nya jangan di taruh di Theme, Namun di dalam Blog Spot nya. Tapi ya kalau itu sih jadinya manual lagi, mesti di tiap Blog Spot.
Cara Membuat Halaman Daftar Isi di Blog di Blogspot.
Wokay, Selanjutnya kita masuk ke Cara Membuat Halaman Khusus yang berisikan Daftar Isi semua tulisan di Blog kita. Atau biasa di sebut Sitemap. Kali ini kita tidak akan utak-utik HTML di Themes Blog nya lagi, tapi cukup Bermain di Editor Page saja.
Sumber : reisha.net
Postingan
Tidak ada komentar: