Grid and List Style Widgets On Blogger
ဒါကတော့ Recent/Random/Popular Post Grid And List Style Widget လေးပါ။အရမ်းကိုသေသပ်လှပလွန်းပါတယ်။မိတ်ဆွေတို့လဲကြိုက်နှစ်သက်လိမ့်မယ်လို့မျှော်လင့်မိပါတယ်။ပြုလုပ်ပုံပြုလုပ်နည်းကလဲထုံးစံအတိုင်း HTML/JavaScript နဲ့ပဲပြုလုပ်ရမှာပါ။
- မိမိ Blog site ကို account အရင်ဝင်ပါ
- dashboard ထဲက Layout ကိုနှိပ်ပါ
- Add a Gadget ကိုနှိပ်ပါ
- HTML/JavaScript ကိုနှိပ်
- အောက်က Design များထဲကမှကြိုက်နှစ်သက်တဲ့ design ရဲ့ Code ကို copy ယူ၍ထည့်ပါ။
- save ကိုနှိပ်ပြီးပြီ။
- Recent Posts Grid and List
Recent Posts Design
<style>
.recent-post-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
#toggleView{padding:6px 14px;border:none;background:#333;color:#fff;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;}
#toggleView svg{width:18px;height:18px;}
.posts.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:12px;}
.post-item{background:#fafafa;border:1px solid #eee;padding:12px;border-radius:6px;display:flex;flex-direction:column;}
.post-thumb{width:100%;height:150px;border-radius:6px;background:#ddd;margin-bottom:10px;overflow:hidden;}
.post-thumb img{width:100%;height:100%;object-fit:cover;}
.posts.list .post-item{flex-direction:row;}
.posts.list .post-thumb{width:180px;height:120px;margin-right:12px;}
</style>
<div class="recent-post-header">
<h3>Recent Posts</h3>
<button id="toggleView">
<svg id="iconGrid" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
<span>Grid</span>
</button>
</div>
<div id="recentPosts" class="posts grid"></div>
<script>//<![CDATA[
fetch("/feeds/posts/default?alt=json&max-results=10")
.then(res => res.json())
.then(data => {
let html = "";
data.feed.entry.forEach(p => {
let img = p.media$thumbnail ? p.media$thumbnail.url.replace("s72-c", "s400") : "";
let link = p.link.find(l => l.rel === "alternate").href;
html += `<div class="post-item">
<div class="post-thumb"><img src="${img}"></div>
<div class="post-title"><a href="${link}">${p.title.$t}</a></div>
</div>`;
});
document.getElementById("recentPosts").innerHTML = html;
});
const box = document.getElementById("recentPosts");
const btn = document.getElementById("toggleView");
btn.onclick = () => {
const span = btn.querySelector("span");
const svg = btn.querySelector("svg");
if (box.classList.contains("list")) {
box.classList.remove("list");
box.classList.add("grid");
span.textContent = "Grid";
svg.innerHTML = `<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>`;
} else {
box.classList.remove("grid");
box.classList.add("list");
span.textContent = "List";
svg.innerHTML = `<rect x="3" y="4" width="18" height="2"/><rect x="3" y="11" width="18" height="2"/><rect x="3" y="18" width="18" height="2"/>`;
}
};
//]]></script>
- Random Posts Grid and List
Random Posts Design
<style>
.random-post-header{display:flex;justify-content:space-between;align-items:center;margin:25px 0 10px;}
#randomToggleView{padding:6px 14px;border:none;background:#333;color:#fff;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;}
#randomToggleView svg{width:18px;height:18px;}
.random-posts.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:12px;}
.random-post-item{background:#fafafa;border:1px solid #eee;padding:12px;border-radius:6px;display:flex;flex-direction:column;}
.random-post-thumb{width:100%;height:150px;border-radius:6px;overflow:hidden;background:#ddd;margin-bottom:10px;}
.random-post-thumb img{width:100%;height:100%;object-fit:cover;}
.random-posts.list .random-post-item{flex-direction:row;}
.random-posts.list .random-post-thumb{width:180px;height:120px;margin-right:12px;}
</style>
<div class="random-post-header">
<h3>Random Posts</h3>
<button id="randomToggleView">
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
<span>Grid</span>
</button>
</div>
<div id="randomPosts" class="random-posts grid"></div>
<script>//<![CDATA[
fetch("/feeds/posts/default?alt=json&max-results=150")
.then(res => res.json())
.then(data => {
const posts = data.feed.entry;
let items = [];
posts.forEach(p => {
let title = p.title.$t;
let img = p.media$thumbnail ? p.media$thumbnail.url.replace("s72-c", "s400") : "";
let link = p.link.find(l => l.rel === "alternate").href;
items.push({ title, img, link });
});
items = items.sort(() => Math.random() - 0.5).slice(0, 10);
let html = "";
items.forEach(p => {
html += `<div class="random-post-item">
<div class="random-post-thumb">
<img src="${p.img}">
</div>
<div class="random-post-title">
<a href="${p.link}">${p.title}</a>
</div>
</div>`;
}); document.getElementById("randomPosts").innerHTML = html;
});
const rBox = document.getElementById("randomPosts");
const rBtn = document.getElementById("randomToggleView");
rBtn.onclick = () => {
const span = rBtn.querySelector("span");
const svg = rBtn.querySelector("svg");
if (rBox.classList.contains("grid")) {
rBox.classList.remove("grid");
rBox.classList.add("list");
span.textContent = "List";
svg.innerHTML = `<rect x="3" y="4" width="18" height="2"/><rect x="3" y="11" width="18" height="2"/><rect x="3" y="18" width="18" height="2"/>`;
} else {
rBox.classList.remove("list");
rBox.classList.add("grid");
span.textContent = "Grid";
svg.innerHTML = `<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>`;
}
};
//]]></script>
- Popular Posts Grid and List
Popular Posts Design
<style>
.popular-post-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
#popularToggle{padding:6px 14px;border:none;cursor:pointer;background:#333;color:#fff;border-radius:6px;display:flex;align-items:center;gap:6px;}
#popularToggle svg{width:18px;height:18px;}
.popular-posts.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:12px;}
.popular-post-item{background: #fafafa;border:1px solid #eee;padding:12px;border-radius:6px;display:flex;flex-direction:column;}
.popular-post-thumb{width:100%;height:150px;background:#ddd;border-radius:6px;margin-bottom:10px;overflow:hidden;}
.popular-post-thumb img{width:100%;height:100%;object-fit:cover;}
.popular-posts.list .popular-post-item{flex-direction:row;}
.popular-posts.list .popular-post-thumb {width:180px;height:120px;margin-right:12px;}
</style>
<div class="popular-post-header">
<h3>Popular Posts</h3>
<button id="popularToggle">
<svg id="popularIcon" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
<span id="popularText">Grid</span>
</button>
</div>
<div id="popularPosts" class="popular-posts grid"></div>
<script>//<![CDATA[
fetch("/feeds/posts/default?alt=json&max-results=20")
.then(res => res.json())
.then(data => {
const posts = data.feed.entry;
let html = "";
posts.sort((a, b) => {
const viewsA = a["thr$total"] ? parseInt(a["thr$total"].$t) : 0;
const viewsB = b["thr$total"] ? parseInt(b["thr$total"].$t) : 0;
return viewsB - viewsA;
});
const topPosts = posts.slice(0, 10);
topPosts.forEach(p => {
let img = p.media$thumbnail ? p.media$thumbnail.url.replace("s72-c", "s400") : "";
let link = p.link.find(l => l.rel === "alternate").href;
html += `<div class="popular-post-item">
<div class="popular-post-thumb"><img src="${img}"></div>
<div class="popular-post-title"><a href="${link}">${p.title.$t}</a></div>
</div>`;
});
document.getElementById("popularPosts").innerHTML = html;
});
const box = document.getElementById("popularPosts");
const btn = document.getElementById("popularToggle");
const icon = document.getElementById("popularIcon");
const text = document.getElementById("popularText");
btn.onclick = () => {
if (box.classList.contains("list")) {
box.classList.remove("list");
box.classList.add("grid");
text.textContent = "Grid";
icon.innerHTML = `<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>`;
} else {
box.classList.remove("grid");
box.classList.add("list");
text.textContent = "List";
icon.innerHTML = `<rect x="3" y="4" width="18" height="2"/><rect x="3" y="11" width="18" height="2"/><rect x="3" y="18" width="18" height="2"/>`;
}
};
//]]></script>
