Cara Pasang Widget Featured Post Grid by Label di Blog
Saya pernah berada di posisi kamu punya banyak tulisan di blog, tapi bingung gimana cara menampilkannya dengan gaya yang bikin pembaca langsung ngeh kalau itu konten unggulan. Akhirnya, saya bikin solusi sendiri: featured post grid berdasarkan label di Blogger.
Cara ini bukan cuma mempercantik tampilan, tapi juga membantu pembaca menavigasi isi blog kita dengan lebih mudah. Kayak punya etalase toko yang isinya sudah kita pilih sendiri hanya yang terbaik yang tampil di depan.
Dan kabar baiknya? Saya sudah siapkan widget Blogger siap pakai yang bisa kamu langsung tempel di tata letak blog kamu. Beneran, tinggal copy-paste. Gak perlu jadi developer, cukup jadi blogger yang niat.
Manfaat Pakai Widget Featured Post Grid
Kenapa sih harus pakai? Saya kasih beberapa alasan pribadi, ya:
- Blog kamu jadi lebih hidup, enggak flat-flat amat
- Tulisan-tulisan terbaik kamu enggak tenggelam di arsip
- Pembaca bisa langsung klik ke konten yang relevan
- Grid-nya responsif dan tampilannya modern banget
- Kamu bisa atur berdasarkan label (misalnya: Tips, HTML, CSS, dsb.)
Dan yang bikin saya bangga, widget ini juga otomatis ambil data dari feed blog kamu, jadi enggak usah update manual tiap kali ada postingan baru. Canggih? Bisa dibilang begitu minimal untuk ukuran blogger rumahan seperti saya.
Cara Pasang Widget Featured Post Grid di Blog
Nah, ini bagian yang kamu tunggu-tunggu. Saya sudah buatkan widgetnya, dan kamu bisa langsung pakai. Cukup ikuti langkah-langkah ini:
1. Masuk ke Blogger kamu → Tata Letak
2. Klik “Tambahkan Gadget” → Pilih “HTML/JavaScript”
3. Tempelkan seluruh kode berikut ke dalam kotaknya:
<!-- Widget Label Feed Blogger - Multi Label -->
<style>
.hendra-widget-feed-wrapper {
background: #fff;
max-width: 1000px;
box-sizing: border-box;
margin: auto;
}
@media (max-width: 768px) {
.hendra-widget-feed-wrapper {
display: none;
}
}
.hendra-widget-feed {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 20px;
padding: 36px;
font-family: 'Roboto', sans-serif;
}
.hendra-widget-feed .hendra-featured-post {
grid-row: span 2;
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
text-align: left;
align-items: flex-start;
}
.hendra-widget-feed .hendra-featured-post img {
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 16/9;
}
.hendra-widget-feed .hendra-featured-content {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: left;
align-items: flex-start;
}
.hendra-widget-feed .hendra-label-tag {
display: inline-block;
background: #2675a6;
color: white;
font-size: 12px;
padding: 4px 10px;
border-radius: 8px;
margin-bottom: 12px;
max-width: fit-content;
text-align: left;
}
.hendra-widget-feed .hendra-title {
font-size: 20px;
font-weight: bold;
color: #0d1b2a;
margin-bottom: 10px;
text-decoration: none;
display: inline-block;
transition: color 0.3s ease;
text-align: left;
width: 100%;
}
.hendra-widget-feed .hendra-title:hover {
color: #2675a6;
}
.hendra-widget-feed .hendra-desc {
font-size: 14px;
color: #555;
margin-bottom: 10px;
line-height: 1.6;
text-align: left;
width: 100%;
}
.hendra-widget-feed .hendra-meta-likes {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
width: 100%;
text-align: left;
}
.hendra-widget-feed .hendra-meta {
font-size: 12px;
color: #888;
text-align: left;
}
.hendra-widget-feed .hendra-likes {
font-size: 13px;
color: #333;
display: flex;
align-items: center;
gap: 6px;
}
.hendra-widget-feed .hendra-likes i {
color: #e03131;
font-style: normal;
font-size: 16px;
cursor: pointer;
transition: transform 0.2s ease;
}
.hendra-widget-feed .hendra-likes i:hover {
transform: scale(1.2);
}
.hendra-widget-feed .hendra-likes i.hendra-liked {
color: red;
}
.hendra-widget-feed .hendra-post-item {
background: #000;
border-radius: 16px;
overflow: hidden;
position: relative;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
text-decoration: none;
display: block;
color: white;
text-align: left;
}
.hendra-widget-feed .hendra-post-item img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 16/9;
display: block;
filter: brightness(0.7);
pointer-events: none;
}
.hendra-widget-feed .hendra-post-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
text-align: left;
}
.hendra-widget-feed .hendra-post-caption .hendra-label-tag {
background: #2675a6;
font-size: 11px;
padding: 2px 10px;
border-radius: 6px;
margin-bottom: 6px;
display: inline-block;
color: #fff;
max-width: fit-content;
text-align: left;
}
.hendra-widget-feed .hendra-post-caption .hendra-title {
font-size: 14px;
font-weight: bold;
color: #fff;
margin-bottom: 4px;
text-decoration: none;
display: inline-block;
transition: color 0.3s ease;
text-align: left;
}
.hendra-widget-feed .hendra-post-caption .hendra-title:hover {
color: #2675a6;
}
.hendra-widget-feed .hendra-post-caption .hendra-meta {
font-size: 11px;
color: #ddd;
text-align: left;
}
</style>
<div class="hendra-widget-feed-wrapper">
<div class="hendra-widget-feed" id="labelVideoWidget">Memuat konten...</div>
</div>
<script>
const labels = ['Blogger', 'Sidebar', 'Footer', 'Html & Css']; // ganti sesuai label blog kamu
const maxResults = 5;
const domain = window.location.origin;
const container = document.getElementById('labelVideoWidget');
function loadPostsByLabel(label) {
return fetch(`${domain}/feeds/posts/default/-/${encodeURIComponent(label)}?alt=json&max-results=${maxResults}`)
.then(res => res.json())
.then(data => {
const entries = data.feed?.entry || [];
return entries.map(entry => {
const title = entry.title.$t;
const link = entry.link.find(l => l.rel === 'alternate')?.href || '#';
const content = entry.content?.$t || entry.summary?.$t || "";
const labelName = entry.category?.[0]?.term || '';
let img = '';
if (entry.media$thumbnail?.url) {
img = entry.media$thumbnail.url.replace(/s72(-c)?/, 's600');
} else {
const imgMatch = content.match(/<img[^>]+src=['"]([^'"]+)['"]/i);
img = imgMatch ? imgMatch[1] : 'https://via.placeholder.com/600x400?text=No+Image';
}
const author = entry.author?.[0]?.name?.$t || 'Unknown';
const dateRaw = entry.published?.$t || new Date().toISOString();
const dateObj = new Date(dateRaw);
const date = dateObj.toLocaleDateString('id-ID', {
day: '2-digit',
month: 'short',
year: 'numeric'
});
return {title, link, content, img, author, date, labelName};
});
})
.catch(err => {
console.error(`Error fetching feed for label "${label}":`, err);
return [];
});
}
Promise.all(labels.map(loadPostsByLabel))
.then(allPosts => {
const combinedPosts = allPosts.flat();
// Urutkan berdasarkan tanggal terbaru
combinedPosts.sort((a, b) => {
const dateA = new Date(a.date);
const dateB = new Date(b.date);
return dateB - dateA;
});
const featuredPosts = combinedPosts.slice(0, maxResults);
container.innerHTML = '';
if (featuredPosts.length > 0) {
const featured = featuredPosts[0];
container.innerHTML += `
<div class="hendra-featured-post">
<img src="${featured.img}" alt="${featured.title}" />
<div class="hendra-featured-content">
<div class="hendra-label-tag">${featured.labelName}</div>
<a href="${featured.link}" class="hendra-title" target="_blank">${featured.title}</a>
<div class="hendra-desc">${featured.content.replace(/<[^>]*>/g, '').substring(0, 120)}...</div>
<div class="hendra-meta-likes">
<div class="hendra-meta">By ${featured.author} - ${featured.date}</div>
</div>
</div>
</div>
`;
for (let i = 1; i < featuredPosts.length; i++) {
const p = featuredPosts[i];
container.innerHTML += `
<div class="hendra-post-item">
<img src="${p.img}" alt="${p.title}" />
<div class="hendra-post-caption">
<div class="hendra-label-tag">${p.labelName}</div>
<a href="${p.link}" class="hendra-title" target="_blank">${p.title}</a>
<div class="hendra-meta">By ${p.author} - ${p.date}</div>
</div>
</div>
`;
}
} else {
container.innerHTML = '<p>Tidak ada postingan.</p>';
}
})
.catch(err => {
container.innerHTML = '<p style="color:red">Gagal memuat feed.</p>';
console.error('Error fetching feed:', err);
});
</script>
4. Ganti bagian ini sesuai kebutuhan kamu:
const labels = ['Blogger', 'Sidebar', 'Footer', 'Html & Css'];
Misalnya kamu mau tampilkan post dari label Tips, Tutorial, dan CSS, tinggal ganti jadi:
const labels = ['Tips', 'Tutorial', 'CSS'];
5. Simpan dan lihat hasilnya langsung di blog kamu!
Oh ya, widget ini hanya tampil di layar desktop (karena memang disembunyikan di mobile, biar nggak berat). Tapi tenang aja, tampilannya rapi banget di layar besar.
Kesimpulan
Sekarang coba kamu lihat tampilan blog kamu apakah sudah menampilkan tulisan unggulan dengan cara yang menarik? Kalau belum, menurut saya ini saat yang tepat untuk memasang widget featured post grid ini.
Jangan biarkan tulisan keren kamu cuma jadi kenangan di halaman arsip. Bawa ke depan, beri spotlight, dan biarkan pembaca kamu menikmatinya langsung dari halaman utama.
Kalau kamu butuh bantuan lebih lanjut buat kustom warnanya, animasi hover, atau bahkan efek like interaktif, tinggal comentar saja.
Support hendraws.com
Posting Komentar untuk "Cara Pasang Widget Featured Post Grid by Label di Blog"