Cara Buat Circle Animation Terbaru Di Blog Dengan Mudah

Kali ini saya akan memberikan cara pemasangan Circle Animation Terbaru pada tampilan template yang terdapat pada Blogger. Circle Animation memiliki tampilan yang sangat menarik buat kalian yang suka mendesain untuk mempercantik tampilan template blog yang kalian miliki. Circle Animation ini memiliki bentuk kotak dan bertaburan gelembung-gelembung yang melayang ke atas, Kalian juga bisa melihat hasilnya pada tampilan header di websiteku ini.

Tampilan Circle Animation Terbaru ini sangatlah bagus dan juga recomended buat kalian yang suka merombak desain pada tampilan template orang. Nah, Jika kalian tertarik dan ingin memasang pada template websitemu simak langka-langkanya sebagai berikut ini.

Cara Pasang Circle Animation Terbaru Di Blog

1. Buka Blog kalian.
2. Pilih Tema lalu pilih Edit Html.
3. Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>

/* Animasi Circle Motomo23.blogspot.net */
.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. Lanjut salin kode di bawah ini kemudian letakan sesuai selera kalian 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. Simpan template kalian.

Untuk mengubah warna background circle animasi ini silahkan rubah pada bagian background:rgba(255,255,255,0.07)

Untuk pengaturan lainya silahkan kreasikan sesuka kalian. Demikianlah proses langka pemasangan Circle Animation Terbaru dari saya kalau ada yang perluh di tanyakan silahkan komentar di kolom yang sudah saya sediahkan. Semoga ilmu dari saya bisa kalian pahami dan kalian praktekan.

Terima Kasih Sudah Berkunjung...!!!

Bagikan Artikel ini