Read More Expandable Untuk Artikel Blogger
Read more expandable adalah fitur untuk menyembunyikan sebagian artikel di Blogger agar lebih ringkas, rapi dan mudah dinavigasi pengunjung
Daftar isi
Read more expandable adalah fitur yang bisa dipakai di artikel Blogger untuk menyembunyikan sebagian konten agar tampilannya lebih rapi dan nyaman dibaca.
Fungsi read more expandable itu sebenarnya sederhana, tapi dampaknya besar. Bisa bikin artikel panjang terlihat lebih pendek dan gak bikin pembaca bosen duluan sebelum membaca karena banyak artikel yang harus dibaca.
Kalau kamu biasa nulis panjang di Blogger, fitur read more expandable sangat berguna untuk mengatur struktur artikel tanpa bikin halaman terlihat padat atau menumpuk.
Dengan tampilan yang lebih tertata, pembaca juga bisa lebih fokus ke bagian awal artikel, lalu memutuskan apakah mereka mau lanjut baca bagian selanjutnya atau tidak.
Apa Itu Read More Expandable?
Read more expandable adalah fitur interaktif yang memungkinkan sebagian artikel disembunyikan dan ditampilkan kembali saat tombol tertentu diklik oleh pembaca.
Biasanya, tombol itu berbentuk tulisan "Read More +" yang bisa berubah jadi "Read Less -" saat bagian tersembunyi muncul. Gaya ini lebih modern dari jump break yang duluuuuuuu pernah digunakan.
Blogger sebenarnya punya fitur pemotong artikel bawaan, tapi tampilannya terlalu kaku dan kadang kurang fleksibel buat desain yang kekinian. Dengan read more expandable, kita bisa menyelipkan konten panjang di mana saja di dalam artikel tanpa harus memotong artikel jadi dua halaman berbeda.
Manfaat Menggunakan Read More Expandable
Salah satu manfaat utamanya adalah menjaga tampilan blog tetap ringkas, terutama kalau artikel yang dibuat mengandung penjelasan panjang atau detail teknis.
Pembaca biasanya males kalau lihat artikel yang terlalu padat di awal, makanya kita perlu cara untuk menyusun paragraf panjang biar tetap nyaman dibaca.
Selain itu, read more expandable bisa membuat halaman jadi lebih ringan karena sebagian konten tidak langsung dimuat sepenuhnya saat pertama kali dibuka.
Penggunaan fitur ini juga memperpanjang waktu interaksi pembaca karena mereka akan mengklik dan membaca lebih banyak bagian konten secara aktif.
Kapan Sebaiknya Menggunakan Fitur Ini?
Fitur ini cocok banget dipakai buat artikel tutorial, artikel review panjang, panduan, atau bahkan artikel edukatif yang butuh penjelasan bertahap.
Kalau kamu sering menulis konten step-by-step atau konten dengan subpoin panjang, fitur expandable bisa digunakan. Namun, tidak semua bagian artikel harus ditampilkan langsung, dan fitur ini memberi kontrol yang pas kapan konten tertentu perlu ditampilkan atau disembunyikan.
Selian itu untuk pengguna mobileatau ponsel juga akan merasa terbantu karena mereka gak harus scroll panjang hanya untuk melewati bagian yang mungkin belum ingin dibaca.
Script Read More Expandable
Untuk memasang fitur layak tombol show hide ini, ikuti tahapan-tahapan berikut ini:
Kode CSS
Salin kode CSS berikut kedalam kode template blog kamu:
.expandable {
max-width: 100%;
margin: 30px auto;
}
.expandable__button {
text-align: center;
position: relative;
margin: 20px 0;
}
.expandable__button a {
display: inline-flex;
align-items: center;
text-decoration: none;
font-weight: bold;
color: #444444;
font-size: 16px;
background: none;
border: none;
padding: 0 10px;
cursor: pointer;
position: relative;
z-index: 1;
}
.expandable__button::before,
.expandable__button::after {
content: "";
display: inline-block;
height: 1px;
background-color: #ccc;
position: absolute;
top: 50%;
width: 45%;
}
.expandable__button::before {
left: 0;
}
.expandable__button::after {
right: 0;
}
.expandable__content {
display: none;
margin-top: 20px;
animation: fadein 0.3s ease-in-out;
}
.wrapper--xs {
max-width: 600px;
margin: 0 auto;
text-align: left;
}
.icon-expand, .icon-collapse {
width: 16px;
height: 16px;
margin-left: 8px;
vertical-align: middle;
fill: currentColor;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Kode HTML
Salin kode HTML berikut kedalam artikel blog kamu saat kamu membuat artikel, letakan pada bagian paragraf yang ingin disembunyikan.
<div class="expandable" data-module="LargeTileExpand">
<div class="expandable__button">
<a href="javascript:void(0);" onclick="toggleExpandable(this)">
<span class="label-text">Read More</span>
<span class="icon-expand">
<svg viewBox="0 0 16 16" class="svg-icon">
<path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</span>
</a>
</div>
<div class="expandable__content">
<div class="wrapper--xs">
<p>Isi artikel ada diparagraf ini. Kamu bisa menuliskan penjelasan, tips, atau informasi lainnya yang akan tampil saat tombol Read More diklik.</p>
<p>Isi artikel ada diparagraf ini. Kamu bisa menuliskan penjelasan, tips, atau informasi lainnya yang akan tampil saat tombol Read More diklik.</p>
</div>
</div>
</div>
Kode Script
Salin kode Script berikut kedalam kode template blog kamu sebelum </body> didalam tag item
function toggleExpandable(e){const o=e.closest(".expandable").querySelector(".expandable__content"),t=e.querySelector(".label-text"),s=e.querySelector(".icon-expand"),n="block"===o.style.display;o.style.display=n?"none":"block",t.textContent=n?"Read More":"Read Less",s.innerHTML=n?'<svg viewBox="0 0 16 16" class="svg-icon"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>':'<svg viewBox="0 0 16 16" class="svg-icon"><path d="M1 8h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>'}
Kode sudah saya simpan juga di Codepen https://codepen.io/digitalpoin/pen/XJbBENE
Cara Kerja Read More Expandable
Secara teknis, fitur ini menggunakan kombinasi HTML, CSS, dan JavaScript untuk menyembunyikan dan menampilkan bagian konten secara dinamis. Struktur dasarnya terdiri dari elemen pembungkus seperti div, lalu tombol read more yang akan memicu perubahan gaya display konten.
Setelah tombol diklik, konten yang semula disembunyikan dengan `display: none` akan muncul dengan gaya `display: block` atau `slide`, tergantung script-nya.
Ganti teks tombol dari "Read More" ke "Read Less" juga dilakukan melalui script kecil agar interaksi terasa lebih hidup dan jelas bagi pembaca.
Contoh Penerapan Read More Expandable
Klik tulisan Read More + dibawah ini dan lihat hasilnya.
Bagaimana? Keren kan?
Kamu bisa menyesuaikan desain tombol, warna ikon, ukuran teks, dan animasinya supaya menyatu dengan desain tema blog kamu. Yang penting, script-nya tetap ringan agar tidak mengganggu performa loading halaman blog, apalagi jika kamu memakai Blogger.
Blogger sendiri mengizinkan penambahan HTML dan JavaScript, jadi fitur seperti ini bisa dipasang tanpa perlu plugin tambahan seperti di WordPress. Kalau digunakan dengan benar, fitur expandable bisa meningkatkan kualitas pengalaman pengguna di blog secara keseluruhan. Coba saya dipasang di blog kamu.
Hal yang Perlu Diperhatikan
- Gunakan fitur ini hanya saat diperlukan, jangan terlalu sering agar tidak membingungkan pembaca.
- Pastikan tombol dan animasinya berfungsi baik di perangkat mobile dan desktop.
- Jangan terlalu banyak menggunakan fitur expandable ini didalam artikel karena bisa membuat tampilan jadi ga bagus.
Usahakan juga konten yang kamu sembunyikan tetap relevan dan menarik, jangan sampai malah menyembunyikan bagian penting yang seharusnya langsung terlihat.
Fitur seperti ini akan lebih optimal jika blog kamu sudah punya struktur yang bersih dan responsif, jadi semuanya bisa berjalan mulus.
Efek terhadap SEO dan Pembaca
Secara SEO, penggunaan read more expandable tidak merusak struktur konten karena semua konten tetap termuat dalam halaman HTML.
Mesin pencari seperti Google tetap bisa merayapi konten tersembunyi selama tidak menggunakan teknik lazy-load berbasis request tambahan.
Jadi kamu gak perlu khawatir soal pengaruh negatifnya, selama kontennya tetap jelas dan bermanfaat bagi pengunjung blog kamu.
Pembaca pun merasa lebih senang karena mereka punya kontrol atas apa yang ingin dibaca, tanpa harus merasa kewalahan melihat teks panjang.
Read more expandable adalah salah satu solusi praktis untuk membuat tampilan artikel Blogger lebih rapi dan nyaman dibaca, terutama untuk artikel panjang.
Dengan memanfaatkan fitur ini, kamu bisa menyusun konten lebih fleksibel tanpa mengorbankan kenyamanan pembaca ataupun struktur SEO blog kamu.
Selama digunakan dengan wajar dan ditempatkan di bagian yang tepat, fitur ini bisa jadi salah satu nilai tambah dari kualitas tampilan blog kamu.
Kamu bisa coba pasang read more expandable mulai dari satu artikel dulu, lalu lihat sendiri efek positifnya pada pengalaman pengunjung blog kamu.
