Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)
  • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa

Cara membuat Animasi circles di header blog

views

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

Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
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.