blogspot

Cara Membuat TOC (Daftar Isi) Otomatis di Blogger Tanpa Plugin

Memasang Table of Contents (TOC) atau Daftar Isi otomatis di artikel Blogger merupakan salah satu cara efektif untuk meningkatkan kualitas SEO dan kenyamanan pengunjung (User Experience). Dengan daftar isi, pembaca dapat langsung melompat ke sub-judul yang dicari tanpa perlu menggeser (scroll) layar terlalu jauh.

Tutorial ini menggunakan kode JavaScript ringan (vanilla JS) tanpa membutuhkan jQuery, sehingga tidak akan memperlambat waktu muat (loading) blog Anda.

Langkah 1: Pasang Kode CSS (Tampilan TOC)

Kode CSS ini berfungsi untuk mengatur tampilan kotak Daftar Isi agar terlihat rapi dan responsif di semua perangkat.

Masuk ke Dashboard Blogger > Tema (Theme) > Edit HTML.
Cari kode <]]></b:skin> atau </style> (Gunakan tombol Ctrl + F untuk mempermudah pencarian).

Tempelkan kode CSS berikut tepat di atas kode <]]></b:skin> atau </style>:

/* Style Table of Contents (TOC) Otomatis */
.toc-box {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 15px 20px;
  margin: 20px 0;
  display: table;
  min-width: 280px;
}
.toc-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}
.toc-list {
  padding-left: 20px;
  margin: 0;
}
.toc-list li {
  margin-bottom: 6px;
  font-size: 14px;
}
.toc-list li a {
  color: #0066cc;
  text-decoration: none;
}
.toc-list li a:hover {
  text-decoration: underline;
}
.toc-h3 {
  margin-left: 15px;
}

Langkah 2: Pasang JavaScript Otomatis

Script ini bertugas memindai seluruh Sub-Judul (<h2> dan <h3>) di dalam artikel, lalu secara otomatis membuatkan tautan daftar isi.

Masih di halaman Edit HTML template Blogger.
Cari tag </body>.

Tempelkan kode JavaScript berikut tepat di atas tag </body>:

<!-- Script TOC Otomatis -->
<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
  var tocContainer = document.getElementById("toc-auto");
  var postBody = document.querySelector(".post-body");

  if (tocContainer && postBody) {
    var headings = postBody.querySelectorAll("h2, h3");
    if (headings.length > 0) {
      var tocList = document.createElement("ol");
      tocList.className = "toc-list";

      headings.forEach(function(heading, index) {
        var id = "toc-head-" + index;
        heading.setAttribute("id", id);

        var listItem = document.createElement("li");
        if (heading.tagName.toLowerCase() === "h3") {
          listItem.className = "toc-h3";
        }

        var link = document.createElement("a");
        link.setAttribute("href", "#" + id);
        link.textContent = heading.textContent;

        listItem.appendChild(link);
        tocList.appendChild(listItem);
      });

      tocContainer.appendChild(tocList);
    } else {
      tocContainer.style.display = "none";
    }
  }
});
//]]>
</script>

Klik tombol Simpan (Save Theme).

Langkah 3: Cara Menampilkan TOC di Artikel

Setelah kode CSS dan JavaScript terpasang di template, setiap kali Anda menulis artikel baru:

Pada editor artikel Blogger, ubah mode penulisan dari Tampilan Menulis (Compose view) menjadi Tampilan HTML (HTML view).
Letakkan kode HTML berikut di posisi yang Anda inginkan (biasanya diletakkan di bawah paragraf pertama atau sebelum Heading <h2> pertama):
```
<div class="toc-box">
  <div class="toc-title">Daftar Isi:</div>
  <div id="toc-auto"></div>
</div>
```
Kembalikan ke mode Tampilan Menulis (Compose view), lalu publikasikan artikel Anda.

Catatan Penting agar Script Bekerja:

Pastikan Anda menggunakan penformatan Heading (<h2>) atau Subheading (<h3>) saat membuat sub-judul bagian di dalam artikel.
Jika artikel tidak memiliki <h2> atau <h3>, kotak TOC secara otomatis akan disembunyikan sehingga tidak mengganggu tampilan halaman.

How to Install Widgets Google PageRank (PR)

Some time ago there was a question of Mas Bayu on how to install widgets Google Pagerank (PR) and Alexa. Baiklah, saya jawab sekarang. Well, my answer now. . Perhaps this is useful also for my friends bloggers who blog widgets have not been given homework.
widget Google PR. Google widget is actually a lot of homework. . But, the most popular is the output Mypagerank. Oke, live tutorialnya: Okay, go directly to the tutorial:
1. 1. Buka situs Mypagerank . Go to site Mypagerank .
2. 2. Klik 'Google Pagerank Button'. Click 'Google Pagerank Button'.

3. 3. Masukkan URL blog anda. Enter the URL of your blog. Misalnya: http://nyosnews.blogspot.com, lalu klik 'Check PR'. For example: http://nyosnews.blogspot.com, then click 'Check PR'.

4. 4. Muncul pilihan model widget PR. Appears PR model selection widget. Klik salah satu yang anda sukai. Click on one you like.

5. 5. Masukkan skrip di bawahnya ke blog anda. Enter the script below to your blog.
6. 6. Selesai. Done.
Untuk pemasangan widget Alexa Ranking, tunggu postingan yang akan datang. To install the widget Alexa Ranking, wait for the upcoming posts.