How to Create Beautiful and Animated Hero Header in Blogger

Hello Friends, Welcome to The Kathait. In today's article, we are going to learn "How to create a beautiful and animated header in blogger. After adding this animated header, your Blogger website will also look like WordPress.Which will attract your readers even more and no one can imagine that your website is in blogger. In this animated header, you can show your blog what things you provide.

Beautiful and Animated Hero Header

As you have seen many websites with many stylish hero headers. This is one of the features that you will find on a WordPress theme but anyone can add it to their Blogger blog. It gives a beautiful and attractive look to your blog. If you are using it on a monetized website then this hero header will give a professional look to your blogger site and will attract more visitors and consequently revenue.

In today's tutorial, we will show you how to add a beautifully animated header section to your Blogger blog. And I am sure that after adding this, your readers will definitely discuss it with you.

Adding Animated Header Effects to Your Blogger Theme

Go to your Blogger dashboard,

Click to Theme 

Click edit HTML and once in the HTML editor, use CTRL + F to search for the tag. ]]></b:skin>,

If you don't find it you can find this code /* Landing Page */ or /* header */

Add the following CSS code just before the above tag.

.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 }

Now you have to press again CTRL + F and find this </head>

If you don't find it you can find this code </header> or </head>

Add the following HTML code just before the below tag.

<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 Provid <span class='txt-rotate' data-period='2000' data-rotate='[ "Plugins.", "Themes.", "SEO Hacks.", "Blogging Tips.", "Business &amp; Tricks!" ]'></span></h5> 
        <p>- Welcome To The Kathait -</p>
    </div>
</section>

Now you have to make some changes in this code, where you have to make changes, we have highlighted the text there, ( We Provid, Plugins, Themes, SEO Hacks, Blogging Tips, Business, Tricks!, Welcome To The Kathait ) But keep in mind that you have to do this carefully.

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>

After doing that, you have to click on the save icon and save the theme.

If the code does not work or you’ve faced any error/problem then please download the source code files from the given download button.

So this is all about Beautiful and Animated Hero Header. I hope you didn't have any problem adding an alert box.

If you found this article useful, do share it, and don't forget to give us your feedback in the comments section. Your one feedback inspires us to write more good tutorials

© Copyright The Kathait