Cara Memasang Efek Animasi Gelombang (Wave) di Blogger

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Memasang Efek Animasi Gelombang (Wape) di Blogger, sebelum kita memasuki tutorialnya pastikan kamu sudah membackup terlebih dahulu template kamu agar apabila terjadi error kamu masih ada backupannya. Selain menambah kecantikan blog, tujuan dari memasang efek ini adalah membuat blog kamu menjadi beda dari blog lainnya.

Efek ini biasanya digunakan pada dibagian header atau footer blog sebagai pengganti background tersebut, tutorial ini bisa kamu lihat di bagian footer Idntheme atau demo dibawah artikel ini. Efek ini berbentu seperti gelombang laut yang berobak yang bergerak secara horizontal.

Cara Memasang Efek Animasi Gelombang (Wave) di Blogger

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.
2. Masuk kemenu TEMA > klik Edit HTML
3. Silahkan kamu copy kode HTML dibawah ini dan pastekan dimana kamu ingin menampilkan efek tersebut.

<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. Selanjutnya silahkan tambahkan kode CSS dibawah ini tepat DIATAS kode ]]></b:skin> atau </style>

/* Gelombang Jagoandzgn */
#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: #5b86e5;
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;
}
}

5. Kalau sudah silahkan klik SIMPAN dan Selesai.

Apabila kamu ingin menampilkan diatas Header silahkan kamu hapus kode berikut ini.

.footer-fancy-shape[data-negative=false].footer-fancy-shape-bottom, .footer-fancy-shape[data-negative=true].footer-fancy-shape-top {
transform: rotate(180deg);
}

Demo

Bagaimanam mudah bukan untuk tutorial Cara Memasang Efek Animasi Gelombang (Wape) di Blogger, apabila kamu ingin melihat demonya kamu bisa klik link DEMO diatas dan apabila kamu memiliki pertanyaan seputar blogger silahkan komen dikolom komentar dibawah artikel ini.