Cara membuat efek Gelombang Seperti air laut di Blogspot
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>
<!--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'/>
penutup
Begitulah cara membuat "efek gelombang air laut " tampil seperti gelombang di navigasi halaman bawah blog.
Semoga "bermanfaat .