add

How to Add Featured Post Widget in Blogger - Sticky Top Post 2026

Homepage shows latest posts only. But you want 1 important post always on top - like AdSense Approval Post #133, CPC Post #135 = high earning posts. Featured post widget = sticky post on top of homepage.

In Post #139, add featured post box + slider.

Step 1: Simple Featured Post - One Big Post on Top

  1. Blogger → Theme → Edit HTML → Find <div class='main section'> or <b:section class='main'>
  2. Just inside it at top paste:
<b:if cond='data:view.isHomepage'>
<div style="margin-bottom:24px;">
<div style="background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;padding:20px;color:#fff;display:flex;gap:16px;align-items:center;">
<img src="YOUR-FEATURED-IMAGE-URL-600x400" style="width:140px;height:100px;object-fit:cover;border-radius:10px;flex-shrink:0;" alt="Featured"/>
<div>
<span style="background:rgba(255,255,255,0.2);padding:4px 10px;border-radius:20px;font-size:11px;">⭐ FEATURED</span>
<h2 style="margin:8px 0 6px;font-size:18px;line-height:1.3;"><a href="YOUR-FEATURED-POST-URL" style="color:#fff;text-decoration:none;">How to Get AdSense Approval in 2026 - 15 Point Checklist</a></h2>
<p style="margin:0;font-size:13px;opacity:0.9;">Follow this checklist before applying - 90% approval rate if done correctly.</p>
<a href="YOUR-FEATURED-POST-URL" style="display:inline-block;margin-top:10px;background:#fff;color:#764ba2;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:700;text-decoration:none;">Read Now →</a>
</div>
</div>
</div>
</b:if>

Replace YOUR-FEATURED-IMAGE-URL and YOUR-FEATURED-POST-URL with Post #133 URL and thumbnail.

Step 2: Auto Featured Posts Slider - 3 Posts Rotating

  1. Find same place, paste slider version:
<b:if cond='data:view.isHomepage'>
<style>
.featured-slider{position:relative;overflow:hidden;border-radius:16px;margin-bottom:24px;}
.featured-track{display:flex;transition:transform 0.5s;}
.featured-slide{min-width:100%;background:#000;position:relative;height:280px;}
.featured-slide img{width:100%;height:100%;object-fit:cover;opacity:0.7;}
.featured-info{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(transparent,rgba(0,0,0,0.8));color:#fff;}
.featured-info h2{font-size:20px;margin:6px 0;}
.featured-dots{text-align:center;position:absolute;bottom:10px;left:0;right:0;}
.dot{display:inline-block;width:8px;height:8px;background:rgba(255,255,255,0.5);border-radius:50%;margin:0 4px;cursor:pointer;}
.dot.active{background:#fff;}
</style>
<div class='featured-slider' id='featured-slider'>
<div class='featured-track' id='featured-track'>
<div class='featured-slide'><a href='POST-133-URL'><img src='THUMB-133'/><div class='featured-info'><span style='background:#f59e0b;padding:3px 8px;border-radius:10px;font-size:10px;'>MUST READ</span><h2>How to Get AdSense Approval 2026</h2></div></a></div>
<div class='featured-slide'><a href='POST-135-URL'><img src='THUMB-135'/><div class='featured-info'><h2>How to Increase AdSense CPC</h2></div></a></div>
<div class='featured-slide'><a href='POST-134-URL'><img src='THUMB-134'/><div class='featured-info'><h2>How to Add AdSense Ads After Approval</h2></div></a></div>
</div>
<div class='featured-dots'><span class='dot active' onclick='goSlide(0)'></span><span class='dot' onclick='goSlide(1)'></span><span class='dot' onclick='goSlide(2)'></span></div>
</div>
<script>
var cur=0; function goSlide(n){cur=n; document.getElementById('featured-track').style.transform='translateX(-'+(n*100)+'%)'; document.querySelectorAll('.dot').forEach((d,i)=>d.classList.toggle('active',i==n));}
setInterval(()=>{cur=(cur+1)%3; goSlide(cur);},4000);
</script>
</b:if>

Step 3: Which Posts to Feature? (Strategy)

Slot Which Post Why?
Slide 1 Post #133 AdSense Approval New visitors want this most
Slide 2 Post #135 CPC Increase Highest earning keyword
Slide 3 Post #121 TOC or #136 Related Posts Show tutorial quality

Update featured monthly - feature latest high CPC post.

Step 4: Featured Label Method - Auto (No Manual URL)

Instead of manual URLs, tag any post with label "Featured" and it auto appears:

  1. For any post you want featured → Labels: add "Featured"
  2. Use feed: /feeds/posts/default/-/Featured?alt=json-in-script&callback=... same as Post #138 logic to auto pull Featured posts into slider

Post #139 Complete - Featured done.

Next Post #140: How to Add Newsletter Signup in Blogger - build email list.

Post a Comment

0 Comments