Cara Mudah Pasang Efek Gelombang (Wave Effect) Pada Blog Tamplate Linkmagz

Cara Mudah Pasang Efek Gelombang (Wave Effect)

Bagi seorang blogger mempercepat loading blog tentu sangat di haruskan karna itu menyangkut SEO dan juga untuk kenyamanan user ketika berkunjung di blog kita. Tidak hanya mempercepat blog, mempercantik tampilan sebuah blog tentu juga di perlukan.

Maka dari itu kali ini admin bermaksud  berbagi trik cara memasang efek gelombang (wave effect) pada tamplate linkmagz buatan mas sugeng.id. 

Apa itu Wave Effect? 

Wave Effect adalah animasi berbentuk gelombang (laut) dengan warna gradasi yang berbentuk secara horizontal. Wafe effects / Efek gelombang biasaya dipasang pada bagian header atau footer blog sebagai pengganti warna background. 

Biasanya Wave Effect ini berbentuk animasi gelombang (laut) dengan warna gradasi yang yang bergerak secara horizontal dari kiri ke kanan atau sebaliknya. tapi kali ini admin tidak memberikan animasinya, melainkan hanya background nya saja.

Trik cara pasang efek gelombang (wave effect) ini di koremendasikan untuk pengguna tamplate Linkmagz saja ya. bagi teman-teman yang menggunakan selain tamplate linkmagz, silahkan di coba dan di sesuaikan saja. 

Bentuk tampilan efek gelombang (wave effect) yang admin bagikan ini bisa teman-teman lihat di bagian footer atau di bagian bawah blog ini. Efek gelombang ini hanya di mainkan di code CSS saja. Jadi, teman-teman tidak perlu takut dengan loading blognya. 

Trik ini admin dapatkan di salah satu blog sebelah oom.web.id. 

Walaupun admin dapatkan pada blog orang lain, Tapi tidak ada salahnya trik ini saya bagikan juga, ya kan? karna fungsi kita ngeblog itu adalah berbagi.

Menurut admin cara pasang efek gelombang di bagian footer blogger ini lumayan simple dan mudah. 

Baiklah teman-teman, silahkan simak saja langkah-langkah dibawah ini.

Cara Mudah Pasang Efek Gelombang (Wave Effect) di Footer Blog Tamplate LinkMagz

• Pertama, Silahkan login di blogger.com terlebih dahulu.
• Kedua, Masuk ke Theme > Edit HTML Kemudian tambahkan kode CSS di bawah ini 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;}}

Untuk mengubah warna default background footer, silahkan teman-teman cari dan ganti kode dibawah ini. fill:$(footer.bg2)

Misalnya teman-teman mau mengganti warna merah silahkan ganti dengan kode berikut. fill:#ff0000

Ketiga, masukkan kode di bawah ini tepat di bawah 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>

• Terakhir, klik Simpan Tema dan silahkan teman-teman lihat hasilnya. 

Itulah sedikit trik cara pasang efek gelombang (Wave Effect) di Footer Blog tamplate Linkmagz. 

Semoga artikel ini bermanfaat. 

Terima kasih