Membuat Daftar Isi Otomatis Elegan di Blogger (CSS + JS Lengkap)

Oleh

 




๐Ÿ“Œ Membuat Daftar Isi Otomatis Elegan di Blogger (CSS + JS Lengkap)


Pada artikel ini saya bagikan cara membuat Daftar Isi (Table of Contents/TOC) otomatis yang:

  1. Membaca heading dari isi artikel (mulai dari H2)
  2. Muncul elegan di atas konten
  3. Bisa dilipat dengan tombol Tampilkan/Sembunyikan
  4. Responsif dan ringan (hanya 2 skrip: CSS & JavaScript)
  5. Dilengkapi animasi saat hover dan klik
  6. Hanya membaca heading dari artikel aktif saja
  7. Heading yang diklik akan scroll ke atas dan berpendar (highlight)
  8. Hasilnya seperti Daftar Isi di blog saya ini. Menarik kan!

๐ŸŽฏ Contoh hasil akhirnya seperti ini:

✅ Langkah-langkah Pemasangan

1. Salin CSS berikut

Letakkan di <head> blog Anda (di Tema → Edit HTML → cari </head> dan paste sebelum itu):


<style type='text/css'>
#daftar-isi-container {
  background: #eaf6ff;
  border: 1px solid #cde3f5;
  padding: 1rem;
  margin: 1.5rem 0;
  font-family: sans-serif;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  animation: fadeInTOC 0.8s ease-in-out;
}

@keyframes fadeInTOC {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

#daftar-isi-container h2 {
  margin-top: 0;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

#daftar-isi {
  list-style: disc;
  list-style-position: outside;
  margin: 0;
  padding-left: 1.2rem;
}

#daftar-isi li {
  display: flex;
  align-items: flex-start;
  margin: 0.3rem 0;
  transition: all 0.3s ease;
}

#daftar-isi li a {
  flex: 1;
  text-decoration: none;
  color: #333;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  transition: background 0.3s ease, transform 0.2s;
  word-break: break-word;
}

#daftar-isi li a:hover {
  background-color: #007bff;
  color: #fff;
  transform: translateX(5px);
}

#daftar-isi .toc-level-2 { margin-left: 0rem; }
#daftar-isi .toc-level-3 { margin-left: 1.5rem; }
#daftar-isi .toc-level-4 { margin-left: 3rem; }
#daftar-isi .toc-level-5 { margin-left: 4.5rem; }

#toggle-toc {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: #007bff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.3s;
}
#toggle-toc:hover {
  color: #0056b3;
}

/* Highlight heading saat diklik dari TOC */
@keyframes highlightHeading {
  0%   { background-color: #cceeff; }
  100% { background-color: transparent; }
}
.highlighted-heading {
  animation: highlightHeading 1s ease-in-out;
}
</style>

2. Salin JavaScript berikut

Letakkan di bagian paling bawah HTML Tema blog Anda, tepat sebelum </body>:


<script type="text/javascript">
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
  const labelTOC = "Daftar Isi";
  const postBody = document.querySelector(".post-body") || document.querySelector(".post");
  if (!postBody) return;

  const tocContainer = document.createElement("div");
  tocContainer.id = "daftar-isi-container";

  tocContainer.innerHTML = `
    <h2 id="toc-title">${labelTOC}</h2>
    <button id="toggle-toc">Sembunyikan</button>
    <ul id="daftar-isi"></ul>
  `;
  postBody.insertAdjacentElement("afterbegin", tocContainer);

  const tocList = document.getElementById("daftar-isi");
  const allHeadings = postBody.querySelectorAll("h2, h3, h4, h5");

  allHeadings.forEach((heading, index) => {
    if (heading.id === "toc-title") return;

    if (!heading.id) heading.id = `heading-${index}`;
    heading.addEventListener("click", () => {
      const tocTop = document.getElementById("daftar-isi-container").offsetTop;
      window.scrollTo({ top: tocTop - 20, behavior: "smooth" });
    });

    const level = parseInt(heading.tagName.substring(1));
    if (level < 2) return;

    const li = document.createElement("li");
    li.classList.add(`toc-level-${level}`);

    const a = document.createElement("a");
    a.href = `#${heading.id}`;
    a.textContent = heading.textContent;

    a.addEventListener("click", (e) => {
      e.preventDefault();
      const target = document.getElementById(heading.id);
      const yOffset = -20;
      const y = target.getBoundingClientRect().top + window.pageYOffset + yOffset;
      window.scrollTo({ top: y, behavior: 'smooth' });

      target.classList.add("highlighted-heading");
      setTimeout(() => {
        target.classList.remove("highlighted-heading");
      }, 1000);
    });

    li.appendChild(a);
    tocList.appendChild(li);
  });

  const toggleBtn = document.getElementById("toggle-toc");
  toggleBtn.addEventListener("click", () => {
    if (tocList.style.display === "none") {
      tocList.style.display = "block";
      toggleBtn.textContent = "Sembunyikan";
    } else {
      tocList.style.display = "none";
      toggleBtn.textContent = "Tampilkan";
    }
  });
});
//]]>
</script>

