TwistBlogg
  • Home
  • Blog
  • About
  • Contact
Follow on TwitterFollow on FacebookFollow on LinkedinFollow on Github
TwistBlogg
TwistBlogg

How to Create Beautiful & Animated Hero Footer in Blogger

Many blogger templates lack professional and creative footer designs. In this article, we are going to design a beautiful and animated hero footer.

Invictus
- 1 min read

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.

NOTE : Recently, we've shared a tutorial on how to add animated and creative HERO-HEADER in blogger.

And here's the demo of what our hero footer looks like. There'll 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.

main.css
/* 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.

animation.css
/* 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.

main.html
<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.html
<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.

Mail ThisShare on FacebookTweet on TwitterFollow on Linkedin

Sign up for The Best Bits

Get all of our posts, straight to your email. Opt-out any time.

Not into email list things, but still want to read more?

Follow us on Twitter

© 2019 - 2020 TwistBlogg / All Rights Reserved.

Follow on TwitterFollow on TelegramFollow on FacebookFollow on GithubFollow on PinterestFollow on LinkedinFollow on MixFollow on Instagram