Cara membuat efek Gelombang Seperti air laut di Blogspot

Assalamualaikum wr.wb, Seperti biasa di blog ini, saya akan memberikan "tutorial“ cara menambahkan efek di tampilan Halaman blogger . Artikel Sebelumnya saya sudah membahas tentang seputar efek untuk Blog seperti :

Hanya ingin sekedar sharing mendesain Template Blogger khususnya untuk [ pemula ] yang ingin belajar mempercantik tampilan Blog-nya !.

Cara Buat efek gelombang seperti air laut di Blog atau website.

Efek gelombang atau navigasi ini akan tampil di bawah navigasi Blog , cara penempatan kode HTML atau JavaScript-nya sangatlah mudah.

Penjelasan efek gelombang yang akan saya bahas , efek [ Coding ] kode html gelombang air laut di Blog tampil untuk percantik navigasi.

nanti akan saya jelaskan cara mudah cara meletakkan kode Script-nya di artikel ini .

Cara menambahkan Efek gelombang Navigasi bawah

Cara mudah membuat efek navigasi Gelombang seperti air laut di bawah halaman Blog atau Blogspot.

1. Login Dashboard Blogger

2. Buka Navigasi Blogger

3. Tema / template blogger

4. Tekan Scroll tanda panah kebawah

5. Pilih - Edit HTML

6. Cari kode dalam tema Blogger seperti berikut

</body>

kalo Kode tersebut sudah ketemu, Copy kode di berikut ini

<!--Gelombang air laut by tekno.ayokerja.xyz -->
  <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>

Letakkan kode tepat di atas kode di bawah ini

</body>

7. Save tema / simpan template Blogger

8. Tinjau hasilnya , selesai.

Bila ingin ubah model efek gelombangnya anda bisa ubah kode icon Svg-nya , kode icon Svg seperti berikut

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