<!-- PPSC-Style Latest Updates Gadget for Blogger -->
<style>
/* Container */
#ppsc-latest-updates {
width: 100%;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
font-family: Arial, sans-serif;
overflow: hidden;
}
/* Widget Header */
#ppsc-latest-updates h2 {
background-color: #990000;
color: #fff;
margin: 0;
padding: 8px 15px;
font-size: 16px;
font-weight: bold;
}
/* Ticker List */
#ppsc-updates-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 300px;
overflow: hidden;
position: relative;
}
/* Individual Post */
#ppsc-updates-list li {
padding: 8px 15px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
}
#ppsc-updates-list li a {
text-decoration: none;
color: #333;
font-size: 14px;
}
#ppsc-updates-list li a:hover {
color: #990000;
}
/* Post Date */
.ppsc-post-date {
font-size: 12px;
color: #666;
margin-left: 10px;
}
/* New Badge */
.ppsc-new-badge {
background-color: #990000;
color: #fff;
font-size: 10px;
padding: 2px 5px;
border-radius: 3px;
margin-left: 8px;
}
/* Scroll Animation */
@keyframes scroll-up {
0% {transform: translateY(0);}
100% {transform: translateY(-100%);}
}
#ppsc-updates-list.scrolling {
animation: scroll-up linear infinite;
}
</style>
<div id="ppsc-latest-updates">
<h2>Latest Updates</h2>
<ul id="ppsc-updates-list">
<!-- Posts will appear here -->
</ul>
</div>
<script>
// Number of posts to show
var maxPosts = 10;
// Get JSON feed from Blogger
var feedUrl = '/feeds/posts/default?alt=json&orderby=published&max-results=' + maxPosts;
fetch(feedUrl)
.then(response => response.json())
.then(data => {
var posts = data.feed.entry || [];
var list = document.getElementById('ppsc-updates-list');
var today = new Date();
posts.forEach(post => {
var title = post.title.$t;
var link = post.link.find(l => l.rel === 'alternate').href;
var published = new Date(post.published.$t);
// Check if post is within 7 days for "New" badge
var isNew = (today - published)/(1000*60*60*24) <= 7;
var formattedDate = published.toLocaleDateString('en-GB', {
day: '2-digit', month: 'short', year: 'numeric'
});
var li = document.createElement('li');
li.innerHTML = `<a href="${link}" target="_blank">${title}</a>
<span class="ppsc-post-date">${formattedDate}</span>
${isNew ? '<span class="ppsc-new-badge">New</span>' : ''}`;
list.appendChild(li);
});
// Duplicate list for seamless scroll if posts > 3
if(posts.length > 3){
var clone = list.cloneNode(true);
list.appendChild(clone);
list.classList.add('scrolling');
list.style.animationDuration = (posts.length*3) + 's'; // Adjust speed
}
})
.catch(err => console.error('Error fetching posts:', err));
</script>