How to add a Hero section in Blogger
Adding a hero section to your Blogger blog is a great way to make it more visually appealing and draw in readers. In this article, we’ll show you how to easily add a hero section to your blog using custom codes and built-in customization options.
First, let’s start by explaining what a hero section is.
A hero section is a banner image and accompanying text that is prominently displayed at the top of your blog. It allows you to showcase your most important content and hook your readers.
You can add your social media handles, and your mission statements, or add any call to action button like a Newsletter, subscribe, etc.
Just follow the below steps to add a beautiful hero section to your blogger website. Here, note that you may need to change some values like width, Margin, padding, and font size according to your website layout.
Steps to add hero section in Blogger
1. Go to the “Layout” section of your Blogger dashboard and click on the “Add a Gadget” button.
2. From the list of gadgets, select the “HTML/JavaScript” gadget.
3. In the “Content” field, paste the following code:
<div class="hero_section">
<div class="hero_inner">
<h2 class="hero_title"> Add your website Name or Heading </h2>
<p> your website tagline</p>
<div class="hero_icons">
<!--twitter-->
<a target="_blank" href="https://twitter.com/Key2blogging">
<div class="social_icn">
<svg viewbox="0 0 64 64"><path d="M11.4,26.6C11.5,26.6,11.5,26.6,11.4,26.6c-0.9,0-1.8-0.2-2.6-0.4c-1.3-0.4-2.5,0.8-2.1,2 c1.1,4.3,4.5,7.7,8.8,8.6c-1,0.3-2,0.4-3,0.4c-1,0-1.7,1.1-1.2,2c1.9,3.5,5.6,5.9,9.7,6h1c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2 c-1.3,0-2.9-0.1-4.5-0.5c-1-0.2-2-0.2-2.9,0.1c-1.7,0.6-3.5,1.1-5.4,1.3C8.5,50.2,8,50.7,8,51.4v0c0,0.5,0.3,1,0.8,1.2 c3.9,1.7,8.3,2.7,12.9,2.7c21.1,0,32.7-17.9,32.7-33.5v0c0-0.9,0.4-1.8,1.1-2.4c1.2-1,2.3-2.1,3.3-3.4c0.4-0.5-0.1-1.2-0.7-1 c-1.2,0.4-2.4,0.7-3.7,0.9c-0.2,0-0.3-0.2-0.1-0.4c1.5-1.1,2.8-2.6,3.6-4.3c0.3-0.6-0.3-1.2-0.9-0.9c-1.1,0.6-2.3,1-3.5,1.4 c-1.2,0.4-2.6,0.1-3.6-0.7c-1.9-1.5-4.4-2.4-7-2.4c-5.3,0-9.8,3.7-11.1,8.8c-0.2,0.9,0.5,1.7,1.4,1.7c1.6-0.1,3.2-0.3,4.4-0.5 c1-0.2,2,0.3,2.4,1.2c0.5,1.2-0.2,2.4-1.3,2.7c-4.6,1.3-9.7,0.4-9.7,0.4l0,0C21.2,21.8,14.3,18,9.3,12.5C8.6,11.7,7.3,12,7,12.9 c-0.4,1.2-0.6,2.5-0.6,3.9C6.4,20.9,8.4,24.5,11.4,26.6z" fill="currentColor"></path></svg>
</div>
<div class="name">Follow Us</div>
</a>
<!--Youtube-->
<a target="_blank" href="https://www.youtube.com/channel/UC7Lunv3M_7GRHIagA7erLtg">
<div class="social_icn">
<svg viewbox="0 0 24 24"><path d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" fill="currentColor"></path></svg>
</div>
<div class="name">Subscribe</div>
</a>
</div>
</div>
</div>
<style>
.hero_icons svg{width:22px;height:22px;fill:black}
.hero_icons{display:flex;gap:15px;margin:10px 0;justify-content:center}
.social_icn{margin:8px} .hero_icons a{display:flex;gap:8px;font-size:50px;text-decoration:none;align-items:center;width:40px;height:40px;line-height:0;overflow:hidden;box-shadow:0 4px 8px -2px rgba(0,0,0,.2);transition:.4s;border:1px solid; width:138px}
.hero_icons a .name{font-size:16px;font-weight:700}.hero_icons a:first-of-type{color:#1da1f2}.hero_icons a:nth-of-type(2){color:red}
.hero_section{
width:100%;
height: 300px;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
padding: 10px;
font-family:system-ui;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.hero_inner{
text-align:center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero_inner p{
font-size: 22px;
text-align:center;
font-style: oblique;
margin: 10px 1px;
line-height: 1;
}
h2.hero_title {
font-size: 22px;
margin: 10px 0px;
}
@media screen and (min-width:768px) {
h2.hero_title {
font-size: 30px;
margin: 10px 0px;
}
}
</style>Now change the texts and links, Save your changes and preview your blog to see the hero section in action.
You can see the Demo of this hero section on our Blogger website. (Techyleaf). Let me know if you have any doubts regarding this in the comment section.
Benefits of Hero section
Here are some benefits of adding a hero section to your blog:
- Visually appealing: A hero section can make your blog more visually appealing and attractive to readers. It allows you to showcase a banner image and customize the layout to create a professional and cohesive look.
- Focused content: A hero section allows you to focus on your most important content and draw in readers. You can use it to highlight a specific post or page or to promote a product or service.
- Increased engagement: By highlighting your most important content in a hero section, you can increase reader engagement and encourage them to explore your blog further.
- Improved user experience: A well-designed hero section can improve the overall user experience for your readers and make it easier for them to find the content they’re looking for.
- Increased brand awareness: A hero section can also be used to promote your brand and increase awareness of your blog or business. You can use it to showcase your logo, tagline, or other branding elements.
Conclusion
By experimenting with different styles and elements, you can create a hero section that is unique and tailored to your blog’s style and content.
I hope this article has helped you understand how to add a hero section to your Blogger blog. With just a few simple steps, you can easily enhance the appearance of your blog and draw in more readers.