๐Ÿ“Œ Catatan Penting

  1. TOC ini hanya aktif di halaman postingan (karena membaca dari .post-body)
  2. Heading yang terbaca adalah dari <h2> ke bawah
  3. TOC tidak memasukkan teks "Daftar Isi" sebagai item
  4. Jika ingin versi dengan collapsible H3/H4, silakan tinggalkan komentar

Komentar

Posting Komentar

Artikel Terpopuler

Al-Quran Obat Rohani dan Jasmani

Oleh
Gambar
  Al-Quran Obat Rohani dan Jasmani Oleh: Nor Kandir, ST., BA # Al-Qur’an adalah obat, sebagaimana firman Allah: ﴿ูˆَู†ُู†َุฒِّู„ُ ู…ِู†َ ุงู„ْู‚ُุฑْุขู†ِ ู…َุง ู‡ُูˆَ ุดِูَุงุกٌ ูˆَุฑَุญْู…َุฉٌ ู„ِู„ْู…ُุคْู…ِู†ِูŠู†َ ูˆَู„َุง ูŠَุฒِูŠุฏُ ุงู„ุธَّุงู„ِู…ِูŠู†َ ุฅِู„َّุง ุฎَุณَุงุฑًุง ﴾ “Kami menurunkan Al-Qur’an yang merupakan obat dan rohmat bagi orang-orang beriman, dan ia tidak menambah orang zolim (yang tidak percaya kebenarannya) kecuali kerugian semata.” (QS. Al-Isro: 82) Yakni obat penyakit fisik, terutama penyakit hati. Allah berfirman: ﴿ูŠَุงุฃَูŠُّู‡َุง ุงู„ู†َّุงุณُ ู‚َุฏْ ุฌَุงุกَุชْูƒُู…ْ ู…َูˆْุนِุธَุฉٌ ู…ِู†ْ ุฑَุจِّูƒُู…ْ ูˆَุดِูَุงุกٌ ู„ِู…َุง ูِูŠ ุงู„ุตُّุฏُูˆุฑِ ูˆَู‡ُุฏًู‰ ูˆَุฑَุญْู…َุฉٌ ู„ِู„ْู…ُุคْู…ِู†ِูŠู†َ ﴾ “Hai manusia, telah datang kepada kalian ilmu dari Rob kalian, obat penyakit hati , petunjuk dan rohmat bagi orang beriman.” (QS. Yunus: 57) Ibnul Qoyyim (w. 741 H) menjelaskan: “Al-Qur’an adalah obat untuk seluruh penyakit baik rohani maupun jasmani, obat dunia Akhirat. Akan tetapi tidak semua orang mampu berobat dengan Al-Qur’an. Jika orang yang...
Read more »

Bacaan Setelah Al-Fatihah dalam Sholat

