Animated Hero Header for Blogger

 Hello, friends in this post I am going to give Animated Hero Header code for Blogger. Hope this post will help you. If you have any doubts related to this post or any other posts please ask me in the comment.

Copy this CSS and paste it above ]]></b:skin> 

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

Then add this code below </header>

Show Every place

 <section class='top-banner-section'>
    <ul class='bubble'>
        <li/>
        <li/>
        <li/>
        <li/>
        <li/>
        <li/>
        <li/>
        <li/>
    </ul>
    <div class='outer-circle'>
        <div class='inner-circle'/>
    </div>
    <div class='banner_text'>
        <h5>Blogger <span class='txt-rotate' data-period='2000' data-rotate='[ &quot;Tech.&quot;, &quot;Codes.&quot;, &quot;Templates.&quot;, &quot;Tips &amp; Tricks!&quot; ]'/></h5> 
        <p>Welcome To Blogger Technic World</p>
    </div>
    </section>

Show Homepage only

     <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/>
    </ul>
    <div class='outer-circle'>
        <div class='inner-circle'/>
    </div>
    <div class='banner_text'>
        <h5>Blogger <span class='txt-rotate' data-period='2000' data-rotate='[ &quot;Tech.&quot;, &quot;Codes.&quot;, &quot;Templates.&quot;, &quot;Tips &amp; Tricks!&quot; ]'/></h5> 
        <p>Welcome To Blogger Technic World</p>
    </div>
    </section> 
      </b:if>

If you want to show every place in your Blogger website copy the Show Every place code and if you want to show only on Homepage copy Show Homepage only code and also don't forget to change yellow marked texts in code with your texts.

Then copy this code and paste it below </body> or &lt;!--</body>--&gt;&lt;/body&gt; .

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