Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Pasang Efek Gelombang di LinkMagz

Cara Pasang Animasi Gelombang di Blogger

Kali ini Oom akan bagikan trik yang sederhana untuk mempercantik blog kamu, khususnya bagi para pengguna template LinkMagz. Yaitu bagaimana cara pasang efek gelombang (wave effect) di bagian footer seperti yang ada di bagian bawah blog ini.

Perlu diperhatikan, efek gelombang ini hanya permainan CSS saja, tidak dibuat animasi atau bergerak. Jadi sangat ringan sumber daya dan tidak terlalu membebani kinerja situs secara keseluruhan.

Sumbernya sih dari situs inwepo.co yang saya terapkan di template blogger LinkMagz. Kenapa LinkMagz? Karena itu template yang Oom pakai sekarang 😄 Buat pengguna template lain cukup disesuaikan saja.

Cara pasang efek gelombang di bagian footer Blogger ini sangat mudah. Bahkan kamu yang awam atau gaptek sekalipun dijamin pasti bisa melakukannya. Yuk, kita coba sama-sama...

Login ke dashboard Blogger.com

Masuk ke menu Theme > Edit HTML

Tambahkan CSS berikut sebelum ]]></b:skin> :

body.darkmode .footer-fancy-shape .footer-fancy-shape-fill{fill: #213040;transition: all .5s ease;}
#fancy-shape {clear: both; max-width: 100%; display: block; position: relative; margin: 15% auto 0; justify-content: center; z-index: 2; box-sizing: border-box;}
.footer-fancy-shape {clear: both; overflow: hidden; position: absolute; left: 0; bottom: 100%; width: 100%; margin-bottom: -2px; direction: ltr;}
.footer-fancy-shape[data-negative=false].footer-fancy-shape-bottom, .footer-fancy-shape[data-negative=true].footer-fancy-shape-top {transform: rotate(180deg);}
@media screen and (max-width:992px){.footer-fancy-shape-bottom svg {height: 105px;}}
.footer-fancy-shape-bottom svg {width: calc(130% + 2.5px); height: 125px;}
.footer-fancy-shape .footer-fancy-shape-fill {fill:$(footer.bg2); width: calc(100% + 2.5px); transform: rotateY(0deg); -webkit-transform-origin: center; transform-origin: center; transition: all .5s ease;}
.footer-fancy-shape svg {z-index: -1; display: block; position: relative; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
@media screen and (max-width: 992px) {.footer-fancy-shape-bottom svg {height: 105px;}}
@media screen and (max-width: 768px) {.footer-fancy-shape-bottom svg {height: 85px;}}
@media screen and (max-width: 480px) {.footer-fancy-shape-bottom svg {height: 55px;}}

lalu tempatkan kode berikut tepat di atas atau sebelum <footer id='footer-outer'> :

<div id='fancy-shape'>
<section class='footer-fancy-shape footer-fancy-shape-bottom' data-negative='false'>
<svg preserveAspectRatio='none' viewBox='0 0 1000 100' xmlns='http://www.w3.org/2000/svg'>
<path class='fancy-shape1 footer-fancy-shape-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='fancy-shape2 footer-fancy-shape-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='fancy-shape3 footer-fancy-shape-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>
</svg>
</section>
<div id='bf-fancy-icon'>
<div class='footer-shape footer-fancy-logo' data-negative='false'>
</div>
</div>
</div>

Simpan tema lalu lihat hasilnya.

Mudah, bukan? Tentu saja kamu bisa saja memodifikasi jumlah gelombang atau bentuknya. Tapi kamu harus paham CSS terlebih dahulu.

Tambahan:


Disini Oom menggunakan warna background footer sebagai warna default. Untuk mengubahnya, perhatikan pada kode yang ditandai di atas:

fill:$(footer.bg2)

Kamu bisa menggantinya dengan warna lain yang kamu kehendaki. Misalnya diubah menjadi warna merah, maka menjadi:

fill:#FF0000

Kalau kamu masih merasa kesulitan atau gagal dalam menerapkan script di atas, tinggalkan pesan di kolom komentar.

11 komentar untuk "Cara Pasang Efek Gelombang di LinkMagz"

  1. punyaku malah ada garisnya bang

    BalasHapus
  2. punyaku k9k kayak ada skatnya gitu ya om, solusi dong:)

    BalasHapus
    Balasan
    1. Cantumkan link blognya coba saya bantu cek

      Hapus
  3. Salam dari purwokerto min, mo nanya nih, cara bikin menu pakai font awesome biar rapi kek di blog ini gimana min?
    Kalau bisa bikinin tutorialnya.

    Terimakasih..

    BalasHapus
    Balasan
    1. Itu bukan Font Awesome, tapi SVG icon agar lebih ringan. Cara pasang bisa dicek di artikel saya yg membahas tentang SVG icon.

      Hapus
  4. agar ombaknya jalan bagaimana ya om, lagi nyari caranya nih.

    BalasHapus
  5. efek gelombang nya emang gak gerak ya om?

    BalasHapus
  6. Mas, kalau misalkan headernya mau dibuat kyk blog ini gimana mas, jadi untuk verai hp kan icon media sosialnya berada di samping nama blognya

    BalasHapus