Cara Memasang Effect Golombang di Blogger Bisa di Footer ataupun Header

OIFnews.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Memasang Effect Golombang 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 oifnews.com */
#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);
}
Bagaimanam mudah bukan untuk tutorial Cara Memasang Effect Golombang di Blogger dan apabila kamu memiliki pertanyaan seputar blogger silahkan komen dikolom komentar dibawah artikel ini.
Show comments
Hide comments

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel