Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Efek Wave di Footer Blog

Effek wave viomagz

Ikhsancoegraphy - Efek wave atau biasa disebut dengan efek gelombang ini memiliki tampilan yang menarik bagi anda yang melihatnya. Dengan memasang efek wave ini, tampilan blog kalian pasti menjadi keren. Karena tampilan gelombang yang di hasilkan berjalan terus dan tidak berhenti.

Selain menambah keren, tentunya menjadikan blog kita menjadi beda dari yang lain. Tapi ada yang nanya, apakah mempengaruhi loading blog menjadi berat karena make efek wave ini? tentunya tidak. Kalau gak percaya coba bandingin speed blog sebelum memasang effek ini sama setelah memasangnya.

Oke... Langsung saja menuju tutorialnya, cukup gampang kok memasang animasi gelombang ini pada blog.

Cara membuat efek animasi gelombang ( wave ) di footer blog

  1. Kalian login ke akun bloger terlebih dahulu.
  2. Kemudian pilih tema, lalu masuk menu edit html.
  3. Kalau sudah login, langkah yang harus kalian lakukan selanjutnya adalah memasang scrip di bawah ini tepat di atas kode ]]></b:skin>
    /* Footer Wave IkhsanCoegraphy */ #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 IkhsanCoegraphy */ .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. Kalau sudah sekarang kalian cari kode <! - - footer nav menu - - !>

    Paste kode di bawah ini dan tempatkan di atas / sebelum kode tadi.

    
    <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. Kemudian tekan simpan.
  6. Selesai!

Akhir kata

Setelah itu coba kalian lihat effek wave tersebut di footer blog kalian, apakah sudah terpasang atau belum atau bahkan error. Kalau error coba kalian teliti lagi, biasanya salah menempatkan kode nya. Gimana? Cukup mudah bukan cara membuat Effek Gelombang atau wave di footer blogger. Cukup sekian terima kasih.