Oleh
Gambar
  Bacaan Setelah Al-Fatihah dalam Sholat Oleh: Nor Kandir, ST., BA Bacaan Setelah Al-Fatihah dalam Sholat A) Hukum Bacaan Setelah Al-Fatihah Disunnahkan membaca satu s urat dari Al-Qur'an setelah s urat Al-Fatihah pada dua ro kaat pertama dari semua Sholat fardhu. Adapun rokaat ketiga dan keempat, tidak dianjurkan. Ijma’ atas hal tersebut dinukil oleh: Ibnu Sirin, Ibnu Qudamah, An-Nawawi, dan Asy-Syaukani. Ibnu Sฤซrฤซn (110 H) berkata: ู„َุง ุฃَุนْู„َู…ُู‡ُู…ْ ูŠَุฎْุชَู„ِูُูˆู†َ ุฃَู†َّู‡ُ ูŠَู‚ْุฑَุฃُ ูِูŠ ุงู„ุฑَّูƒْุนَุชَูŠْู†ِ ุงู„ْุฃُูˆู„َูŠَูŠْู†ِ ุจِูَุงุชِุญَุฉِ ุงู„ْูƒِุชَุงุจِ ูˆَุณُูˆุฑَุฉٍ، ูˆَูِูŠ ุงู„ْุฃُุฎْุฑَูŠَูŠْู†ِ ุจِูَุงุชِุญَุฉِ ุงู„ْูƒِุชَุงุจِ “Aku tidak mengetahui mereka (para Shohabat ) berselisih bahwa dalam dua rokaat pertama dibaca Al-Fฤtihah dan (tambahan) surat, sedangkan pada dua rokaat terakhir hanya dibaca Al-Fฤtihah.” (Fat แธฅ Al-Bฤrฤซ, 4/477) Ibnu Qudฤmah (620 H) berkata: ูˆَุฌُู…ْู„َุฉُ ุฐَู„ِูƒَ، ุฃَู†َّ ู‚ِุฑَุงุกَุฉَ ุงู„ุณُّูˆุฑَุฉِ ุจَุนْุฏَ ุงู„ْูَุงุชِุญَุฉِ ู…َุณْู†ُูˆู†َุฉٌ ูِูŠ ุงู„ุฑَّูƒْุนَุชَูŠْู†ِ ู…ِู†ْ ูƒُู„ِّ ุตَู„َุงุฉٍ، ู„َุง ู†َุนْู„َู…ُ ...
Read more »

Doa Naik Kendaraan dan Safar

Oleh
Gambar
Doa Naik Kendaraan dan Safar Berdoa dan berdzikir dalam berbagai keadaan merupakan tanda hamba yang dicintai Allah, disamping kebaikan melimpah seperti ditulis pahala, dihapus dosa, diangkat derajat, dijaga, disembuhkan, dan dimudahkan urusan. Keluar rumah, naik kendaraan, dan safar adalah aktifitas yang sering dilakukan. Muslim bisa meraih banyak kebaikan jika mengamalkan sunnah-sunnahnya dari doa dan dzikir berikut ini. Saat Keluar Rumah Dari Anas bin Malik Rodhiyallahu ‘Anhu , Nabi ๏ทบ bersabda: “Apabila seseorang keluar dari rumahnya dan berdoa: «ุจِุณْู…ِ ุงู„ู„َّู‡ِ ุชَูˆَูƒَّู„ْุชُ ุนَู„َู‰ ุงู„ู„َّู‡ِ، ู„َุง ุญَูˆْู„َ ูˆَู„َุง ู‚ُูˆَّุฉَ ุฅِู„َّุง ุจِุงู„ู„َّู‡ِ» Dengan menyebut nama Allah, aku bertawakal kepada Allah, tidak ada daya (menjauhi keburukan) dan kekuatan (meraih kebaikan) kecuali dengan pertolongan Allah. ูŠُู‚َุงู„ُ ุญِูŠู†َุฆِุฐٍ: ู‡ُุฏِูŠุชَ، ูˆَูƒُูِูŠุชَ، ูˆَูˆُู‚ِูŠุชَ، ูَุชَุชَู†َุญَّู‰ ู„َู‡ُ ุงู„ุดَّูŠَุงุทِูŠู†ُ، ูَูŠَู‚ُูˆู„ُ ู„َู‡ُ ุดَูŠْุทَุงู†ٌ ุขุฎَุฑُ: ูƒَูŠْูَ ู„َูƒَ ุจِุฑَุฌُู„ٍ ู‚َุฏْ ู‡ُุฏِูŠَ ูˆَูƒُูِูŠَ ูˆَูˆُู‚ِูŠَ؟ Maka saat itu ada Ma...
Read more »

