Cara membuat Animasi circles di header blog

">Helo sobat IcloudZer memasukinya bulan puasa kami ingin meyampaikan suatu hal, Jika setiap didalam peyampaian kami memiliki kesalahan atau ada yang menyinggung hati pembaca saya mohon maaf sebesar besarnya, sedikit membahas bulan ramadhan kali ini kita berada pada kondisi atau ditengah tengah isu corona virus, semoga tuhan melancarkan apapun juga yang menjadi niat baik kita semua

"Bulan Ramadan adalah (bulan) yang di dalamnya diturunkan Al-Qur'an, sebagai petunjuk bagi manusia dan penjelasan-penjelasan mengenai petunjuk itu dan pembeda (antara yang benar dan yang batil). Karena itu, barang siapa di antara kamu ada di bulan itu, maka berpuasalah. Dan barang siapa sakit atau dalam perjalanan (dia tidak berpuasa), maka (wajib menggantinya), sebanyak hari yang ditinggalkannya itu, pada hari-hari yang lain. Allah menghendaki kemudahan bagimu, dan tidak menghendaki kesukaran bagimu. Hendaklah kamu mencukupkan bilangannya dan mengagungkan Allah atas petunjuk-Nya yang diberikan kepadamu, agar kamu bersyukur."(QS. Al-Baqarah 2: Ayat 185)

Oke kali ini saya akan membahas mengenai cara membuat Animasi Circles Responsif pada Tampilan Header blog Terbaru

Apa Animasi Circles

Apa itu Animasi Circles? Animasi Circles adalah animasi bergerak gerak dengan perubahan secara Langsung, biasanya kita akan menjumpai situs blog yang menampilkan animasi Circles seperti pada blog Icloudice.com, tepatnya pada bagian Header

Oke bagaimana cara membuatnya, kita akan menggunakan kode CSS untuk membuat tampilannya dan menggunakan Kode HTML untuk menampilkannya, oke simak baik baik

Cara penerapan

1. Login ke akun blogger anda
2. Pergi ke Template dan pilih edit HTML
3. Salin dan tempelkan kode CSS berikut tepat diatas kode ]]></b:skin>

/* Animasi Circle Icloudice */
.icloudiceCircles{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;margin:0}
.icloudiceCircles 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}
.icloudiceCircles li:nth-child(1){left:25%;width:60px;height:60px;animation-delay:0s}
.icloudiceCircles li:nth-child(2){left:10%;width:10px;height:10px;animation-delay:2s;animation-duration:12s}
.icloudiceCircles li:nth-child(3){left:70%;width:10px;height:10px;animation-delay:4s}
.icloudiceCircles li:nth-child(4){left:40%;width:40px;height:40px;animation-delay:0s;animation-duration:18s}
.icloudiceCircles li:nth-child(5){left:65%;width:10px;height:10px;animation-delay:0s}
.icloudiceCircles li:nth-child(6){left:75%;width:90px;height:90px;animation-delay:3s}
.icloudiceCircles li:nth-child(7){left:35%;width:130px;height:130px;animation-delay:7s}
.icloudiceCircles li:nth-child(8){left:50%;width:15px;height:15px;animation-delay:15s;animation-duration:45s}
.icloudiceCircles li:nth-child(9){left:20%;width:5px;height:5px;animation-delay:2s;animation-duration:35s}
.icloudiceCircles 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. Kemudian cari kode seperti ini, lihat seperti contoh berikut

<div id='header-container'> 
<--letakkan kode Html nya disini-->
<header id='header-wrapper'>  
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Perhatikan kode diatas secara benar dan tidak keliru

5. Selanjutnya tempelkan kode HTML berikut tepat seperti contoh no 4 diatas

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

Info: Jika sudah simpan dan lihat bagaimana hasilnya

Begitulah informasi saya Kali ini seputar blogger untuk Selalu memberikan informasi yang bisa membuat atau mempercantik tampilan blog anda semakin menarik serta untuk menambah wawasan kita semua, Terimakasih atas perhatiannya