Hello Blogmate's How are you ? I hope you are doing great. Most of you somehow will have noticed beautiful section below the header section.
I've shared not only how to make add hero header but also the script for this. You can create this tool on any other platform other than Blogger. I designed this tool to be very simple, responsive and user interface design.
I've shared not only how to make add hero header but also the script for this. You can create this tool on any other platform other than Blogger. I designed this tool to be very simple, responsive and user interface design.
What is Hero Header ?
The Hero header is a Showcase element. This Hero header is displayed below the header section. This is because the visitor will see the title Hero first on your blog. Because this header makes your blogger site look professional.
Check out how this tool looks like before creating it.
Steps–How to add hero header
- Login To Your Blogger Account.
- Go To Layout Section.
- Now Click On Add New Widget.
- Then Copy And Paste Script Code Given Below:
Style — 1
Hero Header Style 1 Demo <div id='hero-wrapper'>
<div class='row'>
<div class='container'>
<!--[ Homepage title ]-->
<div class='hero-content'>
<h1 class='hero-title'>Best Free & Premium Blogger and WordPress Tutorials For You</h1>
<p class='hero-text'>Find a perfect template Tutorial with SEO Optimized and improve your blog right now</p>
</div>
<div class='hero-search'>
<form action='/search' class='search-form' method='get'>
<input aria-label='Search' autocomplete='off' autocorrect='off' class='search-input' name='q' placeholder='e.g. Blogger Tips' spellcheck='false' type='text'/>
<button class='search-button' title='Search' type='submit' value=''><svg class='line' viewbox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><circle class='fill' cx='9.76659044' cy='9.76659044' r='8.9885584'></circle><line x1='16.0183067' x2='19.5423342' y1='16.4851259' y2='20.0000001'></line></g></svg></button>
</form>
</div>
<div class='hero-tags'>
<span class='tags-label'><b>Tags:</b></span><a class='popular-tag' href='https://www.thetaluat.xyz/search/label/Templates>Templates</a>,
<a class='popular-tag' href='https://www.thetaluat.xyz/search/label/Plugins'>Plugins</a>,
<a class='popular-tag' href='https://www.thetaluat.xyz/search/label/wordpress'>WordPress</a>
</div>
</div>
</div>
</div>
<style>
#hero-wrapper{background-blend-mode:overlay;padding:50px 0;margin:0;background: url(https://res.cloudinary.com/the-taluat/image/upload/v1642954786/background-circle_xmyhnx_ecz0gk.png)}
.hero-content{color:var(--hero-color);text-align:center;margin:0 0 30px}
.hero-content h1{display:block;font-size:35px;font-weight:700;margin:0 0 13px}
.hero-content p{display:block;font-size:16px;color:var(--hero-text-color);margin:0}
.hero-search{text-align:center;margin:0 0 13px}
.hero-search .search-form{display:inline-block;position:relative;width:480px;max-width:100%;height:50px;border:0}
.hero-search .search-input{float:left;width:100%;height:50px;background-color: var(--transparent-bg);overflow:hidden;font-size:14px;color:#95a5a6;font-family:inherit;font-weight:400;line-height:51px;padding:0 20px;border:0;border-radius:6px}
.hero-search .search-input::placeholder{color:var(--title-color);opacity:.55}
.hero-search .search-input:focus{box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.hero-search .search-button{position:absolute;top:0;right:0;height:50px;background-color:transparent;overflow:hidden;font-size:14px;color:#95a5a6;text-align:center;line-height:51px;cursor:pointer;opacity:.85;padding:0 20px;border:0;border-radius:0 6px 6px 0}
.hero-search .search-button:hover{background-color:rgba(155,155,155,0.1)}
.hero-tags{float:left;width:100%;font-size:14px;color:var(--hero-color);text-align:center;margin:0 0 10px}
.hero-tags span,.hero-tags a{display:inline-block}
.hero-tags a{color:var(--hero-text-color);margin:0 0 0 10px}
.hero-tags a:hover{color:var(--hero-color)}
.hero-promo{float:left;width:100%;font-size:21px;color:var(--hero-text-color);text-align:center;padding:40px 0 0;margin:20px 0 0;border-top:1px solid rgba(255,255,255,0.15)}
.hero-promo a{color:var(--hero-color);font-weight:700;margin:0}
.hero-promo a:hover{color:var(--hero-text-color)}
@media screen and (max-width: 1030px) {
.row{width:100%;max-width:100%;margin:0}
.container{padding:0 15px}}
@media screen and (max-width: 640px){
.hero-content h1 {
font-size: 31px;}}
</style>
Style — 2
Hero Header Style 2 Demo<div class="welcomeSec">
<div class="WelcomeSec" id="WelcomeSec">
<h2 class="headC">Welcome to The Taluat Official</h2>
<p class="desC"><b>The Taluat</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://www.thetaluat.xyz/" 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>
Looking For More Stuff’s
</a></center></div></div>
<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>Style — 3
Hero Header Style 3 Demo<div class='thetaluat-hero'>
<div class='thetaluat-hero-items'>
<h2> Develop Your Creative Skill with <br/> Free Design Tutorials</h2>
<p>Our blog helps to Provide Latest Graphic design Tips, Trends, Resources that <br/> you need to start your new projects. Get Daily Inbox by subscribe <br/> our newsletter.</p>
<div class='butto'>
<button id='full'
onclick="window.location.href = '#';">
Click Here
</button>
<button id='outline'
onclick="window.location.href = 'https://example.com';">
Wordpress
</button>
</div>
</div>
</div>
<style>
/* thetaluat-hero items */
.thetaluat-hero {
background-color: inherit;
}
.thetaluat-hero-items {
display: flex;
padding: 1rem 0;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0 1rem;
}
.thetaluat-hero-items h2 {
font-size: 50px;
font-weight: 800;
width: 850px;
}
.thetaluat-hero p {
font-size: 17px;
font-weight: 500;
margin: 1rem 0;
}
.thetaluat-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: #204ecf;
}
.thetaluat-hero button:hover{
cursor: pointer;
background: rgb(80, 148, 252);
transition: all 0.2s ease-in;
}
.butto{
display: flex;
gap: 1rem;
}
#full{
background: rgb(49, 172, 255);
}
#outline{
background: none;
border: 1px solid rgb(49, 173, 255);
color: inherit;
}
#outline:hover{
background: rgb(49, 173, 255);
color: #fff;
}
@media(max-width: 780px){
.thetaluat-hero h2{
font-size: 40px;
width: 100%;
}
}
@media(max-width: 400px){
.thetaluat-hero-items{
align-items: flex-start;
text-align: left;
}
.thetaluat-hero h2{
font-size: 30px;
}
.thetaluat-hero p{
font-size: 16px;
}
.thetaluat-hero button{
padding: 9px 15px;
}
}
</style>
Style-4
Hero Header Style 4 Demo<div class='hero-header'>
<h1 class='main-text'><span class='spancolor'>Supercharge</span> your blogger blog</h1>
<p class='text'>Build a blazing fast, optimized and premium blog, everything for <b><strong>FREE</strong></b> with us.</p>
<div class='two_buttons'>
<a href="/search" class="default_button">
Get Started
<svg style="margin-left: 1rem;">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="#fff" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right">
<path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/>
</path>
</svg>
</svg>
</a>
<a href="/p/contact.html" class="default_button" style="background-color: #07070A;">
Contact Us
<svg style="margin-left: 1rem;">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone-incoming">
<polyline points="16 2 16 8 22 8"></polyline>
<line x1="23" y1="1" x2="16" y2="8"></line>
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
</svg>
</svg>
</a>
</div>
</div>
<style>/* Responsive Big Hero Header By TheTaluat.xyz *//* Keep Credit Intact */
.hero-header {
margin: 50px auto 200px auto;
padding: 50px 20px;
max-width: 1200px;
font-family: 'Inter,sans-serif';
background: #f5f5f5;
}
.hero-header .main-text {
font-size: 96px;
line-height: 1.25;
font-weight: 800;
color: #000;
}
.spancolor {
color: #0066ff
}
.text {
margin-top: 1.5rem;
font-size: 24px;
line-height: 1.5
}
.two_buttons {
grid-auto-flow: dense;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-gap: 1rem;
margin-top: 0.90rem;
width: 48%
}
.default_button {
display: inline-flex;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 20px;
text-decoration: none;
border: 1px solid #DADADA;
border-radius: 0.5rem;
padding: 1rem 0.75rem;
cursor: pointer;
transition: all .15s ease-in;
background-color: #0066ff;
color: white;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.default_button svg {
width: 22px;
height: 22px;
}
@media screen and (max-width: 1024px) {
.hero-header .main-text {
font-size: 80px !important;
}
}
@media screen and (max-width: 832px) {
.hero-header .main-text {
font-size: 64px !important;
}
.two_buttons {
width: 55%
}
.default_button {
font-size: 16px !important;
}
}
@media screen and (max-width: 640px) {
.hero-header .main-text {
font-size: 48px !important;
text-align: center;
margin-top: -15px !important;
}
.text {
font-size: 20px !important;
text-align: center;
}
.two_buttons {
width: 90%;
margin: 30px auto;
}
.default_button {
font-size: 14px !important
}
}
</style>
- Finally, Publish Your Widget and See The Result.
- Please Change The Highlighted Portion With Your Details
Conclusion
So today we have discussed about How To Add Stylish Hero Header In Blogger ? I hope you like this post kindly do give a comment below. If you are having problem implementing this kindly contact me. Do visit regularly for getting more updates like this.