For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

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>
  4. /* 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%}}
  5. Kemudian cari kode seperti ini, lihat seperti contoh berikut
  6. <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

  7. 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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

تعليق واحد

  1. Casinos in Canada 2021-2022 - GoOmans
    Casinos 토토 분석 사이트 in Canada 1xbet app 2021-2022 · Casinos at Casinos in Canada. Learn about online casinos in Canada, including 코인카지노 가입코드 casino list for 카지노 꽁머니 사이트 2021.
Menghasilkan uang melalui survei berbayar
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.