Blogger masih menjadi platform favorit karena ringan, gratis, dan mudah dikembangkan dengan berbagai script tambahan. Salah satu kebutuhan yang sering muncul adalah menampilkan daftar artikel berdasarkan label tertentu di halaman statis. Fitur ini biasanya dipakai untuk halaman kategori, landing page konten, atau halaman khusus yang lebih terstruktur.
Konsep artikel per label sebenarnya sederhana, namun penerapannya sering membingungkan bagi pemula. Banyak yang masih mengandalkan menu label bawaan Blogger, padahal tampilannya terbatas dan kurang fleksibel. Dengan script yang tepat, daftar artikel bisa tampil lebih rapi, modern, dan mendukung performa SEO.
Melalui pendekatan ini, kamu bisa mengatur tampilan artikel sesuai kebutuhan, mulai dari jumlah postingan, urutan, hingga gaya visualnya. Bahkan, halaman statis bisa berubah fungsi seperti halaman arsip profesional yang memudahkan pengunjung menemukan konten yang relevan tanpa harus berpindah halaman berkali-kali.
Script yang saya share ini bisa digunakan dengan sangat baik karen selain scriptnyag ringan, mudah dipahami, dan bisa diterapkan oleh siapa saja, baik blogger pemula maupun pengelola situs yang sudah terbiasa bermain dengan kode HTML dan JavaScript.
Apa Itu Post Per Label di Blogger
Post per label adalah metode menampilkan daftar artikel berdasarkan satu label tertentu yang sudah dibuat di Blogger. Label sendiri berfungsi sebagai pengelompokan konten, mirip kategori, agar artikel dengan topik serupa bisa dikumpulkan dalam satu kelompok yang mudah diakses.
Secara default, Blogger menyediakan halaman label otomatis. Namun tampilannya mengikuti template dan sulit dikustomisasi. Dengan menggunakan script yang saya share ini, kamu bisa menampilkan artikel dari label tertentu di halaman statis, widget sidebar, footer, bahkan di dalam postingan tanpa bergantung pada halaman label bawaan.
Pada praktiknya, teknik ini sebenarnya sering dipakai untuk halaman seperti "Tutorial Blogger", "Artikel Terpopuler", atau halaman niche tertentu. Di sinilah konsep memasang post per label menjadi sangat penting karena memberikan kontrol penuh terhadap pengalaman pengguna.
Manfaat dan Fungsi Post Per Label
Penggunaan post per label bukan sekadar soal tampilan. Dari sisi pengunjung, daftar artikel yang tersusun rapi memudahkan navigasi dan mengurangi waktu pencarian konten. Pembaca bisa langsung fokus pada topik yang mereka butuhkan tanpa terganggu artikel lain yang tidak relevan.
Dari sisi pengelola blog, fitur ini membantu membangun struktur internal link yang lebih kuat. Artikel dalam satu label saling terhubung secara natural, sehingga mesin pencari lebih mudah memahami topik utama blog dan hubungan antar kontennya.
Manfaat lainnya adalah fleksibilitas penempatan. Script post per label bisa digunakan di halaman statis sebagai landing page, di widget sebagai navigasi tambahan, atau bahkan sebagai daftar artikel terkait di dalam postingan. Semua itu bisa dilakukan tanpa mengubah struktur template utama.
Konsep Script yang Digunakan
Script yang digunakan memanfaatkan feed JSON Blogger. Feed ini berisi data artikel seperti judul, link, tanggal, label, dan thumbnail. Data tersebut diambil secara dinamis lalu ditampilkan sesuai label yang ditentukan, sehingga daftar artikel selalu terupdate otomatis.
Keunggulan utama pendekatan ini adalah efisiensi. Script hanya memanggil data yang dibutuhkan, sehingga tidak membebani server maupun browser pengguna. Selain itu, karena berbasis JavaScript murni, script bisa berjalan tanpa ketergantungan library tambahan, no jQuery!
Dalam penerapannya, kamu hanya perlu menentukan nama label, jumlah artikel yang ingin ditampilkan, serta elemen HTML sebagai wadah. Dari sini, script akan bekerja menampilkan daftar artikel secara otomatis dan konsisten.
Kode Script Post Per Label
Berikut script post perlabel yang bisa dipasang di halaman statis Blogger atau widget HTML. Script ini sudah mendukung lazyload gambar, tampilan responsif, dan tombol load more untuk membuka artikel lainnya.
Kode CSS Post Per Label
.artikel-perlabel {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.artikel-perlabel .artikel-item {
flex: 0 0 calc(50% - 10px);
box-sizing: border-box;
text-decoration: none;
color: #000;
opacity: 0;
transform: translateY(20px);
transition: .5s ease;
}
.artikel-perlabel .artikel-item.show {
opacity: 1;
transform: none;
}
.artikel-perlabel .artikel-item img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 6px;
background: #eee;
}
.artikel-perlabel .artikel-item h3 {
font-size: 17px;
margin: 6px 0 0;
}
.artikel-perlabel .artikel-meta {
font-size: 12px;
color: #777;
margin-top: 4px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.artikel-perlabel .artikel-meta .cat {
text-transform: capitalize;
}
.artikel-perlabel .artikel-meta span {
display: flex;
align-items: center;
gap: 5px;
position: relative;
padding-left: 16px;
}
.artikel-perlabel .artikel-meta span::before {
content: "";
position: absolute;
left: 0;
width: 12px;
height: 12px;
background-size: contain;
background-repeat: no-repeat;
}
.artikel-perlabel .artikel-meta .cat::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23777'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7h5l2 3h11v9H3z'/%3E%3C/svg%3E");
}
.artikel-perlabel .artikel-meta .date::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23777'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E");
}
.artikel-perlabel .skeleton {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 6px;
background: linear-gradient(90deg, #eee, #f5f5f5, #eee);
background-size: 200% 100%;
animation: skeleton 1.2s infinite;
}
@keyframes skeleton {
to {
background-position: -200% 0;
}
}
.artikel-perlabel-button {
text-align: center;
margin-top: 15px;
}
.artikel-perlabel-button button {
font-size: 16px;
padding: 5px 20px;
border: 2px solid #0000ff;
border-radius: 20px;
background: #fff;
color: #444;
cursor: pointer;
}
.artikel-perlabel-button button:hover {
background: #0000ff;
color: #fff;
transition: .5s ease;
}
.artikel-perlabel-button button[disabled] {
background: #999;
cursor: not-allowed;
}
@media (max-width: 600px) {
.artikel-perlabel .artikel-item {
flex: 0 0 100%;
}
}
Kode HTML Post Per Label
<div class="artikel-perlabel" id="artikelPerLabel"></div>
<div class="artikel-perlabel-button">
<button id="artikelPerLabelBtn">Artikel Lainnya</button>
</div>
Kode Script Post Per Label
<script>
//<![CDATA[
var rplLabel = "bisnis",
rplLimit = 8;
(function () {
var startIndex = 1,
container = document.getElementById("artikelPerLabel"),
button = document.getElementById("artikelPerLabelBtn");
if (!container || !button) return;
function loadFeed(index) {
var script = document.createElement("script");
script.src =
"/feeds/posts/default/-/" +
rplLabel +
"?alt=json-in-script&callback=renderPosts" +
"&max-results=" +
rplLimit +
"&start-index=" +
index;
document.body.appendChild(script);
}
window.renderPosts = function (data) {
var entries = data.feed.entry;
if (!entries) {
container.innerHTML = "Tidak ada artikel";
return;
}
entries.forEach(function (post) {
var link = post.link.find(function (l) {
return l.rel === "alternate";
}).href,
title = post.title.$t,
thumb = post.media$thumbnail
? post.media$thumbnail.url.replace(/\/s\d+-c\//, "/s0/")
: "",
category = post.category
? post.category[0].term
: "Tanpa Kategori",
date = new Date(post.published.$t).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "short",
year: "numeric"
}
);
container.insertAdjacentHTML(
"beforeend",
"<div class='artikel-item show'>" +
"<a href='" + link + "'>" +
"<img src='" + thumb + "' alt='" + title + "'>" +
"</a>" +
"<h3><a href='" + link + "'>" + title + "</a></h3>" +
"<div class='artikel-meta'>" +
"<span class='cat'>" + category + "</span>" +
"<span class='date'>" + date + "</span>" +
"</div>" +
"</div>"
);
});
startIndex += rplLimit;
};
button.onclick = function () {
loadFeed(startIndex);
};
loadFeed(startIndex);
})();
//]]>
</script>
Cara Menggunakan Kode Script Post Per Label
Penggunaan kode script ini cukup fleksibel dan bisa disesuaikan dengan kebutuhan. Jika kamu menggunakannya di halaman statis Blogger, semua kode mulai dari HTML, CSS, hingga JavaScript bisa langsung dimasukkan dalam satu halaman. Kamu hanya perlu mengganti nama label pada bagian script sesuai label yang ingin ditampilkan, tanpa pengaturan tambahan yang rumit.
Pada halaman statis, cara ini paling praktis karena tidak mengganggu struktur template utama. Script akan berjalan secara mandiri dan hanya aktif di halaman tersebut. Selama nama label sesuai dengan yang ada di dashboard Blogger, daftar artikel akan otomatis tampil dan selalu terbarui mengikuti postingan terbaru.
Jika kode script digunakan di luar halaman statis, seperti di widget, sidebar, atau bagian tertentu dari template, maka penempatannya perlu dipisah. Kode CSS sebaiknya dimasukkan ke dalam bagian CSS template agar styling tetap konsisten di seluruh halaman dan tidak bentrok dengan elemen lain.
Untuk bagian JavaScript, script ditempatkan sebelum kode penutup </body> agar halaman tetap dimuat dengan optimal. Sementara itu, kode HTML cukup diletakkan di area tempat kamu ingin menampilkan daftar artikel, misalnya di widget HTML atau di dalam struktur template tertentu.
Keteranganvar rplLabel = "bisnis", : Ganti variabel ini dengan label yang kamu gunakan.
rplLimit = 8; : Jumlah tampilan artikel, ganti angka 8 sesuai yang kamu butuhkan.
Pola pemisahan ini membuat script lebih rapi, mudah dirawat, dan aman digunakan jangka panjang. Selain itu, cara ini juga membantu menjaga performa blog tetap stabil karena setiap komponen berada di tempat yang semestinya.
Demo Script Post Per Label
Untuk melihat hasil tampilannya seperti apa, kamu bisa melihat halaman blog yang ada di blog DigitalPoin.com ini yang sudah dipasang di bagian menu blog. Bukan menu-menu yang ada di blog ini untuk melihat tampilan dari script post per label.
Semua kode yang digunakan sama dengan kode script yang aya share di artikel ini, hanya saja saya mengubah nama classnya saja agar tidak terjadi bentrok dengan class yang sama.
SEO Friendly dan Ramah Mesin Pencari
Script ini tergolong SEO friendly karena struktur HTML tetap terbaca dengan baik oleh mesin pencari. Judul artikel menggunakan elemen anchor biasa, sehingga link bisa diindeks tanpa hambatan. Selain itu, penggunaan lazyload membantu mempercepat waktu muat halaman.
Kecepatan halaman menjadi faktor penting dalam SEO modern saat ini, apalagi Google sering melakukan update algoritma. Dengan memuat gambar hanya saat dibutuhkan, halaman statis tetap ringan meskipun menampilkan banyak artikel. Hal ini berdampak positif pada pengalaman pengguna dan penilaian performa oleh mesin pencari.
Internal link yang terbentuk dari daftar artikel per label juga membantu crawler memahami konteks topik. Inilah alasan kenapa teknik memasang post per label sering dipakai untuk memperkuat struktur SEO on-page tanpa harus menambah plugin atau tools eksternal.
Fitur Lazyload dan Load More
Lazyload berfungsi menunda pemuatan gambar sampai elemen tersebut muncul di layar. Dengan atribut loading="lazy", browser secara otomatis mengatur kapan gambar perlu dimuat. Cara ini jauh lebih efisien dibanding memuat semua gambar sekaligus.
Tombol load more berperan menampilkan artikel tambahan tanpa reload halaman. Pengunjung bisa melihat konten lebih banyak secara bertahap, sementara halaman tetap terasa ringan. Pendekatan ini juga membuat tampilan lebih rapi dibanding daftar artikel yang terlalu panjang.
Kombinasi lazyload dan load more sangat cocok untuk halaman statis yang menampilkan banyak konten. Pengalaman pengguna tetap nyaman, dan performa blog tidak terganggu.
Bisa Digunakan di Mana Saja
Script post per label tidak terbatas hanya di halaman statis. Kamu bisa menempatkannya di widget HTML, sidebar, footer, bahkan di dalam artikel tertentu. Selama Blogger mengizinkan JavaScript, script ini bisa berjalan dengan normal.
Untuk widget, biasanya script disederhanakan agar menampilkan artikel lebih sedikit. Sementara di halaman statis, kamu bisa memaksimalkan tampilannya sebagai halaman arsip atau halaman kategori khusus yang terlihat profesional.
Fleksibilitas inilah yang membuat script ini banyak dipakai oleh blogger dan pelaku bisnis digital. Satu script bisa digunakan untuk berbagai kebutuhan tanpa harus menulis ulang kode dari awal.
Tampilan Responsif di Semua Perangkat
Tampilan responsif memastikan daftar artikel bisa menyesuaikan ukuran layar, baik di desktop, tablet, maupun smartphone. Dengan CSS sederhana berbasis flex atau grid, setiap item artikel akan menyesuaikan lebar layar secara otomatis.
Penggunaan gambar dengan ukuran proporsional juga membantu menjaga konsistensi tampilan. Judul artikel tetap terbaca jelas, dan jarak antar elemen tidak membuat halaman terlihat penuh atau berantakan.
Responsivitas menjadi faktor penting karena mayoritas pengunjung blog saat ini datang dari perangkat mobile. Script yang responsif membantu menjaga kenyamanan membaca dan menurunkan tingkat bounce rate.
Penerapan script post per label yang tepat membuat halaman statis Blogger terlihat lebih hidup dan fungsional. Dengan struktur yang rapi, fitur lengkap, serta performa yang ringan, halaman ini bisa menjadi pusat navigasi konten yang efektif.
Jika dikelola dengan baik, teknik memasang post per label bukan hanya mempercantik tampilan blog, tetapi juga memperkuat SEO, meningkatkan waktu kunjungan, dan membantu pengunjung menemukan konten terbaik dengan lebih cepat.
0 Comments