tirumalai: Adding a Custom Hero Section to the Blogger Homepage: A Complete Guide

Adding a custom hero section to the Blogger homepage index wasn’t exactly straightforward. Here’s how I finally got it working—step by step, including what failed and what actually sticks.

1. The Goal: A Hero Just for the Homepage

Add a bold hero section to greet visitors.
Show it only on the homepage (the index page with all posts, labels, and categories).
Place it above the post grid—never on post or label pages.

2. What Didn’t Work: Manual Widget Coding

I tried adding a <b:section> and manually placing a <b:widget type='HTML'> for the hero.
This caused errors like:
The new widget id 'HTML_Hero' is invalid for type: HTML
Changing IDs or simplifying the widget didn’t help.
Blogger expects widgets to be created through its Layout interface, not by hand in the XML.

3. The Layout Gadget Method—And Its Big Flaw

I defined an empty <b:section> in the XML and added the hero as an HTML/JavaScript gadget in Layout.
This worked at first—the hero appeared above the post grid.
But: Every time I edited or updated the theme XML, Blogger wiped out the gadget’s HTML. I had to re-add the hero content each time.
This makes gadgets a bad choice for important, static homepage content.

4. The Reliable Solution: Hardcode the Hero Section

The best way is to hardcode your hero HTML directly in the theme XML, wrapped in a condition so it only displays on the homepage.
This keeps your hero safe from theme updates and always visible above your post grid.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <div id='homepage-hero-section' class='homepage-hero-area section'>
    <div class="hero-background-full">
      <div class="hero-content-constrained">
        <h1 class="hero-headline">Welcome to Tiruonline!</h1>
        <p class="hero-subheadline">Discover insightful articles, tutorials, and reflections on tech, spirituality, and personal growth.</p>
        <a href="#main" class="hero-button">Explore Posts</a>
      </div>
    </div>
  </div>
</b:if>

Place this block just above your main content/post list in the XML.

5. Making the Hero Section Full Width

If your hero is inside a container with a max-width (like .content-wrapper), its background won’t stretch edge to edge.
Solution: Move your hero’s <div> outside any width-limiting wrappers—ideally just inside <body> or as a direct child of .body-wrapper.
CSS for full width and centered content:

#homepage-hero-section .hero-background-full {
  background-color: #2a2a2a;
  color: #ffffff;
  width: 100%;
  padding: 0;
}
#homepage-hero-section .hero-content-constrained {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 60px 20px;
  text-align: center;
}

The outer .hero-background-full fills the screen; the inner .hero-content-constrained keeps your text aligned with your main content.

Key Takeaways

Don’t manually code HTML widgets in XML—they’ll break or disappear.
Don’t use gadgets for critical static homepage content—theme edits will erase them.
Hardcode your hero section in the XML for a stable, always-visible result.
Place your hero outside width-limiting wrappers for a true full-width look.
Style with CSS to match your post grid and keep your homepage looking sharp.

This approach gives you a hero section that always shows up above your Blogger homepage’s post grid—no matter how often you update your theme.

Adding a Custom Hero Section to the Blogger Homepage: A Complete Guide