Hello Friends, welcome to our blog. let see how to set up a stylish and Responsive Hero Header Section on a blogger or Blogspot Website.
Hero header is an attractive area on the header section. this feature gives a good impression on your Website.
This time many WordPress websites use this Hero Header Section. now you can create a stylish hero header section on blogger look likes WordPress Website. you can do this simply in a few minutes.
Let see some information on the hero header and How to set up this on your blogger website.
What is Hero Header?
Hero header is an element that appears below the title of your website or in the Header area. This is what the user will see first on your website.
By setting this Hero Header on your website your website will create an image as the best website among the users. This will help the user to remember your website.
How its Work?
The Responsive hero header provided on this website is a combination of CSS and HTML Script.
Thus the loading speed on your website often does not reach the version. Also included are two buttons. Here are your links.
Responsive Stylish Hero Header for blogger?
Responsive hero header will automatically resize your website to suit the device the user is using.
So you can add this to your website without fear. Thus getting the best experience for your users.
Pros and Cons on Hero Header?
This Hero Header is Come With Some Pros and Cons. so you read after using this Hero Header Section.
Pros
This Hero header section brings the best visual layout to your website.
This is the first time users will see this on your website. So you can put all your important links in it.
This makes it more likely that users will remember your website.
Cons
Adding this to your website may slow down your website a bit.
How to Add Hero Header in Blogger
Adding CSS Properties Of Hero Header
Search for ]]></b:skin> and paste below code directly above it. You can easily customize it by changing respective CSS properties accordingly.
/* Hero Header Design By Techandfunzone/
.top-banner-section {
padding-bottom: 60px;
margin-bottom: -50px;
margin-top: -15px;
background: transparent!important
}
.bubble li {
background: #799fe7;
opacity: .1;
width: 16px;
height: 16px;
border-radius: 50%;
position: absolute;
list-style: none
}
.bubble li:nth-child(1) {
left: 220px;
top: 250px;
-webkit-animation: spin3 2s infinite alternate;
animation: spin3 2s infinite alternate
}
.bubble li:nth-child(2) {
left: 35%;
top: 100px;
-webkit-animation: spin 2s infinite alternate;
animation: spin 2s infinite alternate
}
.bubble li:nth-child(3) {
left: 40%;
width: 51px;
height: 51px;
top: 300px;
-webkit-animation: spin1 3s infinite alternate;
animation: spin1 3s infinite alternate
}
.bubble li:nth-child(4) {
left: 42%;
top: 280px;
width: 20px;
height: 20px
}
.bubble li:nth-child(5) {
left: 76%;
width: 51px;
height: 51px;
top: 160px;
-webkit-animation: spin1 3s infinite alternate;
animation: spin1 3s infinite alternate
}
.bubble li:nth-child(6) {
left: 75%;
width: 30px;
height: 30px;
top: 186px
}
.bubble li:nth-child(7),
.bubble li:nth-child(8) {
left: 62%;
top: 100px;
width: 20px;
height: 20px;
-webkit-animation: spin2 2s infinite alternate;
animation: spin2 2s infinite alternate
}
.bubble li:nth-child(8) {
left: 90%;
top: 250px
}
.banner_text {
background: transparent;
padding: 0 22px 0;
text-align: center;
margin-top: -100px;
padding-bottom: 50px
}
.banner_text h5 {
font-family: inherit;
font-size: 40px;
color: #09204C;
line-height: 50px;
font-weight: 400
}
.banner_text p {
color: #4d4d4d;
font-size: 18px;
line-height: 28px;
font-family: inherit;
margin-bottom: 80px
}
.outer-circle {
width: 300px;
height: 300px;
background: #F2EEFE;
border-radius: 0 300px 300px 300px;
-moz-border-radius: 0 300px 300px 300px;
-webkit-border-radius: 0 300px 300px 300px
}
.inner-circle {
width: 250px;
height: 250px;
background: #e0e8ff;
border-radius: 0 0 250px 0;
-moz-border-radius: 0 0 250px 0;
-webkit-border-radius: 0 0 250px 0
}Adding Animation Effects to Hero Header - Blogger
This animation is for circle elements that keeps moving, expand and shrink. Add it just above ]]></b:skin>.
@-webkit-keyframes spin {
0% {
-webkit-transform: translateX(-10px) scale(.9);
transform: translateX(-10px) scale(.9)
}
to {
-webkit-transform: translateX(30px) scale(1.3) translateY(10px);
transform: translateX(30px) scale(1.3) translateY(10px)
}
}
@keyframes spin {
0% {
-webkit-transform: translateX(-10px) scale(.9);
transform: translateX(-10px) scale(.9)
}
to {
-webkit-transform: translateX(30px) scale(1.3) translateY(10px);
transform: translateX(30px) scale(1.3) translateY(10px)
}
}
@-webkit-keyframes spin1 {
0% {
-webkit-transform: scale(.9);
transform: scale(.9)
}
to {
-webkit-transform: scale(1.5);
transform: scale(1.5)
}
}
@keyframes spin1 {
0% {
-webkit-transform: scale(.9);
transform: scale(.9)
}
to {
-webkit-transform: scale(1.5);
transform: scale(1.5)
}
}
@-webkit-keyframes spin2 {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
to {
-webkit-transform: translateY(40px);
transform: translateY(40px)
}
}
@keyframes spin2 {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
to {
-webkit-transform: translateY(40px);
transform: translateY(40px)
}
}
@-webkit-keyframes spin3 {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
25% {
-webkit-transform: translateY(10px);
transform: translateY(10px)
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px)
}
to {
-webkit-transform: translateX(50px);
transform: translateX(50px)
}
}
@keyframes spin3 {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
25% {
-webkit-transform: translateY(10px);
transform: translateY(10px)
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px)
}
to {
-webkit-transform: translateX(50px);
transform: translateX(50px)
}
}
<script type='text/javascript'>/*<![CDATA[*/
var TxtRotate = function (t, e, i) {
this.toRotate = e, this.el = t, this.loopNum = 0, this.period = parseInt(i, 10) || 2e3, this.txt = "", this.tick(), this.isDeleting = !1
};
TxtRotate.prototype.tick = function () {
var t = this.loopNum % this.toRotate.length,
e = this.toRotate[t];
this.isDeleting ? this.txt = e.substring(0, this.txt.length - 1) : this.txt = e.substring(0, this.txt.length + 1), this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>";
var i = this,
s = 300 - 100 * Math.random();
this.isDeleting && (s /= 2), this.isDeleting || this.txt !== e ? this.isDeleting && "" === this.txt && (this.isDeleting = !1, this.loopNum++, s = 500) : (s = this.period, this.isDeleting = !0), setTimeout(function () {
i.tick()
}, s)
}, window.onload = function () {
for (var t = document.getElementsByClassName("txt-rotate"), e = 0; e < t.length; e++) {
var i = t[e].getAttribute("data-rotate"),
s = t[e].getAttribute("data-period");
i && new TxtRotate(t[e], JSON.parse(i), s)
}
var o = document.createElement("style");
o.type = "text/css", o.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }", document.body.appendChild(o) // highlight-line
};
/*]]>*/
</script>Adding HTML Section in Blogger Theme
This is where we call our hero header classes and tags. Add the following code to desired location for widget to appear.
To add this go to Layout Section and click on add Gadget in Top Widget menu. And Paste the Following Code & Click Save.
<section class='top-banner-section'>
<ul class='bubble'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class='outer-circle'>
<div class='inner-circle'></div>
</div>
<div class='banner_text'>
<h5>We Provide<span class='txt-rotate' data-period='2000' data-rotate='[ "Themes.", "Softwares", "SEO Hacks.", "Blogging Guides.", "Tips & Tricks!" ]'></span></h5>
<p>- Welcome To techandfunzone.eu.org -</p>
</div>
</section>