√ Cara Membuat Footer Animasi di Blogger

Cara Membuat Footer Animasi di Blogger - Banyak template blogger tidak memiliki desain footer yang profesional dan kreatif. Pada artikel ini, kita akan mendesain footer pahlawan yang indah dan animasi.

Cara Membuat Footer Animasi di Blogger

Desain situs web adalah hal pertama yang diperhatikan pengunjung. Desain yang halus dan dinamis memberikan kesan positif. Saya ingat menavigasi melalui situs web Divi Builder hanya untuk memeriksa kehebatan desainnya — semua kurva, header pahlawan, footer pahlawan, dan tata letak yang dibuat dengan indah. Apakah Anda menyukainya juga?

Jadi, apa yang diperlukan untuk mendesain situs web yang memikat pengunjung di situs Anda? Ada banyak faktor seperti tata letak, font, kombinasi warna, spasi dan sebagainya. Prioritas pertama saya adalah mendesain tata letak yang modern dan selesai dengan baik dengan bagian header, footer, dan body yang terdefinisi dan terstruktur.

Dalam tutorial ini, saya akan berfokus untuk membuat ulang bagian footer Anda saat ini dan mengajari Anda untuk menambahkan footer pahlawan animasi yang indah di tema blog .

Mari kita mulai dengan mengambil cadangan penuh dari desain saat ini .

CATATAN : Baru-baru ini, kami telah membagikan tutorial tentang cara menambahkan Cara Membuat Header Animasi di Blogger yang beranimasi dan kreatif di blogger.

Dan inilah demo seperti apa footer pahlawan kita. Akan ada efek animasi dan kotak akan bergerak ke atas juga.

Menambahkan Properti CSS Ke Blog

CSS adalah apa yang membuat struktur ramah pengguna dan bersih. Tambahkan elemen CSS berikut ke blog Anda. Juga, hapus semua elemen footer yang ada dari desain Anda saat ini.

/* 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}

Menambahkan Efek Animasi

Saya telah menambahkan beberapa efek animasi ke desain. Yang pertama adalah animasi "shakeme", yang membuat elemen bergetar saat disentuh dan kedua adalah animasi "animate", yang membuat elemen kotak naik.

/* 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%}}

Menambahkan Bagian HTML

Di sinilah kami memanggil kelas dan tag footer pahlawan kami. Tambahkan kode berikut sebagai pengganti tag footer yang ada. Dan ubah feedburner dan id sosial yang sesuai.

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

Menambahkan Ikon SVG

Saya telah memisahkan elemen SVG dari file HTML utama. Anda dapat menyematkannya langsung ke bagian HTML atau menempatkannya di suatu tempat (mungkin di atas tag footer).

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

Itu saja artikel Cara Membuat Footer Animasi di Blogger. Anda memiliki footer yang dirancang dan dianimasikan dengan baik di blog blogspot. Jangan ragu untuk membuat ulang dan mendesain ulang yang sekarang.