Web Page post show into Box
Web Page post show into Box with more Button
Use this code as a gadget
<div id="recent-posts-box">
<div class="rp-heading">
<h2>Latest Articles</h2>
<p>Explore our latest posts and updates</p>
</div>
<div id="rp-container">
<div class="rp-loading">Loading posts...</div>
</div>
<div class="rp-more-wrap">
<button id="rp-load-more" type="button">
Load More Posts
</button>
</div>
</div>
<style>
#recent-posts-box {
width:100%;
max-width:1200px;
margin:25px auto;
font-family:Arial,sans-serif;
box-sizing:border-box;
}
#recent-posts-box * {
box-sizing:border-box;
}
.rp-heading {
text-align:center;
margin-bottom:25px;
}
.rp-heading h2 {
font-size:27px;
color:#202124;
margin:0 0 8px;
}
.rp-heading p {
color:#777;
font-size:14px;
}
#rp-container {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
}
.rp-card {
display:flex;
flex-direction:column;
text-decoration:none!important;
color:inherit!important;
background:#fff;
border:1px solid #eaeaea;
border-radius:14px;
overflow:hidden;
box-shadow:0 4px 15px rgba(0,0,0,.06);
transition:.25s;
cursor:pointer;
}
.rp-card:hover {
transform:translateY(-5px);
box-shadow:0 9px 25px rgba(0,0,0,.12);
}
.rp-image {
width:100%;
height:205px;
object-fit:cover;
display:block;
background:#f0f0f0;
}
.rp-content {
padding:18px;
display:flex;
flex-direction:column;
flex:1;
}
.rp-date {
font-size:12px;
color:#888;
margin-bottom:10px;
}
.rp-title {
color:#222;
font-size:18px;
line-height:1.45;
font-weight:700;
margin:0 0 10px;
}
.rp-description {
color:#666;
font-size:14px;
line-height:1.65;
margin:0;
}
.rp-more-wrap {
text-align:center;
margin:35px 0;
}
#rp-load-more {
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:#fff;
border:0;
padding:14px 35px;
border-radius:50px;
font-size:15px;
font-weight:700;
cursor:pointer;
transition:.25s;
}
#rp-load-more:hover {
transform:translateY(-3px);
box-shadow:0 7px 18px rgba(37,99,235,.3);
}
#rp-load-more:disabled {
opacity:.6;
cursor:not-allowed;
}
.rp-loading,.rp-error {
text-align:center;
padding:30px;
color:#777;
grid-column:1/-1;
}
@media(max-width:900px) {
#rp-container {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:15px;
}
}
@media(max-width:600px) {
#rp-container {
grid-template-columns:1fr;
}
.rp-image {
height:220px;
}
.rp-heading h2 {
font-size:23px;
}
}
</style>
<script>
(function() {
var container = document.getElementById("rp-container");
var button = document.getElementById("rp-load-more");
var startIndex = 1;
var batchSize = 15;
var loading = false;
var finished = false;
function cleanText(html) {
var div = document.createElement("div");
div.innerHTML = html || "";
return (div.textContent || div.innerText || "")
.replace(/\s+/g," ").trim();
}
function escapeHTML(text) {
return String(text).replace(/[&<>"']/g,function(c) {
return {
"&":"&","<":"<",">":">",
'"':""","'":"'"
}[c];
});
}
function getImage(post) {
if(post.media$thumbnail) {
return post.media$thumbnail.url
.replace(/\/s72-c\//,"/s600/");
}
var content = post.content ? post.content.$t : "";
var match = content.match(/<img[^>]+src=["']([^"']+)["']/i);
return match ? match[1] : "";
}
function getURL(post) {
var links = post.link || [];
for(var i=0;i<links.length;i++) {
if(links[i].rel==="alternate") {
return links[i].href;
}
}
return "#";
}
function getDate(value) {
var date = new Date(value);
return isNaN(date.getTime()) ? "" :
date.toLocaleDateString("en-US",{
year:"numeric",
month:"short",
day:"numeric"
});
}
function createCard(post) {
var title = post.title ? post.title.$t : "Untitled";
var url = getURL(post);
var image = getImage(post);
var content = post.content
? post.content.$t
: (post.summary ? post.summary.$t : "");
var description = cleanText(content).substring(0,140);
if(description.length===140) {
description += "...";
}
var date = post.published
? getDate(post.published.$t)
: "";
var card = document.createElement("a");
card.className = "rp-card";
card.href = url;
var imageHTML = image
? '<img class="rp-image" src="' +
escapeHTML(image) + '" alt="' +
escapeHTML(title) + '" loading="lazy">'
: '<div class="rp-image"></div>';
card.innerHTML =
imageHTML +
'<div class="rp-content">' +
'<div class="rp-date">' + escapeHTML(date) + '</div>' +
'<h3 class="rp-title">' + escapeHTML(title) + '</h3>' +
'<p class="rp-description">' +
escapeHTML(description) +
'</p>' +
'</div>';
container.appendChild(card);
}
function loadPosts() {
if(loading || finished) return;
loading = true;
button.disabled = true;
button.textContent = "Loading...";
var feedURL = window.location.origin +
"/feeds/posts/default?alt=json&start-index=" +
startIndex + "&max-results=" + batchSize;
fetch(feedURL)
.then(function(response) {
if(!response.ok) throw new Error("Feed error");
return response.json();
})
.then(function(data) {
var posts = data.feed && data.feed.entry
? data.feed.entry : [];
posts.forEach(createCard);
startIndex += posts.length;
if(posts.length < batchSize) {
finished = true;
button.style.display = "none";
} else {
button.disabled = false;
button.textContent = "Load More Posts";
}
if(startIndex===1 && !posts.length) {
container.innerHTML =
'<div class="rp-error">No posts found.</div>';
button.style.display = "none";
}
})
.catch(function() {
button.disabled = false;
button.textContent = "Try Again";
})
.finally(function() {
loading = false;
});
}
button.addEventListener("click",loadPosts);
loadPosts();
})();
</script>
Comments
Post a Comment
Thanks for your Comments.