Home
Blogger Guide
Coding Guide

How to add Stylish hero header on blogger | Part-2


Hi Dudes, welcome blog, to our Pixabin Official blog. Today, we see the comes  "how to add stylish Hero header section " on this blog post. this hero header section comes with new features like a search bar, Tags Section, and Heading Section with stylish UI design. So, This Hero header script is best for blogger all blogger themes.

What is Hero Header?

Hero header is Showcase element. this Hero header shows below on the header section. because the visitor can first see the Hero header on your Blog. because this header gives professional look to your blogger website.

How to add hero header script for blogger

  • Go to your blogger template.
  • Next Open the "Labels " section.
  • Find Header Section Widgets.
  • Now Open any JavaScript Widget on Header Section.
  • Now copy the "Hero Header Script" on this Page.
    • 
    <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.pixabin.com/search/label/Blogger%20Guide'>Blogger Guide</a>,
<a class='popular-tag' href='https://www.pixabin.com/search/label/SEO'>SEO Tips</a>,
<a class='popular-tag' href='https://www.pixabin.com/search/label/WordPress%20Guide'>WordPress Guide</a>
</div>
</div>
</div>
</div>
<style>
#hero-wrapper{background-blend-mode:overlay;padding:50px 0;margin:0;background: url(https://res.cloudinary.com/themewiki/image/upload/v1625063858/background-circle_xmyhnx.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>
  • Now paste your blogger JavaScript Widget.
  • Save the Widget 
  • All things are Done.

Final Words

We hope this Script helps you. if you like this stylish hero header Script and want more information like this Post Please follow my blog on Telegram and Youtube and Google News.

Post a Comment