Hukum Tiyaroh (Anggapan Sial)

Oleh
Gambar
 Hukum Tiyaroh (Anggapan Sial) ุงู„ุญู…ุฏ ู„ู„ู‡ ูˆุงู„ุตู„ุงุฉ ูˆุงู„ุณู„ุงู… ุนู„ู‰ ู…ุญู…ุฏ ูˆุจุนุฏ Thiyaroh ( ุทูŠุฑุฉ ) atau tathoyyur ( ุชุทูŠุฑ ) berasal dari kata ( ุทَูŠْุฑ ) burung, karena dahulu orang-orang Arob jahiliyah jika hendak berangkat untuk safar atau dagang akan mengagetkan burung. Jika burung terbang ke kanan maka pertanda baik dan untung, sementara jika terbang ke kiri maka pertanda buruk dan rugi. Lalu ungkapan ini digunakan lebih khusus untuk setiap anggapan sial. Thiyaroh adalah menganggap sial sesuatu dengan mendengar, melihat, tempat, waktu, atau peristiwa. Ini salah satu bentuk syirik kecil yang dilarang agama. Contoh thiyaroh dengan melihat: melihat burung gagak di atas rumah lalu beranggapan sial akan ada musibah di rumah. Contoh thiyaroh dengan mendengar: mendengar suara “mampus” pada dini hari lalu beranggapan sial di hari itu. Contoh thiyaroh dengan tempat: melewati kuburan 3 kali berturut-turut dalam satu perjalanan lalu beranggapan sial. Contoh thiyaroh dengan waktu: memasuki bulan...
Read more »

Duduk Istirahat dalam Sholat Menurut 4 Madzhab

Oleh
  Duduk Istirahat dalam Sholat Menurut 4 Madzhab Terjadi perbedaan pendapat di kalangan ahli ‘ilmu mengenai hukum jalsah istiro h ah ( duduk istirahat ) setelah sujud kedua dan sebelum bangkit ke rokaat kedua dan keempat. Dalam hal ini terdapat dua pendapat: Pendapat Jumhur: Tidak Dianjurkan Pendapat Pertama : duduk istirahat tidak disunnahkan jika tidak ada kebutuhan. Ini adalah mazhab mayoritas Ulama: Hanafiyah, Malikiyah, Hanabilah, dan salah satu pendapat dalam mazhab Syafi’iyah. Ini pula yang dikuatkan oleh Ibnul Qoyyim (751 H) dan dipilih oleh Ibnu ‘Utsaimin (1421 H). Dalil dari Sunnah Dari Mu’awiyah Rodhiyallahu ‘Anhu , ia berkata: Rasulullah ๏ทบ bersabda: «ู„ุง ุชُุจุงุฏِุฑูˆู†ูŠ ููŠ ุงู„ุฑُّูƒูˆุนِ ูˆุงู„ุณُّุฌูˆุฏِ؛ ูุฅู†ِّูŠ ู‚ุฏ ุจุฏَّู†ْุชُ » “Jangan kalian mendahuluiku dalam ruku’ dan sujud, karena sesungguhnya tubuhku telah bertambah berat.” (HSR. Abu Dawud no. 619) Hadits ini mengisyaratkan bahwa beliau ๏ทบ melakukan duduk istirahat karena sebab tersebut (berat badannya), maka t...
Read more »