Skip to main content

9+ Different Stylish Popular Posts Widgets For Blogger Blog

Auto Updated Popular Posts Widgets help Blogger blogs show popular content automatically without manual updates. These widgets improve user experience by displaying trending posts in a clean and stylish layout. They also help increase page views, reduce bounce rate, and keep visitors engaged. That’s why auto updated popular posts widgets are useful for every Blogger blog.

Please choose any one below popular Posts Widgets..............


Stylish Auto Updated Popular Posts Widgets HTML Javascript Code (1)

<div id="autoPopularPosts"></div>
<style>
.auto-popular {
  background:#ffffff;
  border-radius:16px;
  padding:15px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  font-family:Segoe UI,sans-serif;
}
.auto-popular h3{
  margin:0 0 12px;
  font-size:18px;
}
.auto-item{
  display:flex;
  align-items:center;
  margin-bottom:12px;
}
.auto-item img{
  width:60px;
  height:60px;
  border-radius:10px;
  object-fit:cover;
  margin-right:10px;
}
.auto-item a{
  text-decoration:none;
  color:#222;
  font-size:14px;
  font-weight:600;
}
.auto-item span{
  background:#ff5722;
  color:#fff;
  font-size:12px;
  padding:2px 7px;
  border-radius:6px;
  margin-right:6px;
}
</style>
<script>
var postsNum = 5;
var blogURL = "https://yourblogurl.blogspot.com/";
document.write('<script src="'+blogURL+'/feeds/posts/default?alt=json-in-script&max-results='+postsNum+'&callback=showAutoPosts"><\/script>');
function showAutoPosts(json){
  var html = '<div class="auto-popular"><h3>🔥 Popular Posts</h3>';
  for(var i=0;i<json.feed.entry.length;i++){
    var post = json.feed.entry[i];
    var title = post.title.$t;
    var link = post.link.find(l=>l.rel=="alternate").href;
    var thumb = post.media$thumbnail ? post.media$thumbnail.url.replace(/s72-c/,"s160") : "https://via.placeholder.com/160";
    html += '<div class="auto-item"><span>'+(i+1)+'</span><img src="'+thumb+'"><a href="'+link+'">'+title+'</a></div>';
  }
  html += '</div>';
  document.getElementById("autoPopularPosts").innerHTML = html;
}
</script>

Classic Style Popular Posts Widgets HTML Javascript Code (2)


<div id="pp1"></div>
<script>
var n=5,b="https://yourblogurl.blogspot.com/";
document.write('<script src="'+b+'/feeds/posts/default?alt=json-in-script&max-results='+n+'&callback=p1"><\/script>');
function p1(d){
let h='<h3>🔥 Popular Posts</h3><ul>';
for(let i=0;i<d.feed.entry.length;i++){
let e=d.feed.entry[i];
h+='<li><a href="'+e.link[4].href+'">'+e.title.$t+'</a></li>';
}
document.getElementById("pp1").innerHTML=h+'</ul>';
}
</script>

Numbered Style Popular Posts Widgets HTML Javascript Code (3)


<div id="pp2"></div>
<script>
var b="https://yourblogurl.blogspot.com/";
document.write('<script src="'+b+'/feeds/posts/default?alt=json-in-script&max-results=5&callback=p2"><\/script>');
function p2(d){
let h='<ol>';
d.feed.entry.forEach(e=>{
h+='<li><a href="'+e.link[4].href+'">'+e.title.$t+'</a></li>';
});
document.getElementById("pp2").innerHTML=h+'</ol>';
}
</script>


Thumbnail Card Style Popular Posts Widgets HTML Javascript Code (4)


<div id="pp3"></div>
<script>
var b="https://yourblogurl.blogspot.com/";
document.write('<script src="'+b+'/feeds/posts/default?alt=json-in-script&max-results=5&callback=p3"><\/script>');
function p3(d){
let h='';
d.feed.entry.forEach(e=>{
let t=e.media$thumbnail?e.media$thumbnail.url:'https://via.placeholder.com/80';
h+='<div style="display:flex;margin:8px 0"><img src="'+t+'" width="60"><a href="'+e.link[4].href+'">'+e.title.$t+'</a></div>';
});
pp3.innerHTML=h;
}
</script>


