Skip to main content

Cara Membuat Efek Gelombang di Footer Blog Termudah

Cara Membuat Efek Gelombang di Footer Blog Termudah

Panduanajib.com - Dikesempatan kali ini saya akan bagikan sebuah tutorial blogger yang sepertinya memang masih cukup banyak peminatnya. Tutorial kali ini berjudul Cara Membuat Efek Gelombang di Footer Blog Termudah. Nah untuk Anda yang ingin ada efek gelombang di blog, silahkan ikuti tutorial yang ada pada artikel ini dengan seksama ya.

Oh iya yang perlu menjadi catatan disini adalah, memasang efek gelombang di blog yang saya bagikan ini tidak akan membuat loading blog Anda berat. Sebab kode yang akan kita pasang ini sama sekali tidak mengandung kode Javascript dan Library.

Untuk menerapkan efek gelombang pada blogger yang akan saya bagikan kali ini hanya akan menggunakan kode CSS dan juga HTML saja. Maka dari itulah saya berani katakan, kode ini tidak akan memberikan pengaruh sama sekali terhadap loading blog Anda.

Langsung saja ya kita masuk ke tutorialnya.

Cara Membuat Efek Gelombang di Blogger

1. Buka Blog Anda.
2. Pilih Tema kemudian pilih lagi Edit HTML.
3. Kemudian silahkan ctrl+f dan cari kode ]]></b:skin>. Letakan kode dibawah ini tepat diatasnya.

/* 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. Sekarang cari kode <!-- footer nav menu -->. Jika sudah ketemu silahkan salin kode dibawah dan pastekan 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 Tema, selesai.

Baca Juga:
Bagaimana sangat mudah bukan Cara Membuat Efek Gelombang di Footer Blog. Semoga bermanfaat ya. Salam Blogger Indonesia.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar