Cara membuat efek Gelombang Seperti air laut di Blogspot
Assalamualaikum wr.wb, Bertemu kembali bersama Ora bisa turu ! , 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 :
- Cara membuat efek lampu bolak balik header Blog / logo Blogspot
- Cara Mudah Membuat Efek Postingan Populer Animasi Versi gulir Kebawah Otomatis [ KODE HTML ]
- Cara menambahkan efek loading..
Blog Ora bisa turu ! 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 orabisaturu.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>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 .
