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
- Blogger → Theme → Edit HTML → Find
<div class='main section'>or<b:section class='main'> - 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
- 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:
- For any post you want featured → Labels: add "Featured"
- 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.
0 Comments