✔ Memasang Pengaruh Animasi Gelombang (Wave) Di Blog

Selain menambah bagus tampilan blog, menambahkan efek animasi juga menciptakan blog terlihat berbeda berbeda. Tentu saja efek yang dipasang pada blog tidak berlebihan dan terlihat alay. Nah, pada kesempatan ini aku akan membuatkan tutorial cara memasang efek animasi gelombang atau wave pada blog (blogspot).

Efek wave biasaya dipasang pada bab header atau footer blog sebagai pengganti warna background tersebut.

Efek wave ialah animasi berbentuk gelombang (laut) dengan warna gradasi yang yang bergerak secara horizontal dari kiri ke kanan atau sebaliknya.

Memasang Animasi Wave di Blog

Pada postingan ini, aku bagikan cara memasang animasi efek wave pada label blog. Animasi wave ini akan muncul pada dikala kita membuka label atau kategori postingan di blog, tepatnya ada di atas daftar postingan kategori tersebut.

Blog aku (randi.id) juga memasang animasi efek wave, tampilan dan animasi wave terlihat lebih keren dikala dibuka pada mode desktop. Nah jikalau teman ingin tau dapat lihat demonya disini.

Untuk teman yang ingin memasang animasi gelombang (wave) pada blog atau blogspot, berikut ini langkah-langkahnya:

1. Masuk ke dashboard blog sobat.
2. Buka sajian Tema, lalu klik Edit HTML.
3. Copy isyarat berikut:

<b:if cond='data:blog.searchLabel'> <style> .breadcrumbs{display:none} div#label-intro{z-index:20;margin:0;color:#fff;text-align:center;height:100%;position:absolute;width:100%} .label-intro{z-index:2;position:absolute;width:100%;height:100%} div#label-intro div.isi-randi{position:absolute;top:40%;left:54%;transform:translate(-50%,-50%);width:1080px;max-width:100%;text-align:left;padding:0 0 0 7.3em;box-sizing:border-box} div#label-intro div.isi-randi i.labels{left:0;position:absolute;top:50%;transform:translate(0,-50%);font-size:6em;font-weight:100;opacity:.3} div#label-intro div.isi-randi div.title{font-weight:700;font-size:2.5em;text-shadow:6px 6px 0 rgba(0,0,0,0.1)} div#label-intro div.isi-randi div.content{width:600px;max-width:100%} /*div#label-intro div.isi-randi 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:320px;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='label-intro'> <div class='label-intro'> <div class='isi-randi'> <i class='labels fa fa-folder-open'/>   <div class='title'><span><data:blog.pageName/></span></div>   <div class='content'>Berbagai postingan wacana &#39;<span style='font-weight:700'><data:blog.pageName/></span>&#39; yang menarik untuk kau baca.</div>   </div>   </div> </div>   <div class='randi-wavebg randi-bgt'>     <div class='wave randi-wavetop' style='background-image: url(&apos;http://front-end-noobs.com/jecko/img/wave-top.png&apos;)'/>   </div>   <div class='randi-wavebg randi-bgm'>     <div class='wave randi-wave-mid' style='background-image: url(&apos;http://front-end-noobs.com/jecko/img/wave-mid.png&apos;)'/>   </div>   <div class='randi-wavebg randi-bgb'>     <div class='wave randi-wave-bot' style='background-image: url(&apos;http://front-end-noobs.com/jecko/img/wave-bot.png&apos;)'/>   </div> </div>   </b:if>

4. Paste atau tempatkan di bawah isyarat </head>.
5. Simpan Tema.

Silahkan teman lihat karenanya dengan membuka halaman label blog. Apakah animasi gelombang wave sudah terpasang di blog sobat.

Dengan memasang animasi bergelombang (wave), kini template blog teman terlihat lebih keren dan berbeda.

Mungkin cukup sekian saja untuk postingan kali ini wacana Memasang Efek Animasi Gelombang (Wave) di Blog, biar dapat bermanfaat bagi teman blogger semua. Selamat mencoba dan salam sukses.
Sumber http://www.randi.id

Share this post

Berlangganan update artikel terbaru via email: