Gambar Bootstrap 3

Cara Membuat Efek Animasi Gelombang pada Blogger dengan mudah


Menjadi seorang blogger, pasti mengenal yang namanya template blog.

Seorang blogger yang niat menjadi blogger pasti ingin membuat tampilan blog mereka menjadi lebih menarik.

Tujuannya untuk apa? Tujuannya adalah untuk membuat pembaca blog kita merasa nyaman di blog kita. Dan senang melihat fitur-fitur yang ada di blog kita.

Oleh sebab itu, kali ini saya akan memberikan informasi mengenai efek animasi gelombang pada blogger yang akan menambah cantik blog kalian.

Cara Membuat Efek Animasi Gelombang pada Blogger


Efek gelombang ini biasanya terdapat pada bagian footer sebuah blog, namun kalian juga bisa memasangnya dibawah bagian header.

Baca juga: cara mudah mengetahui id FeedBurner

Tergantung kalian ingin memasangnya dibagian mana. Langsung aja.

Berikut ini cara membuat efek animasi gelombang pada blogger:

1. Silahkan kalian masuk ke akun blogger kalian.
2. Kalian bisa masuk ke bagian Tema > Edit HTML.
3. Selanjutnya yang harus kalian lakukan adalah kalian bisa copy kode dibawah ini dan taruh ditempat yang kalian ingin munculkan efek gelombangnya.

<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>
4. Setelah itu kalian bisa tambahkan kode CSS dibawah ini, dan kalian bisa taruh kode ini SEBELUM kode ]]></b:skin>

/* Gelombang penanaknasi */ #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: #80e0ff; 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; } }
Keterangan: jika kalian ingin mengganti warna, cari kata #80e0ff ganti sesuai yang kalian inginkan.
5. Jika semua sudah kalian lakukan, kalian bisa klik simpan.
6. Selesai.

Oiya jika kalian ingin menaruh efek ini dibagian atas, kalian bisa hapus kode ini pada kode di no.4

.footer-fancy-shape[data-negative=false].footer-fancy-shape-bottom, .footer-fancy-shape[data-negative=true].footer-fancy-shape-top {
transform: rotate(180deg);
}
Demikian cara membuat efek animasi gelombang pada blogger. Jika kalian masih bingung, jangan malu untuk bertanya.

Kalian juga bisa baca cara cara memasang logo header pada blog

Jika kalian ingin melihat demonya, kalian bisa cek dibagian bawah blog ini, cara diatas sudah saya terapkan, dan terbukti berhasil.

Tetap semangat dan berusaha. Selamat mencoba. Terima kasih.
Show comments
Hide comments

2 Responses to "Cara Membuat Efek Animasi Gelombang pada Blogger dengan mudah"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel