Berikut ini catatan saya ketika mencoba membuat tombol buka dan tutup suatu bagian dari postingan di blogger. Tombol tersebut dibuat dengan kode cascading style sheet (CSS) dan javascript (Js). Catatan ini dibuat untuk pemula.
Inilah contoh tombol yang sudah dibuat.
Ini adalah konten pertama yang akan ditampilkan atau disembunyikan.
Ini adalah konten kedua yang akan ditampilkan atau disembunyikan.
Berikut ini contoh kode lengkap, dapat disalin ke notepad++ atau sejenisnya untuk disimpan sebagai file dengan nama tertentu dan ekstensi HTML. File ini nantinya dapat digunakan sebagai percobaan mandiri secara luring.
Kode untuk style dan script dibuat juga secara terpisah di kotak berikutnya agar lebih mudah disain ketika akan diterapkan ke dalam tema blogger.
Contoh kode model tombol dalam format lengkap HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion Preview</title>
<style>
/* Container utama untuk setiap accordion */
.post-accordion-container {
margin: 10px 0; /* Jarak antar accordion */
position: relative; /* Untuk positioning bingkai */
}
/* Wrapper untuk bingkai di sekitar tombol */
.post-accordion-btn-wrapper {
display: inline-block; /* Agar wrapper mengikuti ukuran tombol */
padding: 6px; /* Jarak antara tombol dan bingkai */
background: linear-gradient(to bottom, #d9d9d9, #b3b3b3); /* Warna bingkai abu-abu dengan gradien */
border-radius: 10px; /* Sudut membulat untuk bingkai */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), /* Efek cekungan pada bingkai */
inset 0 -2px 4px rgba(255, 255, 255, 0.3),
0 2px 4px rgba(0, 0, 0, 0.1); /* Bayangan luar untuk kesan 3D */
transition: box-shadow 0.3s ease; /* Transisi halus untuk bayangan */
}
/* Efek hover pada bingkai */
.post-accordion-btn-wrapper:hover {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25),
inset 0 -2px 4px rgba(255, 255, 255, 0.4),
0 3px 6px rgba(0, 0, 0, 0.15); /* Bayangan lebih dalam saat hover */
}
/* Efek bingkai saat tombol aktif */
.post-accordion-btn-wrapper.active {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25),
inset 0 -2px 4px rgba(255, 255, 255, 0.5),
0 3px 6px rgba(0, 0, 0, 0.15); /* Bayangan lebih dalam saat aktif */
}
/* Styling tombol accordion */
.post-accordion-btn {
background: linear-gradient(to bottom, #00cc00, #008000); /* Hijau saat tidak aktif */
color: white; /* Teks putih untuk kontras */
cursor: pointer;
padding: 8px 12px; /* Padding tombol */
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.5); /* Border untuk efek bevel */
border-bottom-color: rgba(0, 0, 0, 0.5); /* Bayangan bawah */
border-right-color: rgba(0, 0, 0, 0.5); /* Bayangan kanan */
border-radius: 8px; /* Sudut membulat tombol */
box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.6), /* Efek bevel dalam */
inset 0 -2px 2px rgba(0, 0, 0, 0.4),
0 4px 6px rgba(0, 0, 0, 0.3); /* Bayangan luar untuk kesan 3D */
text-align: center;
font: 16px monospace, serif; /* Font tombol */
transition: all 0.3s ease; /* Transisi halus untuk semua perubahan */
}
/* Efek hover pada tombol */
.post-accordion-btn:hover {
background: linear-gradient(to bottom, #00e600, #009900); /* Hijau lebih terang saat hover */
box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.7),
inset 0 -2px 2px rgba(0, 0, 0, 0.4),
0 6px 10px rgba(0, 0, 0, 0.3); /* Bayangan lebih besar */
transform: translateY(-1px); /* Tombol naik sedikit */
}
/* Styling tombol saat aktif (konten terbuka) */
.post-accordion-btn.active {
background: linear-gradient(to bottom, #ff3333, #cc0000); /* Merah saat aktif */
color: white; /* Pastikan teks tetap putih */
box-shadow: inset 0 -2px 2px rgba(255, 255, 255, 0.3), /* Efek bevel terbalik */
inset 0 2px 2px rgba(0, 0, 0, 0.5),
0 2px 4px rgba(0, 0, 0, 0.2); /* Bayangan lebih kecil */
transform: translateY(1px); /* Tombol turun seperti ditekan */
}
/* Efek hover saat tombol aktif */
.post-accordion-btn.active:hover {
background: linear-gradient(to bottom, #ff4d4d, #e60000); /* Merah lebih terang saat hover */
box-shadow: inset 0 -2px 2px rgba(255, 255, 255, 0.4),
inset 0 2px 2px rgba(0, 0, 0, 0.5),
0 4px 6px rgba(0, 0, 0, 0.3);
transform: translateY(0); /* Kembali ke posisi normal */
}
/* Styling konten accordion */
.post-accordion-content {
padding: 5px;
background-color: #f9f9f9; /* Latar belakang konten */
max-height: 0; /* Sembunyikan konten secara default */
overflow: hidden;
line-height: 1.5em;
transition: max-height 0.3s ease-out; /* Animasi saat membuka/menutup */
border-radius: 0 0 8px 8px; /* Sudut membulat di bawah */
}
.post-accordion-content p {
margin: 5px; /* Jarak teks di dalam konten */
}
</style>
</head>
<body>
<h2>Accordion 3D</h2>
<!-- Container Pertama -->
<div class="post-accordion-container">
<div class="post-accordion-btn-wrapper">
<button class="post-accordion-btn" data-open-text="Lihat Pembahasan Lagi" data-close-text="Tutup Pembahasan">Lihat Pembahasan</button>
</div>
<div class="post-accordion-content">
<p>Ini adalah konten pertama yang akan ditampilkan atau disembunyikan.</p>
</div>
</div>
<!-- Container Kedua -->
<div class="post-accordion-container">
<div class="post-accordion-btn-wrapper">
<button class="post-accordion-btn" data-open-text="Buka Pembahasan Lagi" data-close-text="Tutup Pembahasan">Buka Pembahasan</button>
</div>
<div class="post-accordion-content">
<div>Ini adalah konten kedua yang akan ditampilkan atau disembunyikan.</div>
</div>
</div>
<script>
// Loop melalui setiap container accordion
document.querySelectorAll('.post-accordion-container').forEach(function(container) {
const btn = container.querySelector('.post-accordion-btn'); // Tombol
const wrapper = container.querySelector('.post-accordion-btn-wrapper'); // Wrapper bingkai
const panel = container.querySelector('.post-accordion-content'); // Konten
// Ambil teks untuk tombol saat buka/tutup dari data atribut
const openText = btn.getAttribute('data-open-text') || 'Buka';
const closeText = btn.getAttribute('data-close-text') || 'Tutup';
// Event listener untuk klik tombol
btn.addEventListener('click', function() {
this.classList.toggle('active'); // Tambah/hapus kelas active pada tombol
wrapper.classList.toggle('active'); // Tambah/hapus kelas active pada wrapper
if (panel.style.maxHeight) {
panel.style.maxHeight = null; // Tutup konten
this.textContent = openText; // Ubah teks tombol
} else {
panel.style.maxHeight = panel.scrollHeight + 'px'; // Buka konten
this.textContent = closeText; // Ubah teks tombol
}
console.log('Button class:', this.className); // Debug kelas
console.log('Button background:', window.getComputedStyle(this).background); // Debug warna
});
});
</script>
</body>
</html>
Langkah penerapan dalam Tema Blogger
1. Penempatan CSS di dalam Tema Blogger
CSS harus ditempatkan di dalam tag <b:skin> agar Blogger mengenalinya sebagai bagian dari stylesheet tema.
Langkah:
- Di dashboard Blogger, klik Theme > Edit HTML.
- Cari tag <b:skin><![CDATA[ (biasanya ada di dekat bagian atas tema).
- Tempelkan kode CSS sebelum penutup ]]></b:skin>.
- Pastikan tidak ada sintaks error, lalu klik Save.
Style (CSS)
/* CSS untuk accordion */
.post-accordion-container {
margin: 10px 0; /* Jarak antar accordion */
position: relative; /* Untuk positioning bingkai */
}
.post-accordion-btn-wrapper {
display: inline-block; /* Agar wrapper mengikuti ukuran tombol */
padding: 6px; /* Jarak antara tombol dan bingkai */
background: linear-gradient(to bottom, #d9d9d9, #b3b3b3); /* Warna bingkai abu-abu */
border-radius: 10px; /* Sudut membulat untuk bingkai */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), /* Efek cekungan */
inset 0 -2px 4px rgba(255, 255, 255, 0.3),
0 2px 4px rgba(0, 0, 0, 0.1); /* Bayangan luar untuk kesan 3D */
transition: box-shadow 0.3s ease; /* Transisi halus untuk bayangan */
}
.post-accordion-btn-wrapper:hover {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25),
inset 0 -2px 4px rgba(255, 255, 255, 0.4),
0 3px 6px rgba(0, 0, 0, 0.15); /* Bayangan lebih dalam saat hover */
}
.post-accordion-btn-wrapper.active {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25),
inset 0 -2px 4px rgba(255, 255, 255, 0.5),
0 3px 6px rgba(0, 0, 0, 0.15); /* Bayangan lebih dalam saat aktif */
}
.post-accordion-btn {
background: linear-gradient(to bottom, #00cc00, #008000); /* Hijau saat tidak aktif */
color: white; /* Teks putih untuk kontras */
cursor: pointer;
padding: 8px 12px; /* Padding tombol */
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.5); /* Border untuk efek bevel */
border-bottom-color: rgba(0, 0, 0, 0.5); /* Bayangan bawah */
border-right-color: rgba(0, 0, 0, 0.5); /* Bayangan kanan */
border-radius: 8px; /* Sudut membulat tombol */
box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.6), /* Efek bevel dalam */
inset 0 -2px 2px rgba(0, 0, 0, 0.4),
0 4px 6px rgba(0, 0, 0, 0.3); /* Bayangan luar untuk kesan 3D */
text-align: center;
font: 16px monospace, serif; /* Font tombol */
transition: all 0.3s ease; /* Transisi halus untuk semua perubahan */
}
.post-accordion-btn:hover {
background: linear-gradient(to bottom, #00e600, #009900); /* Hijau lebih terang saat hover */
box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.7),
inset 0 -2px 2px rgba(0, 0, 0, 0.4),
0 6px 10px rgba(0, 0, 0, 0.3); /* Bayangan lebih besar */
transform: translateY(-1px); /* Tombol naik sedikit */
}
.post-accordion-btn.active {
background: linear-gradient(to bottom, #ff3333, #cc0000); /* Merah saat aktif */
color: white; /* Pastikan teks tetap putih */
box-shadow: inset 0 -2px 2px rgba(255, 255, 255, 0.3), /* Efek bevel terbalik */
inset 0 2px 2px rgba(0, 0, 0, 0.5),
0 2px 4px rgba(0, 0, 0, 0.2); /* Bayangan lebih kecil */
transform: translateY(1px); /* Tombol turun seperti ditekan */
}
.post-accordion-btn.active:hover {
background: linear-gradient(to bottom, #ff4d4d, #e60000); /* Merah lebih terang saat hover */
box-shadow: inset 0 -2px 2px rgba(255, 255, 255, 0.4),
inset 0 2px 2px rgba(0, 0, 0, 0.5),
0 4px 6px rgba(0, 0, 0, 0.3);
transform: translateY(0); /* Kembali ke posisi normal */
}
.post-accordion-content {
padding: 5px;
background-color: #f9f9f9; /* Latar belakang konten */
max-height: 0; /* Sembunyikan konten secara default */
overflow: hidden;
line-height: 1.5em;
transition: max-height 0.3s ease-out; /* Animasi saat membuka/menutup */
border-radius: 0 0 8px 8px; /* Sudut membulat di bawah */
}
.post-accordion-content p {
margin: 5px; /* Jarak teks di dalam konten */
}
2. Penempatan CSS di dalam Tema Blogger
JavaScript sebaiknya ditempatkan sebelum tag </body> agar halaman dimuat terlebih dahulu sebelum JS dijalankan, sehingga meningkatkan performa.
- Di Edit HTML, cari tag </body> (biasanya di bagian bawah tema).
- Tempelkan kode JS dalam tag <script> tepat sebelum </body>.
- Klik Save.
<script>
/* JavaScript untuk mengatur fungsi accordion */
document.querySelectorAll('.post-accordion-container').forEach(function(container) {
const btn = container.querySelector('.post-accordion-btn'); // Tombol
const wrapper = container.querySelector('.post-accordion-btn-wrapper'); // Wrapper bingkai
const panel = container.querySelector('.post-accordion-content'); // Konten
const openText = btn.getAttribute('data-open-text') || 'Buka'; // Teks saat konten ditutup
const closeText = btn.getAttribute('data-close-text') || 'Tutup'; // Teks saat konten dibuka
btn.addEventListener('click', function() {
this.classList.toggle('active'); // Tambah/hapus kelas active pada tombol
wrapper.classList.toggle('active'); // Tambah/hapus kelas active pada wrapper
if (panel.style.maxHeight) {
panel.style.maxHeight = null; // Tutup konten
this.textContent = openText; // Ubah teks tombol
} else {
panel.style.maxHeight = panel.scrollHeight + 'px'; // Buka konten
this.textContent = closeText; // Ubah teks tombol
}
});
});
</script>
3. Peggunaan dalam postingan.
Untuk menggunakan di dalam postingan, ikuti pola seperti bagian berikut ini. Ini dikerjakan dalam di Editor Bogger dalam mode Tampilan HTML, bukan Tampilan menulis.
<!-- Container Pertama -->
<div class="post-accordion-container">
<button class="post-accordion-btn" data-open-text="Lihat pembahasan lagi" data-close-text="Tutup pembahasan">Lihat Pembahasan</button>
<div class="post-accordion-content">
<p>Ini adalah konten pertama yang akan ditampilkan atau disembunyikan. Ini adalah konten pertama yang akan ditampilkan atau disembunyikan.</p>
</div>
</div>
<!-- Container Kedua -->
<div class="post-accordion-container">
<button class="post-accordion-btn" data-open-text="Buka pembahasan lagi" data-close-text="Tutup pembahasan">Buka Pembahasan</button>
<div class="post-accordion-content">
<div>Ini adalah konten kedua yang akan ditampilkan atau disembunyikan. Ini adalah konten kedua yang akan ditampilkan atau disembunyikan. </div>
</div>
</div>Selamat mencoba bagi yang baru mulai menulis di Blogger.
Tidak ada komentar:
Posting Komentar