Cara Membuat Circle Animation dengan CSS di Blogger

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Circle Animation dengan CSS di Blogger dengan mudah, animasi ini terinspirasi dari sebuah blog template yang sangat unik yaitu idntheme. Kamu bisa cek dibagian atas terdapat kotak atau gelembung yang mengudara.

Kami pun penasaran dengan source kode tersebut akhirnya saya pun menginspect kode tersebut dan akhirnya menemukannya, untuk tutorialnya silahkan simak tutorial berikut ini dengan cermat jangan lupa untuk membackup template terlebih dahulu.

Cara Membuat Circle Animation dengan CSS di Blogger

1. Silahkan kamu login ke akun blogger.com dengan Menggunakan Gmail kamu.

2. Masuk kemenu TEMA > klik Edit HTML

3. Silahkan cari kode berikut ini ]]></b:skin> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

/* Animasi Circle Jagoandzgn */
.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.07);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%}}

4. Selanjutnya silahkan kamu copy kode berikut ini, sesuai dengan selara kamu masing-masing.

<ul class='circles'><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

5. Untuk mengganti warna background tersebut silahkan kamu ganti kode berikut ini sesuai dengan selera kamu masing-masing.

 background:rgba(255,255,255,0.07)

6. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Membuat Circle Animation CSS di Blogger dengan mudah, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.