How to Add a Hero Section In Blogger Homepage
2 minute read
Hello everyone, welcome to Danish Editz blog.also, this article will show you how you can make a legend area so it is completely responsive and turns out totally great on a wide range of gadgets. What's more, as you can check this it is solid on cell phones and when I close this it will likewise appear to be identical on work area. He enjoys it, so how about we check how we can make it. Add it to your blog or site so. Cool here for this situation we will utilize the middle UI All layout, so here we will supplant the header segment 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 All 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 = 'YOUR URL';">
Learn SEO
</button>
<button id='outline'
onclick="window.location.href = 'YOUR URL';">
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.
