Cara Memasang Efek Gelombang (Wave Effect) di Blogger

Arsipbiru.com - Bagi seorang blogger, selain memperhatikan SEO blognya, tentunya juga harus memperhatikan tampilan blognya. Hal ini agar memberikan kenyamanan dan kesan kepada user yang berkunjung di blog kita. Jika user merasa nyaman di blog kita, maka di masa mendatang mereka akan kembali mengunjungi blog kita atau bahkan menyarankan teman-temannya untuk mampir di blog kita.

Nah, pada kesempatan kali ini, saya akan membagikan tutorial bagaimana memasang efek gelombang (wave effect) di blogger. Efek gelombang ini dimaksudkan untuk memberikan kesan seperti gelombang air laut (wave effect) di tampilan blog. Efek ini biasanya dipasang di bagian header atau footer sebagai pengganti warna background. Tampilan blog Anda akan lebih keren dan berbeda dengan memasang efek gelombang (wave effect) di blog.

Apa itu Wave Effect? 

Wave Effect (Efek Gelombang) adalah animasi berbentuk gelombang air laut dengan warna gradasi yang bergerak secara horizontal. Wave Effect (Efek Gelombang) biasanya dipasang pada bagian header atau footer blog sebagai pengganti warna background. 

Selain menambah cantik tampilan blog, adanya efek animasi juga membuat blog terlihat berbeda berbeda. Tentu saja efek yang dipasang pada blog tidak berlebihan dan terlihat alay.

Cara Memasang Efek Gelombang (Wave Effect) di Blogger

Pada tutorial kali ini, saya akan membagikan cara memasang efek gelombang (wave effect) di blogger yang terbagi ke dalam dua jenis, yakni tanpa animasi dan dengan animasi.

Cara Memasang Efek Gelombang (Wave Effect) Tanpa Animasi di Blogger

Disini saya akan membagikan cara memasang efek gelombang tanpa animasi di blogger, salah satunya di bagian footer blogger. Caranya cukup sederhana dan mudah. Berikut langkah-langkahnya untuk memasangnya. Simak baik-baik, ya.

1. Pertama, masuk ke Blogger > pilih Tema > Edit HTML.

2. Kemudian tambahkan kode CSS di berikut ini sebelum ]]></b:skin>.

body.darkmode .footer-fancy-shape .footer-fancy-shape-fill{fill: #213040;transition: all .5s ease;}
#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:$(footer.bg2); 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;}}

Note:

Untuk mengubah warna default background footer, silahkan teman-teman cari dan ganti kode berikut ini. 

fill:$(footer.bg2)

Misalnya, Anda mau mengganti warna merah silahkan ganti dengan kode berikut ini.

fill:#ff0000

3. Ketiga, masukkan kode berikut ini tepat di bawah atau sebelum <footer id='footer outer'>.

<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>
<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>
<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'></path>
</svg>
</section>
<div id='bf-fancy-icon'>
<div class='footer-shape footer-fancy-logo' data-negative='false'>
</div>
</div>
</div>

4. Terakhir, klik Simpan Tema dan lihat hasilnya.

Cara Memasang Animasi Efek Gelombang (Wave Effect) di Blogger

Jika sebelumnya adalah cara memasang wave effect tanpa animasi di blogger, maka tutorial kali ini adalah cara memasang efek gelombang (wave effect) yang disertai dengan animasi di blogger. Berikut langkah-langkahnya.

1. Pertama, masuk ke Blogger > pilih Tema > Edit HTML.

2. Copy kode berikut ini tepat di bawah kode </head>.

<b:if cond='data:blog.searchLabel'>
<style>
.breadcrumbs{display:none}
div#labelinto{z-index:20;margin:0;color:#fff;text-align:center;height:100%;position:absolute;width:100%}
.labelinto{z-index:2;position:absolute;width:100%;height:100%}
div#labelinto div.labelan{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:1080px;max-width:100%;text-align:left;padding:0 0 0 8em;box-sizing:border-box}
div#labelinto div.labelan i.labels{left:0;position:absolute;top:50%;transform:translate(0,-50%);font-size:6em;font-weight:100;opacity:.3}
div#labelinto div.labelan div.title{font-weight:700;font-size:2.5em;text-shadow:6px 6px 0 rgba(0,0,0,0.1)}
div#labelinto div.labelan div.content{width:600px;max-width:100%}
/*div#labelinto div.labelan div.title small.cap{display:block;font-size:14px;font-weight:300}*/
@keyframes randi-wave2{0%{transform:translateX(0) translateZ(0) scaleY(1)}50%{transform:translateX(-25%) translateZ(0) scaleY(0.55)}100%{transform:translateX(-50%) translateZ(0) scaleY(1)}}
.waveWrapper{z-index:0;overflow:hidden;position:relative;left:0;top:0;margin:auto;width:100%;height:420px;user-select:none;-webkit-user-select:none}
.randi-wavebg{position:absolute;width:100%;overflow:hidden;height:100%;bottom:0;background:linear-gradient(-45deg,#f5efef, #EE7752, #E73C7E, #23A6D5, #23D5AB,#764ba2,#7577a9);background-size:400% 400%;-webkit-animation:Gradient 50s ease infinite;-moz-animation:Gradient 50s ease infinite;animation:Gradient 50s ease infinite}
.randi-bgt{z-index:15;opacity:0.5}
.randi-bgm{z-index:10;opacity:0.75}
.randi-bgb{z-index:5}
.wave{position:absolute;left:0;width:200%;height:100%;background-repeat:repeat no-repeat;background-position:0 bottom;transform-origin:center bottom}
.randi-wavetop{background-size:50% 100px}
.randi-wave-ani .randi-wavetop{animation:move-wave 3s;-webkit-animation:move-wave 3s;-webkit-animation-delay:1s;animation-delay:1s}
.randi-wave-mid{background-size:50% 120px}
.randi-wave-ani .randi-wave-mid{animation:randi-wave2 10s linear infinite}
.randi-wave-bot{background-size:50% 100px}
.randi-wave-ani .randi-wave-bot{animation:randi-wave2 15s linear infinite}
.randi_wrapper{margin-top:15px}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
</style>
<div class='waveWrapper randi-wave-ani'>
<div id='labelinto'>
<div class='labelinto'>
<div class='labelan'>
<i class='labels fa fa-folder-open'></i><div class='title'>
<!--<small class='cap'>Kategori</small>--><span><data:blog.pageName/></span></div>
<div class='content'>
Berbagai postingan tentang &#39;<span style='font-weight:700'><data:blog.pageName/></span>&#39; yang menarik untuk kamu baca.</div>
</div>
</div>
</div>
<div class='randi-wavebg randi-bgt'>
<div class='wave randi-wavetop' style='background-image: url(&apos;https://front-end-noobs.com/jecko/img/wave-top.png&apos;)'>
</div>
</div>
<div class='randi-wavebg randi-bgm'>
<div class='wave randi-wave-mid' style='background-image: url(&apos;https://front-end-noobs.com/jecko/img/wave-mid.png&apos;)'>
</div>
</div>
<div class='randi-wavebg randi-bgb'>
<div class='wave randi-wave-bot' style='background-image: url(&apos;https://front-end-noobs.com/jecko/img/wave-bot.png&apos;)'>
</div>
</div>
</div>
</b:if>

3. Simpan Tema dan lihat hasilnya.

Demikian tutorial bagaimana cara memasang efek gelombang (wave effect) di blogger. Semoga bermanfaat.

Sumber:

Inwepo.co

Randi.id