Table of Content (Daftar Isi) di Blogspot dengan Gaya Santai |
Cara Membuat Table of Content (Daftar Isi) di Blogspot dengan Gaya Santai
Jika kamu sedang mencari cara
untuk membuat daftar isi atau table of contents (TOC) secara otomatis di
Blogspot, kamu berada di tempat yang tepat! Artikel ini akan memberikan panduan
langkah demi langkah dengan menggunakan kode CSS dan script sederhana. Mari
kita mulai!
Langkah 1: Kode CSS
Pertama-tama, tempatkan kode CSS
berikut di antara tag <style> di dalam blog kamu. Kode ini akan
memberikan tampilan yang menarik pada daftar isi.
/*CSS ToC */
.TOC {
line-height: 1.4em;
padding: 20px 30px 20px 10px;
display: block;
width: 95%;
margin: 0 auto;
background: #ffffff;
box-shadow: 1px 1px 2px #fff inset, -1px -1px 2px #fff inset;
border-radius: 3px/6px
}
.TOC ol,
.TOC ul {
margin: 0;
padding: 0;
}
.TOC ul {
list-style: none;
}
.TOC ol li,
.TOC ul li {
padding: 15px 0 0;
margin: 0 0 0 30px;
font-size: 15px;
}
.TOC a {
color: #0080ff;
text-decoration: none;
}
.TOC a:hover {
text-decoration: underline;
}
Langkah 2: Script JavaScript
Kemudian, letakkan script berikut
di atas tag <head> di blog kamu. Script ini akan membuat daftar isi
secara otomatis berdasarkan heading (h2, h3, h4) pada artikel.
document.getElementById("TOC").innerHTML += TOC; } } function mbtToggle() { var mbt = document.getElementById('TOC'); if (mbt.style.display === 'none') { mbt.style.display = 'block'; } else { mbt.style.display = 'none'; } } //]]> </script>
Langkah 3: Integrasi dengan
Artikel
Cari dan ganti tag <data:post.body/>
dengan kode berikut di dalam blog kamu.
<div id='post-toc'> <div class='TOC'> <button onclick='mbtToggle()'> DAFTAR ISI </button> <ol id='TOC'/> </div> <data:post.body/> <script> TOC(); </script> </div>
Langkah 4: Simpan dan Jalankan
Terakhir, simpan perubahan yang
sudah kamu lakukan. Daftar isi atau table of contents akan berfungsi secara
otomatis setiap kali kamu menambahkan heading atau subheading pada artikelmu.
Selamat mencoba dan semoga
artikelmu semakin terstruktur dan mudah dinavigasi! Jika ada pertanyaan, jangan
ragu untuk menanyakan.
Baca Artikel Lainnya:
- Debat Bahasa: Menjelajahi Seni Persuasi dalam Arena Argumentasi
- Maksimalkan Pengaturan SEO Blogger: Tag Header & Robot Kustom Explained
- Kelezatan Bakso Pandawa: Pak Lasiman Reok Manggarai
- Jasa SEO Specialist di Kota Ruteng
- Alien: Film Sci-Fi Horror Masterpiece (1979)
- Cara Membuat Table of Content (Daftar Isi) di Blogspot dengan Gaya Santai
- Ibu Kota Nusantara: Indonesia
- Kampung Pancasila: Inisiatif Mewujudkan
- Peran Strategis Babinsa di Koramil
- Meningkatkan Kinerja Website dengan Blazy Lazy Load
- Petualangan Entong Gundul di Kota Metropolis
- Episode 1: Terjalinnya Harmoni Semesta
- Kucing Mimi Jelajahi Kampung Oreo
- Template Blogger Gratis: Doclo V1
- Misteri Alien di Alam Semesta
- Keunikan dan Kecenderungan Anak Mendukung Potensi
- Kreativitas Anak: Cara Menginspirasi dan Mengembangkan Bakat Mereka
- Menggali Potensi Tersembunyi: Kiat untuk Membantu Anak Menemukan Minat Khusus Mereka
- Melahirkan Keunikan: Menemukan dan Mendukung Bakat Unik Anak Anda
- Keadilan dan Objektivitas: Ancaman Black Ops (Analisis Politik Modern)
- Pemilu 2024: Demokrasi Menorehkan Nama di Buku Sejarah
- Link Shortener Bitly Buatan Lokal: Ecek
- Juara MPL ID Season 12: ONIC Esports
- Mandalika: Destinasi Wisata Baru di Indonesia
- Pembaruan Algoritma Google Oktober 2023
- Borobudur: Mahakarya Arsitektur dan Spiritualitas Nusantara
- Badan Pelaksana Otorita Borobudur (BOB)
- Pariwisata Berkelanjutan: Meningkatkan Kualitas dan Keberlanjutan Destinasi Wisata