Hello guys welcome to solution host.

Today I am going to show you how to create hero section in blogger home page.

So please read complete article which is specifically written for blogger hero section design.

Hero image in blogger


So let's start this article and see how to create hero section in blogger theme development.

How to create hero section in blogger theme

If you want to create attractive hero image in blogger then you need to follow some steps.

Step 1

Create a layout section in blogger for hero section

For creating attractive hero section firstly you need to create a layout section.

So go to theme section then go for edit html.

Now find end of header and create a hero section. Note that hero section must be below of header section.

Below is the code for create section in blogger template

<b:if cond='data:viewisHomepage'>
<b:section class='hero-section' id='hero-section'>
</b:section>
</b:if>

Here we added blogger conditional tag <b:if>, because hero section should be appear only on homepage.

You can change class name and I'd name according to you. But note that I'd name should be unique and it must be to add id in b:section.

Step 2

Add a gadgets in blogger

After creation of layout section you need to add widget from layout.

So go to layout option in blogger then you can see hero section in layout.

Now you can see "add a gadget" in hero section. So click for adding new widget and choose gadgets or widget.

For widget , Now you have two options -

  1. Add html/javascript gadget on hero section and write or paste your html code of hero section design.
  2. Choose image gadgets and insert image url or upload image. Then write it's title , caption and url link where you want to redirect users. Then go to theme and then edit html section. Now do coding and style it.

So let's see coding.

How to make hero section in blogger template

For make hero image in blogger, follow given steps.

Step 1

Go to Theme option from blogger sidebar then go to theme edit html.

Step 2

Now find end of header section.

Step 3

After finding end of header section, now if you have created any hero section then remove it.

Step 5

Write or paste following code of hero section in bottom of header section.

<b:if cond='data:view.isHomepage'>
    
    <b:section class='hero-section' id='hero-section'>
      <b:widget id='Image1' locked='false' title='Hey There, I am Website Developers' type='Image' version='1'>
        <b:widget-settings>
          <b:widget-setting name='displayUrl'><![CDATA[https://media.istockphoto.com/vectors/webinar-online-video-training-tutorial-podcast-concept-with-character-vector-id1316676180?b=1&k=20&m=1316676180&s=612x612&w=0&h=vDoTxubdnIrhNC-GtpyJOySOGk-I8lz_R4renK9AIWw=]]></b:widget-setting>
          <b:widget-setting name='displayHeight'>612</b:widget-setting>
          <b:widget-setting name='sectionWidth'>792</b:widget-setting>
          <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
          <b:widget-setting name='displayWidth'>612</b:widget-setting>
          <b:widget-setting name='link'>https://solutionhost.blogspot.com/</b:widget-setting>
          <b:widget-setting name='caption'><![CDATA[Best Education Site For Online Schooling. Get top score by learning india's largest content provider.]]></b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
    <div class='widget-content hero'>
      <div class='hero-txt'>
        <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
        <b:if cond='data:caption'>
        <p class='caption'><data:caption/></p>
      </b:if>
        
        <a class='hero-btn' expr:href='data:link'>Read More</a>
      </div>
      
      <div class='hero-img'>
        <img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl'/>
      </div>
      
    </div>

    <b:include name='quickedit'/>
  </b:includable>
      </b:widget>
    </b:section>
    </b:if>

Step 6

Now you need to apply css in hero section.

So write your css according to you inside b:skin tag.

If you don't have knowledge, how to design it from css then copy the following css code and paste it just before of the </b:skin> tag.

        <style>
            .hero-section{
            margin:0;
            padding:0;
            }
            
            .hero{
            display:flex;
            align-items:center;
            justify-content:center;
            padding:0 1em;
            margin:0;
            border-bottom:3px solid #ddd;
            }
            
            .hero-img{
            margin-left:21px;
            }
            
            .hero-img img{
            width:100%;
            height:500px
            }
            
            .hero-txt{
            width:50%;
            color:#212121;
            }
            
            .hero-txt h2{
            font-size:27px;
            }
            
            .hero-txt .caption{
            font-size:17px;
            opacity:0.7;
            margin:1em 0;
            width:80%;
            }
            
            
            .hero-txt .hero-btn{
            font-size:17px;
            text-align:center;
            vertical-align:middle;
            background-color:#363540;
            color:#fff;
            display:block;
            width:170px;
            border-radius:21px;
            padding:12px;
            margin-top:2em;
           
            }
            
            
            
            @media only screen and (max-width:651px){
            
            .hero{
            display:block;
           
            }
            
            .hero-txt{
            width:100%;
            }
            
            .hero-txt .caption{
            width:100%;
            }
            
            .hero-img{
            margin-top:1em;
            margin-left:0;
            text-align:center;
            }
            
            .hero-img img{
            height:unset;
            }
            
            
            }
          </style>

Now your hero section design is completed. And you can manage it from layout.


Conclusion

In this article you have learnt how to make hero section in blogger.

I hope this article is helpful for you. So please do comment and give your feedback.

Thanks for reading.