Cara Membuat Footer efek Gelombang Di Template Viomagz Terbaru     Edit

Cara membuat Footer Berefek Gelombang
Cara terbaru membuat tampilan footer kita menjadi sangat keren dengan tampilan footer gelombang pada template viomagz.

Footer efek gelombang di template Viomagz
Cara mendesain tampilan footer template viomagz agar menjadi sangat lah keren dan responsive pasti nya kan, dengan memasang kode css baru ini pada template viomagz kalian maka tampilan footer kalian akan sangat keren, dan terlihat seperti tampilan gelombang warna biru laut bisa kalian edit sendiri warna nya.

Cara memasang css footer gelombang pada blog viomagz

  • Login pada blogger kalian
  • Masuk ke pengeditan template
  • Lalu kalian cari kode <div id='wrapper'>  
  • Trus hapus sampai kode tag  </div>
  • Kalau sudah di hapus di ganti dengan kode css di bawah ini
<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>

Bilah sudah di ganti sekarang lanjut ke kode ]]></b:skin> dan paste kan kode di bawah ini tepat di atas kode ]]></b:skin>

/* Footer Gelombang Briomagz.blogspot.com */#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:#1a73e8;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}}#footer-navmenu{background:#1a73e8;padding:25px 0;font:$(navmenufooter.font);color:$(navmenufooter.color)}#footer-container{background:#1a73e8;padding:20px 5px;overflow:hidden;color:$(footer.color);font-size:12px;text-align:center;border-top:2px solid #1559b38f}

Lalu Tinggal Save Template
Footer Template Viomagz Semua versi
Cara memasang kode css footer pada template viomagz pun sudah berhasil sekarang dan udah bisa kalian lihat hasil dari footer nya, dengan tampilan footer gelombang pada blog bakal bikin blog tambah keren dan sangatlah responsive.

Responsive & Mobile Friendly
Tampilan footer ini juga sangat lah ringan dan responsive dengan template viomagz, yang bakal bikin para pengujung suka datang pada blog kita sekarang ini. setiap artikel yang saya bagikan kebanyakan adalah hasil request para pengujung blog sendiri.

Order mudah! via WhatsApp.

Instant Checkout dengan Contact Form WhatsApp.

Online 1x24 Jam!

Apapun pesananmu, CS (Customer Service) kami akan dengan senang hati untuk melayani.. :)

Kualitas Terbaik!

Kami memastikan, produk yang kami kirim sesuai dengan Ekspektasi pembeli.
1 Butuh bantuan?

×


×

Cara Membuat Footer efek Gelombang Di Template Viomagz Terbaru


*Sub-Total :
*%20

* Belum termasuk Ongkos kirim


Kirim