How to Create Beautiful & Animated Hero Footer in Blogger

Design of a website is the first thing visitors notice. A smooth and dynamic design gives a positive impression. I remember navigating through Divi Builder website just to check the greatness of its design — all those curves, hero header, hero footer and beautifully crafted layouts. Do you like it as well?

So, what it takes to design a website that captivates visitors in your site? There are a lot of factors such as layout, fonts, color combination, spacing and so on. My first priority will be designing a modern and well finished layout with defined and structured header, footer and body section. 

In this tutorial, I'll be focusing on recreating your current footer section and teach you to add a beautiful animated hero footer in blog theme. 

Let's start by taking a full backup of current design.

And here's the demo of what our hero footer looks like. There will be animation effects and box will move upwards as well.

Adding CSS Properties To the Blog

CSS is what makes a structure user-friendly and clean. Add following CSS elements to your blog. Also, remove all existing footer elements from your current design.

/* Footer */  
footer{position:relative;background-color:#1D6D98;background-image:linear-gradient(to top,#0D0557 0%,#1D6D98 50%,#2CD4D9 100%)!important;color:#989b9f;font-size:13px;font-family:'Nunito Sans', -apple-system,BlinkMacSystemFont,Roboto,'Segoe UI',Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;}  
footer .credit{pointer-events:auto;text-transform:uppercase;padding:20px 0;border-top:1px solid rgba(255,255,255,.1)}  
footer .credit p{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#EBEDF0}  
footer .credit a{color:#b2cdf3}  
footer .credit a:hover{text-decoration:underline}  
footer .credit .creator{display:inline-block;opacity:0}  
.social_btn{margin-top:15px;margin-bottom:25px;text-align:center}.social_btn svg{fill:#EBEDF0;height:50px;width:50px;position:relative;z-index:10;padding-right:10px}#foot-design{clear:both;max-width:100%;display:block;position:relative;margin:0% auto 0;justify-content:center;z-index:2;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#tb-foot-icon{position:absolute;margin:0 auto;width:100%;display:block;bottom:calc(100% - 25px)}.footer-foot-logo{background:#2cd4d9;display:inline-flex;flex-wrap:wrap;padding:15px;text-align:center;border-radius:50%;position:relative}.footer-foot-logo:before{content:"";border-radius:50%;position:absolute;margin:7px;top:0;bottom:0;left:0;right:0;background-color:#1D6D98;background-image:linear-gradient(50deg,#0D0557 0%,#1D6D98 20%,#2CD4D9 100%)!important;}.footer-foot-logo svg{fill:#EBEDF0;height:110px;width:110px;position:relative;z-index:10}.footer-foot-design{clear:both;overflow:hidden;position:absolute;left:0;bottom:100%;width:100%;margin-bottom:-2px;direction:ltr}.footer-foot-design[data-negative="false"].footer-foot-design-bottom,.footer-foot-design[data-negative="true"].footer-foot-design-top{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.footer-foot-design svg{z-index:-1;display:block;position:relative;left:50%!important;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}svg:not(:root){overflow:hidden}.footer-foot-design .footer-foot-design-fill{fill:#2cd4d9;width:calc(100% + 2.5px);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}.footer-foot-design-bottom svg{fill:#2cd4d9;width:calc(130% + 2.5px);height:125px}#tb-subscribe{position:relative;display:block;overflow:hidden;width:100%;text-align:center;padding:100px 0 50px;margin:0 auto;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:10}.tb-subsfield{max-width:680px;margin:0 auto;text-align:center;padding:0 15px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#subscribe-limit,.subs-field,.subs-form{border-radius:99em;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.subs-form{clear:both;display:block;margin:0 auto;padding:0;position:relative;float:left;width:100%}input.subs-field[type="text"]{color:#3a7bd5;border:0!important;outline:none!important;font-size:108%}.subs-field{background-color:#1D6D98;margin:0 auto;padding:0 15px;height:65px;line-height:65px;width:100%;outline:none;text-align:left}.subs-field[type="text"]:focus{border:0;color:#EBEDF0}input.subs-field::placeholder{color:#EBEDF0;font-weight:400}.subs-button{cursor:pointer;border-radius:99em;font-weight:400;padding:0;height:65px;line-height:65px;border:0!important;transition:all 0.25s;margin:0 auto;text-align:center;display:block;background-color:#1D6D98;background-image:linear-gradient(50deg,#0D0557 0%,#1D6D98 20%,#2CD4D9 100%)!important;color:#EBEDF0;position:absolute;right:0;top:0;padding:0;text-transform:uppercase;font-size:150%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:65px;outline:none}.subs-button .icons{fill:#EBEDF0;vertical-align:middle;height:35px;width:35px}.subs-button:hover{background-color:#1D6D98;background-image:linear-gradient(50deg,#2CD4D9 0%,#1D6D98 80%,#0D0557 100%)!important}.footer-foot-logo svg:hover{cursor:pointer;animation: shakeme 0.82s cubic-bezier(.36,.07,.19,.97) both;transform: translate3d(0, 0, 0);perspective: 1000px;}  
/* Circles */  
.circles{pointer-events:none;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;margin:0}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:rgba(255,255,255,0.07);animation:animate 30s linear infinite;bottom:-150px;z-index:0}.circles li:nth-child(1){left:25%;width:60px;height:60px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:10px;height:10px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:10px;height:10px;animation-delay:4s}.circles li:nth-child(4){left:35%;width:130px;height:130px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:10px;height:10px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:90px;height:90px;animation-delay:3s}.circles li:nth-child(7){left:55%;width:60px;height:60px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:15px;height:15px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:80%;width:5px;height:5px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(10){left:85%;width:130px;height:130px;animation-delay:10s;animation-duration:11s}.circles li:nth-child(11){left:10%;width:100px;height:100px;animation-delay:22s;animation-duration:11s}.circles li:nth-child(12){left:3%;width:50px;height:50px;animation-delay:10s;animation-duration:30s}

Adding Animation Effects

I've added some animation effects to the design. The first one is "shakeme" animation, which makes elements to vibrate on touch and second is "animate" animation, which makes box elements to rise up.

/* Keyframes Animation */
@-webkit-keyframes shakeme{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-2px,0,0)}40%,60%{transform:translate3d(2px,0,0)}}
@keyframes shakeme{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-2px,0,0)}40%,60%{transform:translate3d(2px,0,0)}}
@-webkit-keyframes animate{0%{transform:translateY(0) rotate(0deg);opacity:1;border-radius:0}100%{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}
@keyframes animate{0%{transform:translateY(0) rotate(0deg);opacity:1;border-radius:0}100%{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}

Adding HTML Section

This is where we call our hero footer classes and tags. Add the following code in place of your existing footer tag. And change the feedburner and social ids accordingly.

<footer class='footer'>
      <ul class='circles'><li/><li/><li/><li/><li/><li/><li/><li/><li/><li/><li/><li/></ul>
      <div id='foot-design'>
<div class='footer-foot-design footer-foot-design-bottom' data-negative='false'>
<svg preserveAspectRatio='none'><use xlink:href='#svgmain-foot'/></svg></div>
<center><div id='tb-foot-icon'>
<div class='footer-shape footer-foot-logo' data-negative='false'>
<svg height='24' width='24'><use xlink:href='#logo-foot'/></svg></div></div></center></div>
<div id='tb-subscribe'>
<div class='tb-subsfield'>
<form action='//feedburner.google.com/fb/a/mailverify?uri=twistblogg' class='subs-form' method='post' onsubmit='window.open (&apos;//feedburner.google.com/fb/a/mailverify?uri=twistblogg&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='twistblogg'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subs-field' name='email' placeholder='Receive Newsletter by Email' required='required' type='text'/><button class='subs-button' title='Subscribe' type='submit'><svg class='icons icon-Send'><use xlink:href='#btn-foot'/></svg>
</button></form>
</div>
</div><div class='social_btn'>
<a aria-label='Twitter' href='https://twitter.com/twistblogg' itemprop='url' rel='noopener' target='_blank' title='Twitter'>
<svg><use xlink:href='#twt-foot'/></svg></a>
<a aria-label='Medium' href='https://www.medium.com/@twistblogg' itemprop='url' rel='noopener' target='_blank' title='Medium'>
<svg><use xlink:href='#med-foot'/></svg></a>
<a aria-label='Pinterest' href='https://www.pinterest.com/twistblogg' itemprop='url' rel='noopener' target='_blank' title='Pinterest'>
<svg><use xlink:href='#pin-foot'/></svg></a>
<a aria-label='Facebook' href='https://www.facebook.com/twistblogg' itemprop='url' rel='noopener' target='_blank' title='Facebook'>
<svg><use xlink:href='#fb-foot'/></svg></a></div>  
          <div class='credit main-container'>
            <p class='credit-content'>Copyright &#169; 2019 - <span id='copyrightYear'><script>/*<![CDATA[*/ var d = new Date(); var n = d.getFullYear(); document.getElementById('copyrightYear').innerHTML = n; /*]]>*/</script></span>  <a expr:href='data:blog.homepageUrl'>TwistBlogg</a> - Protected By <a class='dmca-badge' href='//www.dmca.com/Protection/Status.aspx?id=REPLACE_ME' rel='nofollow noopener noreferrer external' target='_blank' title='DMCA.com Protection Status'> DMCA</a> <script type='text/javascript'>//<![CDATA[ 
(function () {document.addEventListener("DOMContentLoaded", function () {var e = "dmca-badge";var t = "refurl";var n = document.querySelectorAll('a.'+e);if (n[0].getAttribute("href").indexOf("refurl") < 0) {for (var r = 0; r < n.length; r++) {var i = n[r];i.href = i.href + (i.href.indexOf("?") === -1 ? "?" : "&") + t + "=" + document.location}}}, false)})()
//]]></script> 
            </p>
          </div>
        </footer> 

Adding SVG Icons

I've separated SVG elements from main HTML file. You can embed them directly to HTML section or simply place them somewhere (maybe above footer tag).

<svg hidden='hidden' style='width:0; height:0;'>
<defs>
<linearGradient id='MyGradient' x1='0' x2='0' y1='1' y2='0'><stop offset='0.00' stop-color='#0d0557'></stop><stop offset='0.20' stop-color='#110ec4'></stop><stop offset='1.00' stop-color='#2cd4d9'></stop></linearGradient>
<symbol id='svgmain-foot' preserveAspectRatio='none' viewBox='0 0 1000 100'><path class='foot-design1 footer-foot-design-fill' d='M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z' opacity='0.33'></path>
<path class='foot-design2 footer-foot-design-fill' d='M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z' opacity='0.66'></path>
<path class='foot-design3 footer-foot-design-fill' d='M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z'></path></symbol>
<symbol id='logo-foot' viewBox='0 0 24 24'><g><ellipse cx='6.5' cy='14.5' rx='2.5' ry='5.5'></ellipse><ellipse cx='17.5' cy='14.5' rx='2.5' ry='5.5'></ellipse><path d='m12 22a6 6 0 0 1 -6-6v-6a6 6 0 0 1 6-6 6 6 0 0 1 6 6v6a6 6 0 0 1 -6 6z'></path><path d='m18 10-5-3 4.1464-4.1464a.5.5 0 0 1 .8536.3535z'></path><path d='m6 10 4.6598-3.2496-3.8029-3.8768a.5.5 0 0 0 -.8569.3501z'></path></g><circle cx='9.25' cy='9.25' fill='url(#MyGradient)' fill-opacity='0.8' r='2'></circle><circle cx='9.25' cy='9.25' r='.75'></circle><circle cx='14.75' cy='9.25' fill='url(#MyGradient)' fill-opacity='0.8' r='2'></circle><circle cx='14.75' cy='9.25' r='.75'></circle><path d='m12 14-1-2c0-.3595 2-.3595 2 0z' fill='url(#MyGradient)' fill-opacity='0.8'></path></symbol>
<symbol id='btn-foot' viewBox='0 0 24 24'><path d='M13 17H17V14L22 18.5L17 23V20H13V17M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H11V18H4V8L12 13L20 8V14H22V6A2 2 0 0 0 20 4M12 11L4 6H20Z'></path></symbol>
<symbol id='twt-foot' viewBox='0 0 32 32'><path d='M28.77,8.11a.87.87,0,0,0-.23-.2A4.69,4.69,0,0,0,29,6.54a1,1,0,0,0-.44-1,1,1,0,0,0-1.1,0,6.42,6.42,0,0,1-2.28.92,6.21,6.21,0,0,0-7.08-1A6.07,6.07,0,0,0,15,12.2a1,1,0,0,0,2-.4A4.08,4.08,0,0,1,19,7.28a4.24,4.24,0,0,1,5.12,1,1,1,0,0,0,.88.28l.25,0a1,1,0,0,0,.34,1.62,1,1,0,0,0-.36.88,13.07,13.07,0,0,1-4.89,11.24A12.75,12.75,0,0,1,7.69,24.61a9.06,9.06,0,0,0,4.54-2.18,1,1,0,0,0,.15-1.09,1,1,0,0,0-.93-.57,4,4,0,0,1-3-1.39,3.63,3.63,0,0,0,1-.35A1,1,0,0,0,10,18a1,1,0,0,0-.76-.84,4.42,4.42,0,0,1-3-2.48c.24,0,.48.05.74.06a1,1,0,0,0,1-.62A1,1,0,0,0,7.67,13C6,11.48,5.59,9.85,5.83,8.7a13.88,13.88,0,0,0,7,4,1,1,0,1,0,.38-2A12.1,12.1,0,0,1,6.39,6.31a1,1,0,0,0-.75-.38,1,1,0,0,0-.78.33,5.34,5.34,0,0,0-.31,6l-.09,0a1,1,0,0,0-.52.81,5.84,5.84,0,0,0,1.95,4.47,1,1,0,0,0-.18,1,6.63,6.63,0,0,0,3.18,3.57A13.89,13.89,0,0,1,4,23a1,1,0,0,0-.5,1.86A16.84,16.84,0,0,0,12,27.35a15.16,15.16,0,0,0,9.6-3.57,15.12,15.12,0,0,0,5.69-12.42,4.62,4.62,0,0,0,1.62-2.25A1,1,0,0,0,28.77,8.11Z'></path></symbol>
<symbol id='med-foot' viewBox='0 0 32 32'><path d='M29,26.5H19.37a1,1,0,0,1-.92-.62,1,1,0,0,1,.22-1.09l1.63-1.61V18L16.39,25a1,1,0,0,1-.87.52h0a1,1,0,0,1-.87-.52L8.81,14.25v7l3.56,3.51a1,1,0,0,1,.22,1.09,1,1,0,0,1-.92.62H3a1,1,0,0,1-.93-.62,1,1,0,0,1,.23-1.09l1.89-1.85a1,1,0,0,1,1.4,1.42l-.14.14H9.23L7.11,22.41a1,1,0,0,1-.3-.71v-11L3.26,7.21A1,1,0,0,1,3,6.12,1,1,0,0,1,4,5.5h6.71a1,1,0,0,1,.87.51l4.94,8.88L21.38,6a1,1,0,0,1,.88-.52H29a1,1,0,0,1,.93.62,1,1,0,0,1-.23,1.09L28.07,8.82V23.18l1.63,1.61a1,1,0,0,1,.23,1.09A1,1,0,0,1,29,26.5Zm-7.19-2h4.75l-.19-.19a1,1,0,0,1-.3-.71V8.4a1,1,0,0,1,.3-.71l.19-.19H22.85l-5.49,9.93a1,1,0,0,1-.88.52h0a1,1,0,0,1-.87-.51L10.08,7.5H6.4L8.5,9.57a1.12,1.12,0,0,1,.19.24h0v0l6.83,12.64,4.89-8.85a1,1,0,0,1,1.88.48v9.5a1,1,0,0,1-.3.71Z'></path></symbol>
<symbol id='fb-foot' viewBox='0 0 32 32'><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5h8a1,1,0,0,0,1-1V20a1,1,0,0,0-1-1H15V17h1a1,1,0,0,0,1-1V12.5A2.5,2.5,0,0,1,19.5,10H22v2H21a2,2,0,0,0-2,2v2a1,1,0,0,0,1,1h1.72l-.5,2H20a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V21h1a1,1,0,0,0,1-.76l1-4a1,1,0,0,0-.18-.86A1,1,0,0,0,23,15H21V14h2a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19.5A4.51,4.51,0,0,0,15,12.5V15H14a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h1v6H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3V24a3,3,0,0,1-3,3H20a1,1,0,0,0,0,2h4a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Z'></path></symbol>
<symbol id='pin-foot' viewBox='0 0 32 32'><path d='M16.5,3C7.42,3,5,9.69,5,13.64a6.3,6.3,0,0,0,2.62,5.42,1.37,1.37,0,0,0,1.77-.24c.44-.43,1.55-2.18.93-3.12a4.4,4.4,0,0,1-.51-2.06c0-2.78,1.14-6.1,6.55-6.1a4.53,4.53,0,0,1,3.28,1,5.3,5.3,0,0,1,1.18,3.89c0,2.55-1.4,6.25-3.52,6.25A1.12,1.12,0,0,1,16.22,18a11.37,11.37,0,0,1,.63-3c.56-1.89,1.08-3.66.54-4.8C16.72,8.84,14.5,8.77,13.53,9a3.05,3.05,0,0,0-2,1.62,7.52,7.52,0,0,0-.17,6,1,1,0,1,0,1.87-.7,5.56,5.56,0,0,1,0-4.34,1.15,1.15,0,0,1,.7-.63,2.8,2.8,0,0,1,1.66.19c.21.45-.35,2.36-.65,3.38a10.78,10.78,0,0,0-.69,3.79,3,3,0,0,0,3.06,2.44c3.56,0,5.49-4.78,5.52-8.23a7.15,7.15,0,0,0-1.76-5.31,6.41,6.41,0,0,0-4.7-1.65c-7.93,0-8.55,6.2-8.55,8.1a6.4,6.4,0,0,0,.67,2.85,3.69,3.69,0,0,1-.23.51A4.51,4.51,0,0,1,7,13.64C7,12.76,7.27,5,16.5,5c2.19,0,7.86,1.42,7.86,7.92,0,5.1-4.07,8.78-6.81,8.78A3.54,3.54,0,0,1,15,20.63a1,1,0,0,0-1.7.27L12.88,22C11.8,24.78,11.5,25.56,11,26.13a6.88,6.88,0,0,1-.07-1,29.6,29.6,0,0,1,1.33-5.19l.07-.23a1,1,0,1,0-1.9-.6l-.08.24a30.7,30.7,0,0,0-1.41,5.6,18.16,18.16,0,0,0,.36,3.27,1,1,0,0,0,.63.75.84.84,0,0,0,.35.07,1,1,0,0,0,.61-.21l.49-.37c1.69-1.28,1.8-1.53,3.36-5.53a5.45,5.45,0,0,0,2.86.81c4,0,8.81-4.81,8.81-10.78C26.36,5.64,20.46,3,16.5,3Z'></path></symbol>
</defs></svg>

That's all. You've a well designed and animated hero footer in blogspot blog. Feel free to recreate and redesign the current one. In the next article, I'll be sharing how to add animated hero header in blogger. Stay tuned.