You may have visited a couple of websites and noticed that their posts move automatically in a vertical position and wondered how you can get this on your blogger website. Below is some types on how you can get this widget on your blogger website.
Step 1: Go to Blogger's layout section and click Add Gadgets
Step 2: You will have to choose HTML/JavaScript and copy the code provided below
Below this recent post slider shows posts based on particular label
<div id="recent-posts-slider">
<ul id="recent-posts-list"></ul>
</div>
<style>
#recent-posts-slider {
overflow: hidden;
width: auto; /* Ensure full width */
background: #f9f9f9;
border: 0px solid #ddd;
padding: 10px;
}
#recent-posts-list {
display: flex;
gap: 15px;
animation: slide-left linear infinite;
list-style: none;
padding: 0;
margin: 0;
}
#recent-posts-list li {
min-width: 220px;
max-width: 220px;
background: transparent;
border: 0px solid #ccc;
padding: 5px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
text-align: center;
}
#recent-posts-list img {
max-width: 100%;
height: auto;
margin-bottom: 8px;
}
#recent-posts-list a {
text-decoration: none;
color: #ff6a00;
font-weight: bold;
}
/* Media Queries for responsiveness */
@media (max-width: 768px) {
#recent-posts-list li {
min-width: 150px; /* Reduce the min-width on mobile */
max-width: 150px;
}
}
@media (max-width: 480px) {
#recent-posts-list li {
min-width: 120px; /* Further reduce for smaller screens */
max-width: 120px;
}
}
@keyframes slide-left {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
<script>
const feedUrl = "https://prsdube16.blogspot.com/feeds/posts/default/-/Upcoming?alt=json"; // Change 'Tech' to your label
const list = document.getElementById("recent-posts-list");
fetch(feedUrl)
.then(res => res.json())
.then(data => {
const posts = data.feed.entry || [];
posts.slice(0, 10).forEach(post => {
const title = post.title.$t;
const link = post.link.find(l => l.rel === "alternate").href;
let thumb = "https://via.placeholder.com/220x150?text=No+Image";
if (post.media$thumbnail) {
thumb = post.media$thumbnail.url;
} else if (post.content && post.content.$t.match(/<img[^>]+src="([^">]+)/)) {
thumb = post.content.$t.match(/<img[^>]+src="([^">]+)/)[1];
}
const li = document.createElement("li");
li.innerHTML = `
<a href="${link}" target="_blank">
<img src="${thumb}" alt="${title}" />
<div>${title}</div>
</a>
`;
list.appendChild(li);
});
const speed = 40;
list.style.animationDuration = `${speed}s`;
})
.catch(err => {
console.error("Failed to load recent posts:", err);
list.innerHTML = "<li>Failed to load posts.</li>";
});
</script>
This recent posts slider shows all posts by default
<div id="recent-posts-slider">
<ul id="recent-posts-list"></ul>
</div>
<style>
#recent-posts-slider {
overflow: hidden;
width: auto; /* Ensure full width */
background: #f9f9f9;
border: 0px solid #ddd;
padding: 10px;
}
#recent-posts-list {
display: flex;
gap: 15px;
animation: slide-left linear infinite;
list-style: none;
padding: 0;
margin: 0;
}
#recent-posts-list li {
min-width: 220px;
max-width: 220px;
background: transparent;
border: 0px solid #ccc;
padding: 5px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
text-align: center;
}
#recent-posts-list img {
max-width: 100%;
height: auto;
margin-bottom: 8px;
}
#recent-posts-list a {
text-decoration: none;
color: #ff6a00;
font-weight: bold;
}
/* Media Queries for responsiveness */
@media (max-width: 768px) {
#recent-posts-list li {
min-width: 150px; /* Reduce the min-width on mobile */
max-width: 150px;
}
}
@media (max-width: 480px) {
#recent-posts-list li {
min-width: 120px; /* Further reduce for smaller screens */
max-width: 120px;
}
}
@keyframes slide-left {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
<script>
const feedUrl = "https://prsdube16.blogspot.com/feeds/posts/default?alt=json";
const list = document.getElementById("recent-posts-list");
fetch(feedUrl)
.then(res => res.json())
.then(data => {
const posts = data.feed.entry || [];
posts.slice(0, 10).forEach(post => {
const title = post.title.$t;
const link = post.link.find(l => l.rel === "alternate").href;
let thumb = "https://via.placeholder.com/220x150?text=No+Image";
if (post.media$thumbnail) {
thumb = post.media$thumbnail.url;
} else if (post.content && post.content.$t.match(/<img[^>]+src="([^">]+)/)) {
thumb = post.content.$t.match(/<img[^>]+src="([^">]+)/)[1];
}
const li = document.createElement("li");
li.innerHTML = `
<a href="${link}" target="_blank">
<img src="${thumb}" alt="${title}" />
<div>${title}</div>
</a>
`;
list.appendChild(li);
});
const speed = 40;
list.style.animationDuration = `${speed}s`;
})
.catch(err => {
console.error("Failed to load recent posts:", err);
list.innerHTML = "<li>Failed to load posts.</li>";
});
</script>
Notes
• By const feedURL replace it with your URL and the Upcoming label replace it with any label on your website
• The const speed widget goes faster if decrease below 40
• By posts slice (0,10) this is where you decide how many posts you want to have displayed
