Popular Posts Gallery Style
ဒါကတော့ Popular Posts များကို Gallery Style နဲ့ပြုလုပ်ထားတဲ့ widget design လေးပါ။အရမ်းကိုလှပသေသပ်ပါတယ်။မူရင်း Template မှာပါတဲ့ Popular Posts Style ကအမြင်အားဖြင့်နဲနဲရိုးတယ်လို့ထင်ရပါတယ်။အသစ်အဆန်း Design အလန်းလေးတွေကိုကြိုက်နှစ်သက်တဲ့မိတ်ဆွေတွေအတွက် Design ပုံပြထားပါတယ်။ကြည့်ပြီးလို့ကြိုက်နှစ်သက်တယ်ဆိုရင်အောက်ကပေးထားတဲ့ style code တွေကိုယူ၍မိမိ Blog Site မှာအခုပဲထည့်သွင်းအသုံးပြုလိုက်ပါ။ပြုလုပ်ပုံပြုလုပ်နည်းကလဲမခက်ပါဘူးထုံးစံအတိုင်းပါပဲ HTML/JavaScript နဲ့ပြုလုပ်ရမှာပါ။
- မိမိ BlogSite ကို account အရင်ဝင်ပါ
- dashboard ထဲက Layout ကိုနှိပ်ပါ
- Add a Gadget ကိုနှိပ်ပါ
- HTML / JavaScript ကိုနှိပ်ပါ
- ပေါ်လာတဲ့ Box အကွက်ကြီးထဲကိုအောက်ကပေးထားတဲ့ style code တွေကိုထည့်ပေးပါ။
- save ကိုနှိပ်ပြီးပါပြီ။
<div id="popular-posts-widget-3" class="popular-posts-numbered-grid">
<div id="popular-posts-container-3"></div>
</div>
<style>
.popular-posts-numbered-grid{max-width:100%;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;padding:10px;}
.popular-posts-numbered-grid h3{font-size: 1.7rem;color:#222;margin-bottom:16px;border-bottom:2px solid #444;padding-bottom:6px;}
#popular-posts-container-3 {display:grid;grid-template-columns: repeat(2, 1fr);gap:10px;}
.post-item {position:relative;background:#fff;overflow:hidden;border-radius:8px;box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);cursor: pointer;transition: box-shadow 0.3s ease;}
.post-item:hover {box-shadow: 0 8px 18px rgb(0 0 0 / 0.2);}
.post-image {width:100%;height:150px;object-fit:cover;display: block;border-radius: 8px 8px 0 0;}
.post-number {position:absolute;top:2px;left:2px;background: rgba(255, 255, 255, 0.85);color:#333;font-weight: 700;font-size:1rem;width:28px;height:28px;border-radius:8px 0 8px 0;display:flex;justify-content:center;align-items: center;box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);z-index: 10;}
.post-title-bar {position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.55);color:white;padding:6px 10px;font-weight:600;font-size: 0.95rem;line-height:1.2em;max-height:2.4em;overflow:hidden;border-radius: 0 0 8px 8px;}
a.post-link {text-decoration:none;color: inherit;display: block;position: relative;}
</style>
<script>//<![CDATA[
(function() {
const blogUrl = window.location.origin;
const maxPosts = 6;
const feedUrl = `${blogUrl}/feeds/posts/default?alt=json&max-results=50&orderby=updated`;
function createPostItem(post, index) {
const a = document.createElement('a');
a.className = 'post-link';
a.href = post.url;
a.target = '_blank';
a.rel = 'noopener noreferrer';
a.innerHTML = `
<div class="post-item">
<div class="post-number">${index + 1}</div>
<img class="post-image" src="${post.thumb}" alt="${post.title}">
<div class="post-title-bar">${post.title}</div>
</div>
`;
return a;
}
function getThumbnail(entry) {
try {
return entry.media$thumbnail.url.replace(/\/s72\-c\//, "/s320/");
} catch {
return 'https://via.placeholder.com/320x150?text=No+Image';
}
}
function parsePosts(json) {
const entries = json.feed.entry || [];
const posts = entries.map(entry => {
const postUrl = entry.link.find(l => l.rel === 'alternate').href;
const postTitle = entry.title.$t;
const postThumb = getThumbnail(entry);
const commentCount = entry['thr$total'] ? parseInt(entry['thr$total'].$t) : 0;
return { url: postUrl, title: postTitle, thumb: postThumb, comments: commentCount };
});
posts.sort((a, b) => b.comments - a.comments);
return posts.slice(0, maxPosts);
}
fetch(feedUrl)
.then(res => res.json())
.then(data => {
const popularPosts = parsePosts(data);
const container = document.getElementById('popular-posts-container-3');
popularPosts.forEach((post, idx) => {
const postEl = createPostItem(post, idx);
container.appendChild(postEl);
});
})
.catch(err => console.error('Failed to load popular posts:', err));
})();
//]]></script>
