📌 Always on Top Banner in Blogger
1. Open Theme Editor
-
Go to Blogger Dashboard → Theme → Edit HTML.
2. Find the Main Posts Loop
Search for one of these lines in your template:
<b:section id='main' class='main' maxwidgets='1' showaddelement='no'>
or
<b:section id='main'/>
This is where your blog’s main post loop starts.
3. Insert the Banner Snippet Above the Loop
Paste this code above the <b:section id='main'/> line:
<!-- Sticky Banner / Always on Top -->
<div class="latest-post-banner" style="clear: both; text-align: center;
margin-bottom: 20px;">
<a href="YOUR-LATEST-POST-URL">
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg
CbFoYKEr3HO2cqu-3SCD5cuhmcvHhpcdsZRNY2YA3L83IGBgOVJ8QvAlQYhVYk61A
6RzILHyGEmf2XT6NHxAUVyKDlX9wn5AlX8oSm6yoZgnjky3Cabswif7WYMuFKQNoA
XwFovYhJoju1EOa91PdLCVTEFgHDgDG6YErpkUlUSKN7l4Ku6pLmV4mWtQ-/s1600
0/%5EBLOG%20HEADER.png"
alt="Latest Post"
style="width:100%; height:auto; border:0;" />
</a>
</div>
<!-- Main posts loop starts here -->
<b:section id='main' class='main' maxwidgets='1' showaddelement='no'>
CATATAN PENTING:
Codingan utk dicari aka Codingan Loop Semua Post/Main Posts bisa tidak sama tapi akan ditemukan tetap serupa
Unsur yg akan sama: <b: section ..
Unsur yg akan mirip: id='main' dan class='main'
Tentukan dgn hati-hati dan teliti!!
pada kasus blog saya:
<b:section class='main' id='main' name='Main' showaddelement='no'>
4. What This Does
-
Always places your chosen banner (with link) above the post list, regardless of publish date.
-
The link (
YOUR-LATEST-POST-URL) should point to your latest post manually. -
If you want the banner to update automatically, you’ll need a script that fetches the newest post dynamically.
✅ Result
Each time Blogger loads your homepage, the banner will appear before the first post, linking to your newest content.
SUMMARY:
<!-- Sticky Banner / Always on Top -->
<div class="latest-post-banner" style="clear: both; text-align: center;
margin-bottom: 20px;">
<a href="YOUR-LATEST-POST-URL">
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg
CbFoYKEr3HO2cqu-3SCD5cuhmcvHhpcdsZRNY2YA3L83IGBgOVJ8QvAlQYhVYk61A
6RzILHyGEmf2XT6NHxAUVyKDlX9wn5AlX8oSm6yoZgnjky3Cabswif7WYMuFKQNoA
XwFovYhJoju1EOa91PdLCVTEFgHDgDG6YErpkUlUSKN7l4Ku6pLmV4mWtQ-/s1600
0/%5EBLOG%20HEADER.png"
alt="Latest Post"
style="width:100%; height:auto; border:0;" />
</a>
</div>
<!-- Main posts loop starts here -->
<b:section id='main' class='main' maxwidgets='1' showaddelement='no'>
Comments