Cara Pasang Efek Gelombang di LinkMagz

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.