Bagaimana cara membuat daftar isi di blogger yang benar dan Responsive gak bikin berat untuk loading blog ?
.png "Cara bikin Daftar isi di blogger yang benar")
Ada beberapa cara membuat daftar isi di Blogger, mulai dari yang sederhana hingga yang lebih kompleks menggunakan JavaScript. Berikut beberapa pilihan dan penjelasannya:
Cara: Buat daftar tautan yang mengarah ke judul postingan di dalam postingan blog itu sendiri. Gunakan tag <a href="#nama-anchor"> untuk setiap tautan di daftar isi dan tag <a name="nama-anchor"></a> di depan setiap judul yang ingin ditautkan.Contoh Kode:
<h2>Daftar Isi</h2>
<ul>
<li><a href="#judul1">Judul Bagian 1</a></li>
<li><a href="#judul2">Judul Bagian 2</a></li>
<li><a href="#judul3">Judul Bagian 3</a></li>
</ul>
<a name="judul1"></a>
<h3>Judul Bagian 1</h3>
<p>Isi bagian 1...</p>
<a name="judul2"></a>
<h3>Judul Bagian 2</h3>
<p>Isi bagian 2...</p>
<a name="judul3"></a>
<h3>Judul Bagian 3</h3>
<p>Isi bagian 3...</p>
Kelebihan: Sederhana, tidak perlu kode rumit.Kekurangan: Harus diupdate manual setiap kali ada postingan baru.
Cara: Sisipkan kode JavaScript di dalam template HTML blog Anda. Biasanya di dalam tag <head> atau sebelum tag </body>.Contoh Kode: (Letakkan kode ini sebelum tag </body>)
<script>
//<![CDATA[
function createTOC() {
var toc = document.getElementById("toc");
if (!toc) return;
var headings = document.querySelectorAll("h2, h3, h4"); // Pilih heading yang ingin dimasukkan
if (headings.length === 0) return;
var ul = document.createElement("ul");
for (var i = 0; i < headings.length; i++) {
var heading = headings[i];
var anchorId = "heading-" + i;
heading.id = anchorId;
var li = document.createElement("li");
var a = document.createElement("a");
a.href = "#" + anchorId;
a.textContent = heading.textContent;
li.appendChild(a);
ul.appendChild(li);
}
toc.appendChild(ul);
}
window.addEventListener("load", createTOC);
//]]>
</script>
Kelebihan: Otomatis, tidak perlu update manual.Kekurangan: Memerlukan sedikit pemahaman tentang JavaScript.
Kelebihan: Mudah digunakan, biasanya tanpa perlu coding.Kekurangan: Mungkin ada keterbatasan fitur atau tampilan, dan bergantung pada pihak ketiga.
Styling: Gunakan CSS untuk menyesuaikan tampilan daftar isi agar sesuai dengan tema blog Anda.Penggunaan Heading yang Konsisten: Pastikan menggunakan heading (h2, h3, dst.) secara konsisten dalam postingan Anda agar daftar isi otomatis bekerja dengan baik.
Cara buat daftar isi blog semi otomatis melalui RSS feed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Isi Blog - Lensakehidupan2025</title>
<style>
/* Gaya Umum */
body {
font-family: sans-serif;
margin: 10px; /* Margin lebih kecil */
background-color: #f9f9f9;
color: #333;
line-height: 1.6;
font-size: 15px; /* Ukuran font umum lebih kecil */
}
.container {
max-width: 900px;
margin: 0 auto;
background-color: #fff;
padding: 20px; /* Padding lebih kecil */
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #2c3e50;
border-bottom: 2px solid #eee;
padding-bottom: 8px;
margin-bottom: 20px;
font-size: 22px; /* Ukuran font judul utama lebih kecil */
}
/* List Style */
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 8px; /* Margin bawah lebih kecil */
position: relative;
}
li a{
text-decoration: none;
color: #34495e;
display: block;
padding: 10px 12px;
border-radius: 5px;
background-color: #f0f0f0;
transition: background-color 0.3s ease;
padding-left: 25px; /* Ruang untuk ikon */
}
li a:hover{
background-color: #e0e0e0;
}
li a::before{
content: "\2022"; /* Unicode bullet point */
position: absolute;
left: 10px; /* Atur posisi ikon */
top: 50%;
transform: translateY(-50%);
font-size: 14px; /* Ukuran ikon lebih kecil */
}
/* Responsif */
@media (max-width: 768px) {
.container{
padding: 15px;
}
body{
margin: 10px;
font-size: 14px;
}
h1{
font-size: 20px;
}
}
@media (max-width: 480px) {
body{
margin: 5px;
font-size: 13px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Daftar Isi Blog</h1>
<div id="blog-index">
<!-- Daftar isi akan ditampilkan di sini -->
</div>
</div>
<script>
const blogURL = "https://lensakehidupan2025.blogspot.com/feeds/posts/default?max-results=100";
const blogIndex = document.getElementById("blog-index");
fetch(blogURL)
.then(response => response.text())
.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
.then(data => {
const items = data.querySelectorAll("entry");
let html = '<ul>';
items.forEach(item => {
const title = item.querySelector("title").textContent;
const link = item.querySelector("link[rel='alternate']").getAttribute("href");
html += `<li><a href="${link}">${title}</a></li>`;
});
html += '</ul>';
blogIndex.innerHTML = html;
})
.catch(error => {
console.error("Error fetching data", error);
blogIndex.innerHTML = "<p>Gagal memuat daftar isi. Coba lagi nanti.</p>";
});
</script>
</body>
</html>
Penggabungan: Saya menggabungkan kode JavaScript untuk mengambil data dari umpan RSS blog Anda dengan kode CSS responsif yang sudah disesuaikan untuk perangkatseluler .
Penyesuaian Responsif: Saya mempertahankan semua penyesuaian CSS responsif untuk batas Bahasa Indonesia:lapisan Bahasa Indonesia:huruf , dan lebar konten agar sesuai dengan berbagai ukuran layar, terutamaseluler .
Semi-Otomatis: Kode JavaScript akan mengambil judul dan tautan postingan dari umpan RSS Anda dan menampilkannya sebagai daftar isi.Daftar isi akan diperbarui secara otomatis ketika Anda memposting artikel baru (dengan sedikit jeda waktu).
Penghapusan Input Pencarian: Saya menghilangkan input pencarian untuk menyelesaikan kode dan tampilan, karena versi semi otomatis ini fokus pada daftar isi yang diambil darimemberi makan . Anda bisa menambahkannya lagi jika Anda mau.
Salin Kode: Salin seluruh kode HTML di atas.Buka Blogger: Masuk ke akun Blogger Anda.Buat Halaman Baru: Buat halaman baru (Halaman) di Blogger.Pilih Mode HTML: Pada halaman editor, pilih mode "HTML" bukan mode "Tulis".Tempel Kode: Tempelkan kode HTML yang sudah Anda salin ke editor HTML.Dipublikasikan: Publikasikan halaman Anda.
Koneksi Internet: Daftar isi ini memerlukan koneksi internet karena JavaScript akan mengambil data darimemberi makan Anda setiap kali halaman dimuat.Uji pada Berbagai Perangkat: Pastikan Anda menguji halaman di berbagai perangkat (ponsel, tablet, desktop) untuk memastikan tampilannya sesuai.hasil maksimal=100: Anda bisa mengubah nilai ini dalam kode JavaScript jika Anda ingin mengambil lebih atau kurang dari 100 postingan.Penyesuaian CSS: Jika Anda ingin tampilan yang lebih personal, Anda dapat menyesuaikan kode CSS lebih lanjut.
Semi-otomatis: Diambil dari umpan RSS dan diperbarui setiap kali Anda memposting artikel baru.Responsif: Tampilannya sudah disesuaikan agar sesuai dengan berbagai ukuran layar, terutama untuk versi seluler .Profesional: Tampilannya bersih dan rapi.
Komentar