I. Pendahuluan
Apakah Anda ingin memanjakan pengunjung dengan Daftar Isi yang memudahkan navigasi postingan di blog? Dalam tutorial ini, kita akan membuat kotak daftar isi interaktif dan responsif di Blogger, dilengkapi dengan scroll bar vertikal dan horizontal serta title bar yang elegan. Langkah-langkah berikut akan membantu Anda menciptakan pengalaman yang lebih baik bagi pembaca Anda.
Langkah-langkah:
1. Masuk ke Akun Blogger dan Buat Halaman Baru
- Login ke akun Blogger Anda.
- Buat halaman baru dengan mengklik "Halaman" di menu Blogger dan pilih "Halaman Baru".
2. Tambahkan Kode HTML
- Pastikan Anda berada di mode HTML pada editor Blogger.
- Salin dan tempel kode berikut ke dalam halaman tersebut:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Isi</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@1,700&display=swap');
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #ffffff;
color: #000000;
}
.toc-container {
max-width: 800px;
margin: 0 auto;
padding: 0;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
}
.toc-title-bar {
background-color: #333333;
color: #ffffff;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.toc-title-bar span {
font-weight: bold;
}
.label-select {
margin: 0;
}
.label-select label {
font-weight: bold;
}
.label-select select {
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
background-color: #ffffff;
color: #000000;
}
.toc-list-container {
max-height: 400px;
overflow: auto;
white-space: nowrap;
}
.toc-list {
list-style-type: decimal;
padding: 20px;
min-width: 100%;
}
.toc-list li {
margin: 10px 0;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
.toc-list a {
text-decoration: none;
color: #007BFF;
display: block;
padding: 10px;
flex-grow: 1;
}
.toc-list a:hover {
background-color: #e0e0e0;
}
.new-label {
font-family: 'Comic Neue', cursive;
font-style: italic;
font-weight: bold;
color: red;
margin-left: 10px;
}
@media (max-width: 600px) {
.toc-container {
max-width: 100%;
margin: 0 10px;
}
.toc-title-bar {
flex-direction: column;
align-items: flex-start;
}
.label-select {
margin-top: 10px;
width: 100%;
}
.toc-list {
padding: 10px;
}
}
</style>
</head>
<body>
<div class="toc-container">
<div class="toc-title-bar">
<span>Daftar Isi</span>
<div class="label-select">
<label for="labelFilter">Filter by Label:</label>
<select id="labelFilter">
<option value="all">All</option>
</select>
</div>
</div>
<div class="toc-list-container">
<ol class="toc-list" id="toc-list"></ol>
</div>
</div>
<script>
var feedUrl = "https://www.digitalnotes99.com/feeds/posts/default?alt=json&max-results=100";
fetch(feedUrl)
.then(response => response.json())
.then(data => {
var entries = data.feed.entry;
var tocList = document.getElementById("toc-list");
var labelFilter = document.getElementById("labelFilter");
var labels = new Set();
var articles = [];
var currentDate = new Date();
var newPostThreshold = 90;
entries.forEach(entry => {
var title = entry.title.$t;
var url = entry.link.find(link => link.rel === "alternate").href;
var labelList = entry.category ? entry.category.map(cat => cat.term) : ["Unlabeled"];
var publishedDate = new Date(entry.published.$t);
var isNew = (currentDate - publishedDate) / (1000 * 60 * 60 * 24) <= newPostThreshold;
articles.push({ title, url, labels: labelList, isNew });
labelList.forEach(label => labels.add(label));
});
labels.forEach(label => {
var option = document.createElement("option");
option.value = label;
option.textContent = label;
labelFilter.appendChild(option);
});
function displayArticles(filterLabel) {
tocList.innerHTML = "";
articles
.filter(article => filterLabel === "all" || article.labels.includes(filterLabel))
.forEach((article, index) => {
var listItem = document.createElement("li");
listItem.innerHTML = `${index + 1}. <a href="${article.url}">${article.title}</a>`;
if (article.isNew) {
var newLabel = document.createElement("span");
newLabel.textContent = " New";
newLabel.classList.add("new-label");
listItem.querySelector("a").appendChild(newLabel);
}
tocList.appendChild(listItem);
});
}
labelFilter.addEventListener("change", () => {
displayArticles(labelFilter.value);
});
displayArticles("all");
})
.catch(error => console.error('Error:', error));
</script>
</body>
</html>
Code copied!
3. Simpan dan Publikasikan
Setelah menempelkan kode, klik "Simpan" atau "Publikasikan" untuk membuat halaman daftar isi Anda.
II. Penjelasan Kode
1. HTML dan CSS:
- HTML: Bagian ini menentukan struktur kotak daftar isi, termasuk title bar dan daftar artikel.
- CSS: Mengatur gaya tampilan kotak daftar isi, termasuk warna, padding, border, dan responsivitas untuk tampilan mobile.
- JavaScript: Mengambil data dari feed Blogger menggunakan fetch API.
Menampilkan daftar artikel berdasarkan data yang diambil, dengan fitur filter berdasarkan label.
Menampilkan daftar artikel berdasarkan data yang diambil, dengan fitur filter berdasarkan label.
III. Kesimpulan
Dengan mengikuti panduan ini, Anda telah berhasil menciptakan kotak daftar isi yang interaktif dan responsif di Blogger. Fitur ini tidak hanya memudahkan navigasi bagi pembaca, tetapi juga memberikan tampilan yang lebih profesional pada blog Anda. Selamat mencoba, dan semoga sukses!
Jika ada pertanyaan atau membutuhkan bantuan lebih lanjut, jangan ragu untuk menghubungi saya. Selamat berkarya di Blogger!
Tidak ada komentar:
Posting Komentar