Follow Me on Google News Follow Now!

How To Add Stylish Hero Header in Blogger Website

Hello Everybody, Welcome to Adatun. In this post I will show you how to add animated hero header in blogger website. This Stylish Hero Header is also responsive and Mobile Friendly. 

What do website admins not do to make their website look good? It is very important to make a website look good. This also increases the traffic of your website. Viewers visit the website again and again to see the beauty a blog. 

This effect will beautify the appearance of your blog and will also add to the atmosphere of the blog, so that the blog will look alive with this animated Hero header for blogger website. 

There are many ways on how to How to create beautiful and animated hero header in blogger website. One of them is like the tutorial below. If you want to follow this tutorial, it will look like the following screenshot:-

How To Add Stylish Hero Header in Blogger Website —

Warning!
Before starting the tutorial, make sure to back up the template first.

How To Add Stylish Hero Header CSS Code in Blogger Website —

  1. First, Go to Blogger Dashboard
  2. Go to Theme/Template Section
  3. Now Click on Edit HTML
  4. Now Search for </head>tag
  5. To find anything in blogger theme section press Ctrl+F buttons and then type term to search and press enter.
  6. Copy the code provided below and paste it above </head> tag.
  <b:if cond='data:blog.url == data:blog.homepageUrl'> 
<style type='text/css'>
/* animated Hero Header By gyanitheme.online */
p{margin:0 0 28px}input{background-color:#fff;border:1px solid #ddd;color:#333;padding:10px;width:100%}.button,button,input[type=button],input[type=reset],input[type=submit]{background:#1e45f5;border:0;color:#fff;cursor:pointer;font-size:15px;font-weight:00;padding:5px 8px;text-decoration:none;white-space:normal;width:auto}.button.rd,button.rd,input[type=button].rd,input[type=reset].rd,input[type=submit].rd{border-radius:0}body{margin:0;background:#fff;color:#333;font-style:normal;font-weight:400;font-size:17px;line-height:1.825em;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,Open Sans,sans-serif}.post{overflow:hidden}.mail-box{background-image:linear-gradient(to top,#051937,#00476e,#007b9f,#00b3c0,#12ebcf);padding:8% 0;height:auto;text-align:center}.mail-img{width:30%}.mail-column{padding-left:3%;text-align:left;width:55%}.mail-column,.mail-img{display:inline-block;vertical-align:middle}.mail-img img{background:0 0;width:auto;height:auto;transition:opacity .3s}h2.title{line-height:1.3;font-size:39px}.mail-column span{color:#fff}.mail-column p{width:80%;padding:0;line-height:1.8em;color:#fff}.signup input{width:30%;margin:5px;padding:10px 16px;font-size:16px}.signup .button,.signup.post .button{width:auto;padding:10px 20px}.post{margin-bottom:15px;background:#fff;border:1px solid #e1e1e1;padding:1rem}.post-title{font-size:32px;color:#404040;font-weight:700;margin:0 0 0;line-height:normal}.post-title a{color:#333;font-weight:600}.post-title a:focus{border:0 solid #999;outline:0}.post-title a:hover{color:#ff5a00}.post-body{padding:0;margin:0;text-transform:auto;word-wrap:break-word;font-weight:500;color:#000;line-height:1.9}.post-title a:hover{color:#ff5a00}a.button{color:#fff;padding:7px 14px;margin:8px 0 0;cursor:pointer;display:inline-block;font-size:13px;font-weight:700;overflow:hidden;text-transform:uppercase;transition:background-color .2s ease-in-out 0s}a:hover.facebook-ico{background-color:#000}a:hover.twitter-ico{background-color:#000}a:hover.plus-ico{background-color:#000}a:hover.bitz{background-color:#000}a:hover.email-ico{background-color:#000}.wrap{max-width:1140px;margin:0 auto}.button2:hover,.button:hover{background-color:#1e45f5;box-shadow:0 10px 30px 0 rgba(0,0,0,.15),0 10px 50px 0 rgba(0,0,0,.19)}input.button2{padding:14px 24px}img{background:0 0}.post-body h1{text-transform:capitalize;padding:0;background:#ff6a06;color:#fff;font-size:19px;display:inline-block;margin:0;width:100%}.post-body h1:before{content:"\f0a4";font-style:normal;padding:10px 14px;display:inline-block;font-size:15px;border-right:1px solid #cb3333;margin:0 5px 0 0;background:#2a2b2c;font-family:fontawesome}@media (max-width:840px){.wrap{padding-left:5%;padding-right:5%}.mail-img{display:none}.mail-column{width:100%;margin:0;padding-left:0;text-align:center}p.hide{display:none}h2.title{font-size:22px}.mail-box p{width:100%}.signup input,input.button.rd{width:95%;margin-left:auto;margin-right:auto;padding:10px}}
</style>
</b:if>

How To Add Stylish Hero Header Html Code in Blogger Website —

  1. First, Go to Blogger Dashboard
  2. Go to Theme/Template Section
  3. Now Click on Edit HTML
  4. Now Search for </header>tag
  5. To find anything in blogger theme section press Ctrl+F buttons and then type term to search and press enter.
  6. Copy the code provided below and paste it Below of </header> tag.
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<div class='mail-box'>
<div class='wrap'>
<div class='mail-img'>
<script src='https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js'/>
<lottie-player autoplay='' background='transparent' loop='' speed='1' src='https://assets8.lottiefiles.com/private_files/lf30_WdTEui.json' style='width: 370px; height: 320px;'/>
</div>
<div class='mail-column'>
<h2 class='title'><span>Get More Stuff Related Blogging</span></h2>
<p class='hide'>On this blog you will get information related to Blogging, SEO, Adsense, Technology, Internet, Full Form, Meaning and Education.</p>
<div class='signup'>
<p>Subscribe now to be notified of new articles!</p>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=username' method='post' target='popupwindow'><input name='first_name' placeholder='Your Name' type='text'/><input name='email' placeholder='Your Email' type='text'/><input name='uri' type='hidden' value='Your Website Name'/><input name='loc' type='hidden' value='en_US'/><input class='button rd' type='submit' value='Join Now'/></form>
</div>
</div>
</div>
</div>
</b:if>

You can Replace the above marked words as your choice and add your information that you want to show.

Now save your theme and go to your website to check animated hero header in blogger website.

Conclusion —

I hope you liked this post a lot. This is a best tutorial on how to create stylish and animated hero header in blogger website. if you have face any error and problem you can ask in the comment section without any hesitate.  Thanks For Reading This Post.

Happy Blogging...

Getting Info...
Adatun Provides Blogger Tips, Seo Tips, Blogging Tips, Adsense Tips, Best Blogger Template Updates, Html, Css, Javascript and More.

Blog: Adatun Blog

إرسال تعليق