Cara Memasang Efek Gelombang Turun Naik kepuncak Gunung di Blog

Cara Memasang Efek Gelombang Turun Naik kepuncak Gunung di Blog

BosHJN.ID - Apa ini maksudnya? Naik-naik kepuncak gunung tinggi sekali buat tampilan blog.

Kalian bingung saya juga bingung, sebab efek ini akan membuat tampilan background template kamu jadi gaya bergelombang tanpa bergerak.

Apakah efek seperti akan memberatkan loading blog?

Saya jawab : Tidak, sebab disini kita akan menggunakan icon SVG.

Pembukaan

Buat Anda yang belum tahu, apa itu SVG bisa baca penjelasan saya diartikel sebelumnya pengertian dan cara memasang gambar format SVG di blog.

Caranya ini lumayan rumit jika dilakukan oleh orang yang awam sama jenis kode-kode wanita. walaupun masih ada cara yang lebih mudah dan simple dengan menggunakan gambar langsung.

Namun cara tersebut lumayan berat buat kecepatan blog kita nantinya.

Untuk contoh gambar tampilanya, bisa Anda lihat dibawah ini.

Cara Memasang Efek Gelombang Turun Naik kepuncak Gunung di Blog
Images by boshjn.id

Sudah paham dengan maksud saya? Background template ada efek turun naiknya, namun menggunakan warna berlapis bukan hanya fokos 1 warna saja.

Gaya ini saya dapatkan dari blog Gomsite lalu saya lihat juga template ignniplex juga menggunakan gaya ini.

Sudah lama saya menggunakan tampilan gaya bergelombang ini, baru kali ini saya bisa menulisnya yang mana tutorial ini sebelumnya diminta oleh orang bule.

Update 17/10/2020

Untuk hasil gelombang sesuai keinginan maka kamu bisa memakai generator Get Waves.
  • Buka situs Get Waves disini.
  • Silahkan kamu atur gelombang sesuai selera, mulai dari warna, posisi & model.
  • Lalu klik icon Download > Salin kode SVG yang ada dikolom.

Memasang Efek Gelombang di Background Tema Blog

Silahkan kamu salin kode cerewet dibawah ini.
<svg class='wave' height='50px' preserveAspectRatio='none' style='pointer-events: none' viewBox='0 0 1920 75' width='100%'>
<defs>
<clipPath id='a'>
<rect class='a' height='75' width='1920'/>
</clipPath>
</defs>
<g class='b'>
<path class='c' d='M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48'/>
</g>
<g class='b'>
<path class='d' d='M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10'/>
</g>
<g class='b'>
<path class='d' d='M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24'/>
</g>
<g class='b'>
<path class='d' d='M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150'/>
</g>
</svg>
Peletakan kode ini tergantung selera yang Anda inginkan, mau meletakannya diposisi mana. Yang jelas jangan meletakanya kode ini kebagian area postingan template.

Saya beri contoh peletakannya dibagian kode #footer-wrapper saja, biar tidak pusing karena gayanya bergelombang kebagian atas.

Contoh
<div id="footer-wrapper">
<svg class='wave' height='50px' preserveAspectRatio='none' style='pointer-events: none' viewBox='0 0 1920 75' width='100%'>
<defs>
<clipPath id='a'>
<rect class='a' height='75' width='1920'/>
</clipPath>
</defs>
<g class='b'>
<path class='c' d='M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48'/>
</g>
<g class='b'>
<path class='d' d='M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10'/>
</g>
<g class='b'>
<path class='d' d='M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24'/>
</g>
<g class='b'>
<path class='d' d='M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150'/>
</g>
</svg>
</div>
Salin kode CSS dibawah ini.
svg.wave{position:absolute;bottom:-1px;left:0;overflow:hidden;vertical-align:middle}.a{fill:none}.b{clip-path:url(#a)}.c,.d{fill:#f9f9fc}.d{opacity:.5;isolation:isolate}
Note: Warna yang saya beri tanda warna kuning adalah kode warna gelombang, bisa sesuaikan dengan warna background bagian body template milik kalian masing-masing.
Lalu klik " SIMPAN " untuk melihat hasilnya.

Biasanya setiap kode-kode ditemplate beda-beda, jadi kode peletakan diatas hanya sebagai contoh saja. Silahkan kamu kreasikan sendiri sesuai keinginan.

Penutup

Jika ada pertanyaan bisa tulis dikolom komentar blog ini ya, nanti akan saya bantu jawab jika kamu mengalami masalah dalam memasangnya.
Next Post Previous Post
13 Comments
  • Mannulis
    Mannulis 9/29/2019 7:36 PM

    okelah izin praktek

    • Tema Banua
      Tema Banua 9/30/2019 12:32 AM

      Semoga berhasil kaka!

  • Agung Maulana
    Agung Maulana 9/30/2019 12:07 AM

    Wah min makasih, ini yang saya cari ijin di praktekan

    • Tema Banua
      Tema Banua 9/30/2019 12:33 AM

      Pastikan peletakannya yang benar ya

  • Hay Tayo
    Hay Tayo 10/19/2019 9:10 AM

    mantul nih kebetulan lagi nyari tutornya , kakau boleh request minta buatkan cara bikin caption dibawah gambar seperti blog ini yg diatasdl dibawahnya ada tulisan "images : @rian_seo" .

    Btw ditunggu kunjung balik dan komenya di web tekloggers . com

  • Donnay
    Donnay 12/13/2019 9:36 PM

    Biar gerak efek glombang svgnya gimana gan?

    • Tema Banua
      Tema Banua 12/13/2019 10:48 PM

      Tambahkan efek CSS Animasi pak :)

  • Man
    Man 3/08/2020 12:31 AM

    Blog aku dah make, sumpah ini keren banget

    • Tema Banua
      Tema Banua 3/08/2020 1:51 AM

      Ok semoga bermanfaat atikel dari kami

  • Iman Ridhwan Syah
    Iman Ridhwan Syah 3/08/2020 10:40 AM

    Persis nih kaya blog caritau.id ane wkwk

    • Tema Banua
      Tema Banua 3/08/2020 11:52 AM

      Dah lama saya buatkan panduanya, cuma isi judulnya ngelawak

  • Sardi
    Sardi 8/07/2020 6:55 AM

    saya menghapus efek wave dan judulnya ikut kehapus, cara membuat judul gimana ya ?

    • Alexa Maria
      Alexa Maria 8/07/2020 10:04 AM

      <h1>
      <b:if cond='data:post.link'>
      <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
      </h1>

Add Comment
Comment url