🤗 Hello there, How are you all?
“Want to Add a Simple Hero Header on your blogger website? Here is a short article which will surely help you.”
One thing about this widget is ”Your audience will love this widget. And your competitors will be in trouble of losing their audience.”
Onboarding
In this article i am going to share how to add a Hero Section in your Blogger websites which looks like a professional site.This Hero Section will be fully responsive and supported on all type of devices.This Hero Section is really on tred in Wordpress websites, by this tutorial you can add it in your blogger website.
What is Hero Header?
This is a section which appears just below navigation menu.This is the first section which users see on your site. This will also work like call to action on provided link.This will also helps users to remember your site and visit again and again because it looks just like a professional site and all want to take contents from a professional site.
Hero Header includes information about:
- Why users should trust you.
- The benifits working with you.
- What action they should take next.
How to Design a Professional Hero Header for your Blogger Website.
- Create a powerful headline with strong subheadings.
- Must include a call to action button.
- Use a memorable and catchy image or video in your hero header.
Pros and Cons of Hero Header.
Pros of using a Hero Header
- This Hero Header brings the best and professional visual to your blog.
- This will help users to remember your site for a long time.
Cons of using a Hero Header
- Adding this Hero Section may slow down your site speed.
How to add Responsive Hero Header Section on Blogger Website
For adding it in your blogger Website follow given steps:
Step 1:Go to Blogger layout section and create a widget.
Step 2:Select HTML/JavaScript section.
Step 3:Now paste below codes there..
Hero Header HTML
<div class="welcomeSec">
<h2 class='title dt'>Welcome</h2>
<div class="WelcomeSec" id="WelcomeSec">
<h2 class="headC">Welcome to Techy Zipper</h2>
<p class="desC"><b>Techy Zipper Official</b> : A New Blog Where You Can Find Blogging Tutorials, Tips, Tricks,Templates and Many More...</p>
<center>
<a class="button" style="border-radius:25px 2px 25px 2px!important" href="https://techyzipper.blogspot.com/search" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" class="line" viewbox="0 0 24 24"><g transform="translate(3.500000, 3.500000)" stroke="#fff"><line x1="9.8352" y1="16.0078" x2="16.2122" y2="16.0078"></line><path d="M12.5578,1.3589 L12.5578,1.3589 C11.2138,0.3509 9.3078,0.6229 8.2998,1.9659 C8.2998,1.9659 3.2868,8.6439 1.5478,10.9609 C-0.1912,13.2789 1.4538,16.1509 1.4538,16.1509 C1.4538,16.1509 4.6978,16.8969 6.4118,14.6119 C8.1268,12.3279 13.1638,5.6169 13.1638,5.6169 C14.1718,4.2739 13.9008,2.3669 12.5578,1.3589 Z"></path><line x1="7.0041" y1="3.7114" x2="11.8681" y2="7.3624"></line></g></svg>
More Stuff’s
</a></center></div></div>Hero Header CSS
<style>.headC{font-family:var(--font-bodyAlt);text-align:center;font-weight:900}
.desC{font-family:var(--font-bodyAlt);text-align:center;font-size:13px;padding-bottom:0px;line-height:1.6em;} .desC:after{content:'';width:0px;display:block;position:relative;bottom:-6px;border-bottom:1.5px solid #989b9f;margin:3px auto;animation:animatebord 3s infinite;-webkit-animation:animatebord 3s infinite}
@-webkit-keyframes animatebord{0%{width:20px}50%{width:100px}100%{width:20px}}@keyframes animatebord{0%{width:20px}50%{width:100px}100%{width:20px}}</style>Hero Header Additional CSS
<style>
#WelcomeSec {
box-shadow: 0 5px 35px rgb(0 0 0 / 7%);
border-radius: 20px;
padding: 30px 20px 15px 20px;
}
.drK #WelcomeSec {
background: var(--darkBa);
}
</style>Last Words
This is all about adding Hero Header in a Blogger Website.I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!