Cara Terbaru Membuat Efek Gelombang Aktif Di Bagian Footer Blog Dengan Mudah

==Iklan Dipate Disini===

Lapakinfo.net - Pada kesempatan kali ini saya akan berbagi tutorial yang sekiranya sangat di perlukan buat para desain blogger yaitu Cara Terbaru Membuat Efek Gelombang Aktif Di Bagian Footer Blog Dengan Mudah, tutorial ini sengaja saya buat karena sudah banyak para desainer yang menggunakan efek gelombang pada blog atau template yang di share secara gratis maupun paid. Dengan mempunyai tampilan blog yang cantik dan menarik sudah tentu impian para blogger, karena dengan memiliki tampilan yang cantik dan menarik sudah menjadi nilai lebih bagi blog kita dan tentu yang pasti ialah memberikan rasa nyaman terhadap pengunjung atau pembaca.

Dengan memasang efek gelombang pada blog kalian tentu tidak memberatkan blog kalian saat proses pemuatan karena di dalam pembuatannya tidak menggunakan Javascript atau Library, cara pembuatannya pun sangat mudah dilakukan kalian hanya perlu menambahkan beberapa CSS dan HTML maka efek gelombangnya sudah jadi. Nah, buat kalian yang mencoba memasang atau membuat efek gelombang pada blog kalian bisa ikuti tutorialnya di bawah ini.

Cara Terbaru Membuat Efek Gelombang Di Bagian Footer Blog Dengan Mudah

1. Buka Blog kalian.

2. Pilih Tema dan pilih Edit HTML.
3. Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>.

 /* Footer Wave Animations by Lapakinfo.net */
#footer-navmenu .wave-animation{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);bottom:initial;top:0;height:5em}#footer-navmenu{padding-top:50px;background:linear-gradient(to right, #654ea3, #eaafc8);position:relative}#footer-navmenu-container{max-width:1000px;margin:0 auto;text-align:center}#footer-navmenu ul{list-style:none;margin:0}#footer-navmenu ul li{display:inline-block;margin:6px 0}#footer-navmenu ul li:last-child::after{content:""}#footer-container {background:linear-gradient(to right, #654ea3, #eaafc8);}

/* Wave Animation */
.wave-animation{display:block;width:100%;height:8em;max-height:100vh;margin:0;position:absolute;bottom:-10px}.wave-bg > use{-webkit-animation:move-forever 20s linear infinite;animation:move-forever 20s linear infinite}.wave-bg > use:nth-child(1){animation-delay:-2s;fill:rgba(232, 174, 199, 0.58);}.wave-bg > use:nth-child(2){animation-delay:-2s;animation-duration:10s;fill:rgba(232, 174, 199, 0.85);}.wave-bg > use:nth-child(3){animation-delay:-4s;animation-duration:8s}@-webkit-keyframes move-forever{0%{transform:translate(-90px,0%)}100%{transform:translate(85px,0%)}}@keyframes move-forever{0%{transform:translate(-90px,0%)}100%{transform:translate(85px,0%)}}.wave-animation{height:3em}.wave-animation{height:4em}

4. Lanjut sekarang kalian cari kode <!-- footer nav menu --> jika sudah ketemu salin dan letakan kode HTML di bawah ini tepat di atas kode tersebut.

<div id='footer-navmenu'>
<svg class='wave-animation' preserveAspectRatio='none' viewBox='0 24 150 28' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<path d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' id='gentle-wave'/>
</defs>
<g class='wave-bg'>
<use fill='rgba(242,193,78,.5)' x='50' xlink:href='#gentle-wave' y='0'/>
<use fill='rgba(242,193,78,.7)' x='50' xlink:href='#gentle-wave' y='3'/>
<use fill='#fff' x='50' xlink:href='#gentle-wave' y='6'/>
</g>
</svg>
</div>

5. Simpan template kalian dan selesai.

• Demo

Bagaimana sangat mudah bukan untuk tutorial Cara Terbaru Membuat Efek Gelombang Di Bagian Footer Blog Dengan Mudah, jika kalian masih bingung atau kesulitan dalam pembuatannya kalian bisa bertanya melalui kolom komentar yang ada di bawah ini. Semoga bermanfaat dan terimakasih atas kunjungannya.

==Iklan Dipate Disini===