As you browse many websites, I am pretty sure you've come across many websites with a stylish hero header. This is one of the features you will find on WordPress themes but one can also add it to his or here Blogger blog.
In today's tutorial, we will be showing you how to add a beautiful animated hero header section to your Blogger blog just like the one we have here.
This Hero header will give your Blogger site a professional look and attract more visitors and consequentially revenue if you are using on a monetised website.
Adding a stylish and beautiful animated hero header to Blogger
Note
The codes used here were originally posted on Twistblogg. So, all the credits for this Blogger hero header code go to Twistblogg.
Adding the hero header CSS and animation effect to your Blogger theme
From your Blogger dashboard, go to Theme >> Edit HTML and once in the HTML editor, use CTRL + F to search for the ]]></b:skin> tag.
Add the following CSS code just before the above tag
/* Hero Header Design*/
.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
}
After, add also the CSS code for the animation effect after pasting the code provided above
@-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)
}
}
Add the animation JavaScript code.
After adding the CSS codes above, you will need to add the JavaScript code responsible for creating the animation effect. To do this, search for the closing body tag </body> and paste the code below just above it.
<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)
};
//]]>
</script>
Adding the HTML code
The last thing you will need to do now is to add the HTML code where you will like the hero head to display. In our case, we have it added just after the header of our blog.
In case you want this show only on the homepage, you will need to wrap the HTM code below inside a conditional tag.
Meaning you will have to add this code if you want to show hero header only on homepage.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<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>Catalogue of <span class='txt-rotate' data-period='2000' data-rotate='["Plugins.", "Themes.", "SEO Hacks.", "Premium Blogging Guides.", "Tips and Tricks!"]'></span></h5>
<p>- Blogger Customiz -</p>
</div>
</section>
</b:if>
And if you'll like to make your hero header show on every single page, then use the following code instead.
<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>Catalogue of <span class='txt-rotate' data-period='2000' data-rotate='["Plugins.", "Themes.", "SEO Hacks.", "Premium Blogging Guides.", "Tips and Tricks!"]'></span></h5>
<p>- Blogger Customiz -</p>
</div>
</section>