How to Add a Hero Section In Blogger Homepage

Hello everyone, welcome to The Kathait blog. and this article will show you how you can create a hero section so it is fully responsive and works perfectly fine on all types of devices. And as you can check this it is looking good on mobile devices and when I close this it will also look the same on desktop. He likes it, so let's check how we can create it. Add it to your blog or website so. Cool here in this case we will be using the median UI v1.6 template, so here we will replace the header section with this hero section.

Add a Hero Section

Adding a custom Hero section gives your Blogger website a professional look and you can easily improve the blog design. Here, in this video, I have used the Median UI v.6 themes. But, You can use this hero section in nearly every theme, by following this guide.

>

Step 1

• Go to blogger dashboard
• Click to layout
• Click on Adda Gadget Below Horizontal-Ad
• Click again HTML/JavaScript

Now you have to copy all the code given below and paste it into the content box.

<div class='hero'>
<div class='hero-items'>
<h2> Develop Your Creative Skill with <br/> Free Design Tutorials</h2>
<p>Our blog helps to Provide Latest Tips and Tricks tutorials about Blogging <br/> Business, SEO Tips, much more. this Blog and stay tuned to this <br/> blog for further updates.</p>
<div class='butto'>
<button id='full'
    onclick="window.location.href = 'https://www.pskathait.in/search/label/SEO%20Tips';">
        Learn SEO
    </button>

<button id='outline'
    onclick="window.location.href = 'https://www.thekathait.in/search/label/Blogger%20Tips%20%26%20Tricks';">
        Blogger Tips & Tricks
    </button>
</div>
</div>
</div>
<style>
/* hero items */
.hero {
background-color: inherit;
}
.hero-items {
display: flex;
padding: 1rem 0;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0 1rem;
}
.hero-items h2 {
font-size: 50px;
font-weight: 800;
width: 850px;
}
.hero p {
font-size: 17px;
font-weight: 500;
margin: 1rem 0;
}
.hero button{
padding: 1rem 4rem;
font-size: 17px;
font-weight: 600;
color: #fff;
border-radius: 3px;
transition: all 0.2s ease-in;
margin: 1rem 0;
border-color:  #000000;
}
.hero button:hover{
cursor: pointer;
background:  #ff9900;
transition: all 0.2s ease-in;
}
.butto{
display: flex;
gap: 1rem;
}
#full{
background:  #ff9900;
}
#outline{
background: none;
border: 1px solid  #000000;
color: inherit;
}
#outline:hover{
background:  #ff9900;
color: #fff;
}
@media(max-width: 780px){
.hero h2{
font-size: 40px;
width: 100%;
}
}
@media(max-width: 400px){
.hero-items{
align-items: flex-start;
text-align: left;
}
.hero h2{
font-size: 30px;
}
.hero p{
font-size: 16px;
}
.hero button{
padding: 9px 15px;
}
}
</style>

Now you have to add the about your blog at all the marked places and save it.