Gradient Box Style Popular Posts Widgets HTML Javascript Code (5)


<div id="pp4" style="background:linear-gradient(135deg,#667eea,#764ba2);padding:15px;color:#fff"></div>
<script>
var b="https://yourblogurl.blogspot.com/";
document.write('<script src="'+b+'/feeds/posts/default?alt=json-in-script&max-results=4&callback=p4"><\/script>');
function p4(d){
let h='<h3>🔥 Trending</h3>';
d.feed.entry.forEach(e=>{
h+='<p><a style="color:#fff" href="'+e.link[4].href+'">'+e.title.$t+'</a></p>';
});
pp4.innerHTML=h;
}
</script>


Compact Sidebar Style Popular Posts Widgets HTML Javascript Code (6)



<div id="pp5"></div>
<script>
var b="https://yourblogurl.blogspot.com/";
document.write('<script src="'+b+'/feeds/posts/default?alt=json-in-script&max-results=6&callback=p5"><\/script>');
function p5(d){
let h='';
d.feed.entry.forEach(e=>{
h+='<small>👉 <a href="'+e.link[4].href+'">'+e.title.$t+'</a></small><br>';
});
pp5.innerHTML=h;
}
</script>

Highlight First Post Style Popular Posts Widgets HTML Javascript Code (7)


<div id="pp6"></div>
<script>
var b="https://yourblogurl.blogspot.com/";
document.write('<script src="'+b+'/feeds/posts/default?alt=json-in-script&max-results=5&callback=p6"><\/script>');
function p6(d){
let h='<strong><a href="'+d.feed.entry[0].link[4].href+'">'+d.feed.entry[0].title.$t+'</a></strong><hr>';
for(let i=1;i<d.feed.entry.length;i++){
h+='<p><a href="'+d.feed.entry[i].link[4].href+'">'+d.feed.entry[i].title.$t+'</a></p>';
}
pp6.innerHTML=h;
}
</script>

Minimal Border Style Popular Posts Widgets HTML Javascript Code (8)



<div id="pp7" style="border-left:4px solid #ff5722;padding:10px"></div>
<script>
var b="https://yourblogurl.blogspot.com/";
document.write('<script src="'+b+'/feeds/posts/default?alt=json-in-script&max-results=5&callback=p7"><\/script>');
function p7(d){
let h='';
d.feed.entry.forEach(e=>{
h+='<p><a href="'+e.link[4].href+'">'+e.title.$t+'</a></p>';
});
pp7.innerHTML=h;
}
</script>

Icon Based Style Popular Posts Widgets HTML Javascript Code (9)


<div id="pp8"></div>
<script>
var b="https://yourblogurl.blogspot.com/";
document.write('<script src="'+b+'/feeds/posts/default?alt=json-in-script&max-results=5&callback=p8"><\/script>');
function p8(d){
let h='';
d.feed.entry.forEach(e=>{
h+='⭐ <a href="'+e.link[4].href+'">'+e.title.$t+'</a><br>';
});
pp8.innerHTML=h;
}
</script>


Glass Effect Style Popular Posts Widgets HTML Javascript Code (10)


<div id="pp9" style="backdrop-filter:blur(8px);background:#ffffffcc;padding:15px"></div>
<script>
var b="https://yourblogurl.blogspot.com/";
document.write('<script src="'+b+'/feeds/posts/default?alt=json-in-script&max-results=4&callback=p9"><\/script>');
function p9(d){
let h='';
d.feed.entry.forEach(e=>{
h+='<a href="'+e.link[4].href+'">'+e.title.$t+'</a><br>';
});
pp9.innerHTML=h;
}
</script>



Note: Replace your blog URL with https://yourblogurl.blogspot.com/.


How To Add Stylish Popular Posts Widgets For Blogger Blog 


How To Add HTML JavaScript Code Widgets For Blogger Blog

Steps to add the code:

  1. Go to Blogger Dashboard → Layout
  2. Click Add a Gadget
  3. Select HTML/JavaScript
  4. Paste your HTML and JavaScript code
  5. Click Save.
Labels:

Comments

Post a Comment