Cara Membuat Footer Efek Gelombang di Template Viomagz

Cara Membuat Footer Efek Gelombang di Template Viomagz Tampilan adalah hal yang selalu terpikirkan oleh para blogger untuk membuat lebih menarik lagi tampilan blog nya agar dapat menarik visitor.

Salah satunya dengan cara membuat menarik footer Cara Membuat Footer Efek Gelombang di Template Viomagz ini akan membuat tampilan di blogger kita terlihat lebih bagus tampilan nya.

Baik lah tanpa lama lama lagi mari simak Cara Membuat Footer Efek Gelombang di Template Viomagz yang sangat keren caranya dibawah ini.

Cara Membuat Footer Efek Gelombang di Template Viomagz

1. Masuk ke Bloggger

2. Kemudia ke Dashboard Tema > Edit Tema

3 kemudian kamu cari kode ]]</:skin> kemudian copy kode dibawah ini tepat di atas ]]</:skin> 

#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:100px;}.footer-fancy-shape .footer-fancy-shape-fill{fill:#7bbefa;width:calc(100% + 2.5px);transform:rotateY(0);-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:100px;}}@media screen and (max-width:768px){.footer-fancy-shape-bottom svg{height:150px;}}@media screen and (max-width:480px){.footer-fancy-shape-bottom svg{height:80px;}}

Dan lihat CSS yang saya blok warna biru di atas, itu adalah warna dari Gelombang Wave nya. Silahkan sobat ganti dengan kode warna sesuai keinginan sobat.

4. Template yang saya gunakan adalah Template Viomagz jadi penempatan nya saya taruh di atas kode <div id='footer-container'> jika kamu memakai template selain viomagz kamu sesuaikan saja karena pada dasar nya tetep penempatan nya diatas <footer> ya gaes.

<!--Gelombang Wave by nikamicode.blogspot.com -->
  <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 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 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'/>
  </svg>
  </section>
  <div id='bf-fancy-icon'>
  <div class='footer-shape footer-fancy-logo' data-negative='false'>
  </div>
  </div>
  </div>

5. Kemudia kamu save dan lihat hasilnya taraa keren bukan hehe 

Oke baiklah itu artikel tentang Cara Membuat Footer Efek Gelombang di Template Viomagz yang tentunya keren.

Related Posts