Cara Membuat Animasi Kotak Melayang di Header Viomagz
Perlu diketahui bahwa template viomagz adalah salah satu template blogger yang paling banyak digunakan. Template viomagz ini memiliki banyak keunggulan seperti fast loading, AdSense ready, responsif dan mobile friendly.
Salah satu keunggulan template viomagz yang menurut saya paling bagus adalah fleksibel untuk dimodifikasi. Banyak blogger yang melakukan modifikasi template viomagz ini, dan itu termasuk saya.
Nah dalam artikel kali ini saya akan memberikan sebuah tutorial cara membuat efek animasi kotak melayang pada bagian header viomagz.
Cara Membuat Efek Animasi Kotak di Header Viomagz
Ada beberapa langkah yang harus dilakukan sebelum anda bisa memasang efek animasi kotak melayang ini. Pertama silahkan buka dashboard blogger, setelah itu pilih menu tema, lalu pilih edit HTML.
Langkah kedua, silahkan copy kode CSS dibawah ini, dan simpan sebelum kode ]]></b:skin>.
/* Animasi Circle maxikhsan.my.id */
.circles{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;margin:0} .circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:rgba(255,255,255,0.17);animation:animate 45s linear infinite;bottom:-150px;z-index:0} .circles li:nth-child(1){left:25%;width:60px;height:60px;animation-delay:0s} .circles li:nth-child(2){left:10%;width:10px;height:10px;animation-delay:2s;animation-duration:12s} .circles li:nth-child(3){left:70%;width:10px;height:10px;animation-delay:4s} .circles li:nth-child(4){left:40%;width:40px;height:40px;animation-delay:0s;animation-duration:18s} .circles li:nth-child(5){left:65%;width:10px;height:10px;animation-delay:0s} .circles li:nth-child(6){left:75%;width:90px;height:90px;animation-delay:3s} .circles li:nth-child(7){left:35%;width:130px;height:130px;animation-delay:7s} .circles li:nth-child(8){left:50%;width:15px;height:15px;animation-delay:15s;animation-duration:45s} .circles li:nth-child(9){left:20%;width:5px;height:5px;animation-delay:2s;animation-duration:35s} .circles li:nth-child(10){left:85%;width:130px;height:130px;animation-delay:0s;animation-duration:11s} @keyframes animate{0%{transform:translateY(0) rotate(0deg);opacity:1;border-radius:0}100%{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}
Langkah yang ketiga, masukan kode pemanggil efek animasi kotak melayangnya dibawah ini dimana saja terserah anda.
<ul class='circles'><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
Agar efek animasi kotak melayang tampil pada versi desktop dan mobile, maka sebaiknya simpan dibawah kode <div id='header-container'>.
Untuk mempercepat pencarian silahkan anda double click kode dibawah ini, lalu copy kodenya.
<div id='header-container'>
Setelah itu gunakan shortcut CTRL+F untuk membuka tab pencarian, lalu pastekan kode diatas dan tekan enter.
Setelah ditemukan maka selanjutnya anda harus menyimpan kode pemanggil efek animasi header ini tepat dibawah kode <div id='header-container'>, agar efek animasinya bisa berjalan dengan baik dalam versi desktop dan versi mobile.
Baca: Cara Membuat Iklan Melayang
Memberikan banyak efek yang bagus tentu akan membuat tampilan blog menjadi lebih cantik. Namun perlu diperhatikan juga bahwa jika terlalu banyak memasang efek, maka bisa saja kecepatan loading blog akan terpengaruh.
Semoga bermanfaat.
Posting Komentar