Cara Membuat Daftar Isi di Blogspot Secara Otomatis
Kembali lagi di #tipsbloggingalareisha. Ehem. Setelah sebelumnya saya jelasin cara membuat halaman daftar isi di blog WordPress.com, kali ini kita lanjut ke cara membuat daftar isi di Blogspot yaa.
Ngomong-ngomong tentang daftar isi blog, ternyata ada dua persepsi ya. Ada yang maksudnya itu daftar isi di dalam blog post, yang menampilkan list heading dan subheading di dalam tulisan tersebut. Ada juga yang maksudnya satu halaman khusus yang berisi daftar semua tulisan yang ada di blog tersebut, jadi yang ditampilkan judul-judul artikelnya.
Don’t worry be happy, di tulisan ini akan saya jelasin cara membuat kedua jenis daftar isi tersebut secara otomatis untuk Blogspot yaaa. Yuk mari langsung saja.
Oia siapkah mental dulu #halah, karena untuk Blogspot ini kita kudu berurusan sama kode-kode HTML, CSS, dan JavaScript. Ga sesederhana shortcode di WordPress memang, heuheu. Ya nasib, si Blogspot fiturnya terbatas dan ga ada plugin-nya, hehe.
Daftar Isi Tulisan Ini
Cara Membuat Daftar Isi di Dalam Blog Post di Blogspot
Daftar isi di dalam blog post ini sebenarnya konsepnya sederhana. Di tiap heading dan subheading bakal dikasih id yang unik. Setelah itu kita bikin list teks heading dan subheading itu, lalu kita pasangin link dengan target ke id tersebut. Bisa banget dibikin manual, silakan cek caranya di blog igniel ini ya.
Tapi kalo manual kan lelah yaa bikinnya. Apalagi kudu utak-atik HTML terus. Lebih mudah dan praktis kalau bisa di-generate secara otomatis. Begini langkah-langkah untuk membuat daftar isinya secara otomatis.
Backup Theme Blog Terlebih Dahulu
Untuk membuat daftar isi di dalam blog post secara otomatis ini kita perlu utak-atik HTML dari theme/template blog. Biar aman, mending backup dulu aja theme-nya, jadi kalau nanti ternyata ada yang salah dan blognya jadi error, blognya bisa di-restore lagi.
Untuk melakukan backup, silakan klik menu Theme di dashboard. Lalu klik tanda panah bawah yang ada di tombol Customise, pilih menu Backup, lalu simpan file backup-nya.
Tambahkan Kode untuk Generate Link Daftar Isi
Selanjutnya mari kita edit HTML dari theme yang digunakan. Masih dari menu dari tombol Customise tadi, kali ini klik Edit HTML. Cari baris di mana tag </head> berada. Ctrl + F aja biar gampang, hehe.
Kemudian masukkan kode berikut di atas tag </head> tersebut. (Taruh di bagian kotak pink di gambar 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>Oia untuk kode generate daftar isi di atas, saya nyontek kode dari blognya Mas Bibit, hanya saja setelah saya coba, di daftar isinya itu semua heading dan subheading ditampilkan sejajar, jadi ga kelihatan mana yang heading mana yang subheading. Kode yang di atas itu udah saya modif biar ada pembeda antara heading dan subheading.
Kode di atas akan menghasilkan daftar isi yang diambil dari teks di dalam tag h2, h3, dan h4. Kalau mau dikurangi, misal mau h2 dan h3 aja, bisa edit di parameter querySelectorAll.
Oh iya, biar kode ini mau menampilkan daftar isi, di dalam blog post-nya mesti ada minimal dua heading. Sebagai contekan, untuk Blogspot gunakan:
- Heading untuk
h2 - Sub-heading untuk
h3 - Minor heading untuk
h4
Tambahkan Kode untuk Menampilkan Daftar Isi
Langkah berikutnya, kita perlu menambahkan kode untuk menampilkan daftar isi yang udah di-generate oleh kode di atas. Masih di editor HTML-nya, silakan cari kode <data:post.body/>.
Ganti kode di kotak pink 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 Mas Bibit di atas default-nya nampilin daftar isi dalam kondisi tertutup. Kalau mau buka, kita perlu klik link “Tampil”. Oia kata “Tampil” atau “Tutup” ini bisa diganti sendiri ya dengan kata lain, misalnya maunya pake “Show” dan “Hide”, “Tampilkan” dan “Sembunyikan”, dan sebagainya. Kata “Konten” kalau mau diganti juga silakan.
Kalau mau daftar isinya muncul dalam kondisi terbuka, silakan 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>Simpan Theme Blogspot dan Cek Hasilnya
Kalau udah beres, tinggal klik icon disket alias Save yang ada di kanan atas deh. Periksa juga di artikel yang udah punya heading, apakah daftar isinya muncul sesuai harapan.
Contoh hasilnya bisa dilihat di blog dummy saya ini.
Dengan kode-kode di atas, daftar isi akan selalu dimunculkan di awal tulisan. Kalau misalnya maunya muncul setelah beberapa paragraf, paling kode untuk menampilkan daftar isinya jangan ditaruh di theme, namun di dalam blog post-nya. Tapi yaa kalau itu sih jadinya manual lagi, mesti di tiap blog post, heuheu.
Atau mungkin kode di atas masih bisa dimodif biar nampilin daftar isinya setelah beberapa paragraf, tapi saya malas ulik-ulik lagi, wkwk.
Saya juga pakai daftar isi otomatis buat blog saya Mbak. Idenya sih terinpirasi dari beberapa blog luar seperti Zen Habits, The Minimalists dan Simple Living Daily. Menurut saya lebih simpel dan looks better daripada widget archieve bawaan blogger.
Wah mantep juga nih daftar isi blognya mas Prima. Izin nyontek yaaaa. 😀
Ahh ini yg aku cariii dr dulu mo bikin daftar isi per label. Tapi baru sekali baca belum mudeng, harus diulang lagi dan lagi deh tengkyu mbaaa
Siiip. Enakan baca sambil langsung praktek 😉 Semoga berhasil yaaa 😀
Hihi dicoba buat blog sampingan yg di Blogger.
Oh iya mau tanya, kalau Mba Reisha di blog ini daftar isinya pake plugin apa ya?
Hehe, akun blogger untuk eksperimen 😆
Di blog ini saya pake 2 plugin utk bikin daftar isi: easy table of contents (utk di dalam postingan) sama display posts (utk halaman daftar isi). Ini mau saya tulis juga tp msh antre sm tulisan lain dulu, wkwk
Makasi banyak tutorial BP-nya Uni… Sering2 dong *eh ngelunjak. Sedih BP kudu ekstra effort klo mau custom dibanding WP huhu
kadang aku pusing kalau udah utak atik html, meskipun udah nyontek misalnya, ntar takut salah naruh posisinya
blogpost aku belum pernah aku bikinin model daftar isi, mungkin next perlu belajar sambil nyontek contekannya mbak reisha nih
Alhamdulillah sy sdh berhasil pasang daftar isi di dalam postingan. Tapi sy cuba pasang manual di postingan untuk ditempatkan di alinea 2 atau 3 atau sebelum tag h2….terima kasih
Halo. Akhirnya saya nemu cara bikin sitemap yang bener di blogspot. Sebelumnya bingung nyari karena kebanyakan pada outdated, tapi yang ini simply works. Gak pake script lain, tapi langsung di HTML blogger-nya. Terima kasih banyak.
Halo, alhamdulillah berhasil ya 🙂
solusi kalau daftar isinya tidak muncul bagaimana Bu ?
Coba dicek lagi setting blog feed-nya, serta kodenya apakah sudah benar atau belum mas.
Alhamdulillah…setelah nguprek tutorial kesana kemari,akhirnya ini yang berhasil,thanks ya Bund…tutorialnya,salam sukses n bahagia selalu bersama keluarga tercinta
Alhamdulillah..terima kasih atas artikel tutorialnya, saya mesti bolak balik baca artikel ini supaya faham bener, maklum biasa bahasa gaul..pas liat bahasa html…lier mah urang euy…sukses n berkah selalu ya..Salam.
Mantap kak’, bekerja dengan baik kaka.
Oiya saya juga menulis tentang bloggspot, mungkin bisa bermanfaat kak.
hatur nuhun gan…… berhasil
Terima kasih….
Apakah tidak akan menjadi duplikat ?
timakasih ilmunya