Follow Us On Google News. Follow Now!

How To Add Stylish Hero Header In Blogger

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.

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

    <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 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>
<div class='hero-tags'>
<span class='tags-label'><b>Tags:</b></span><a class='popular-tag' href='>Templates</a>,
<a class='popular-tag' href=''>Plugins</a>,
<a class='popular-tag' href=''>WordPress</a>
#hero-wrapper{background-blend-mode:overlay;padding:50px 0;margin:0;background: url(}
.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) {
.container{padding:0 15px}}
@media screen and (max-width: 640px){
.hero-content h1 {
    font-size: 31px;}} 

Style  — 2

<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>
  <a class="button" style="border-radius:25px 2px 25px 2px!important" href="" target="_blank"><svg xmlns="" 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>
&nbsp; Looking For More Stuff’s

.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

<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 id='outline'
    onclick="window.location.href = '';">
/* 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;
display: flex;
gap: 1rem;
background: rgb(49, 172, 255);
background: none;
border: 1px solid rgb(49, 173, 255);
color: inherit;
background: rgb(49, 173, 255);
color: #fff;
@media(max-width: 780px){
.thetaluat-hero h2{
font-size: 40px;
width: 100%;
@media(max-width: 400px){
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;
  • Finally, Publish Your Widget and See The Result.
  • Please Change The Highlighted Portion With Your Details


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.

Post a Comment

Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.
Created By

M Taluat .xyz

All Posts are Protected By DMCA.
Reproduction in Any Form is Strictly Prohibited!

Developed by M Taluat