Cara membuat gelombang di footer viomagz

Cara membuat gelombang di footer viomagz - Tampilan template merupakan hal yang yang sangat di perhatikan oleh para pengelola website, terutama para blogger yang ingin merubah tampilan template blognya supaya tampil beda dengan desain blog oleh orang lain.

Salah satu bagian template yang menjadi sorotan yaitu bagian menu paling bawah, menu ini memang sangat jarang sekali mengalami perubahan dan tampilannya pun terkadang biasa biasa saja. Pada kesempatan kali ini saya akan memberikan tutorial Cara membuat gelombang di footer viomagz.

gelombang di footer merupakan tampilan yang sangat unik membuat tampilan template anda lebih menarik dan memanjakan mata pengunjung serta tampilan inipun sangat ringan, jadi tidak memberatkan loading blog anda.

Cara membuat gelombang di footer viomagz

• Pertama, Anda login blogger
• Buka bagian tema lalu klik edit HTML
• Lalu cari kode <div id='footer-widget-container'> 

hapus kode tersebut hingga bagian penutup </div>

Setelah menghapus kode tersebut, lalu pastekan kode di bawah ini tepat di bagian kode yang anda hapus tadi  ataupun bisa di atas <footer> sesuaikan dengan template anda.

<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>

kemudian copy CSS di bawah ini di atas ]]><b:skin> 

/* Footer Gelombang */#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}

Dan terakhir save. 

Sekian Cara membuat gelombang di footer viomagz.