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

Memasang Animasi CSS Meteor jatuh diblogger Responsif

  • Diedit by Muhammad Rahmat Uliady
  • 04-11-21
  • Problem : Perbaikan kode HTML
  • Note : Tidak semua template bisa menerapkan tutorial ini

Hello sobat IcloudZer kali ini saya akan memberikan informasi mengenai Blogger untuk anda, yaitu bagaimana caranya menampilkan Animasi Meteor Jatuh saat mode gelap diaktifkan

Info: Bagi kamu yang sudah penasaran, yuk langsung ajabkita masuk kedalam pembahasannya

Menggunakan Mode Dark

Untuk memasang Animasi Meteor Jatuh diblogger atau didalam template kamu, sebelumnya blog kamu harus sudah menggunakan mode dark ya, soalnya, script hanya akan berjalan ketika atau didalam mode Dark

Info: Bagi kamu yang belum menggunakan mode dark, silahkan cari artikel khusus kami dalam pembuatan mode Dark diblogger

Dibuat menggunakan CSS

Nah sobat Animasi Meteor Jatuh ini dibuat menggunakan kode CSS saja, jadi jika kamu memasangnya didalam Blog kamu, insyaallah blog kamu juga akan aman dan pastinya tidak akan mengurangi kecepatan performa blog

Cara Pemasangan

Baiklah saatnya kita akan mulai membahas bagaiamana caranya memasang Animasi Meteor jatuh saat mode dark diaktifkan

Kode CSS

Oke langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian letakkin tepat diatas kode ]]></b:skin>

/* Dark Mode Meteor by icloudice */ 
.meteor-icloudice{ position: fixed; width: 100%; height: 100%; top: 50%; left: 50%; display: none; overflow: hidden; z-index: 5; pointer-events: none; box-shadow: 0 0 50px 5px rgba(255,148,0,.1); transform: translate(-50%, -50%); } .meteor-icloudice { -webkit-transition: all 500ms linear; transition: all 500ms linear; } .icloudiceMeteor-terjun { z-index: 2; width: 1px; height: 50px; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; top: 0; left: -70px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); animation: icloudice-meteor 6s linear infinite; -webkit-transition: all 2000ms linear; transition: all 2000ms linear; } .icloudiceMeteor-Skinterjun{ z-index: 2; width: 1px; height: 50px; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; top: 0; left: 200px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); animation: icloudice-meteor-skin 9s linear infinite; -webkit-transition: all 2000ms linear; transition: all 2000ms linear; } .meteor { z-index: 2; position: absolute; top: 185px; left: 25px; background-image: url('https://ivang-design.com//svg-load/air/star.png'); background-size: 15px 15px; width: 15px; height: 15px; opacity: 0.4; animation: meteor 3.5s linear infinite; -webkit-transition: all 1200ms linear; transition: all 1200ms linear; } .meteor.1 { top: 100px; left: 310px; animation-delay: 1s; } .meteor.2 { top: 130px; left: 100px; animation-delay: 1.4s; } .meteor.3 { top: 190px; left: 200px; animation-delay: 1.8s; } .meteor.4 { top: 85px; left: 1080px; animation-delay: 2.2s; } @keyframes icloudice-meteor { from { transform: translateY(0px) translateX(0px) rotate(-45deg); opacity: 1; height: 5px; } to { transform: translateY(1280px) translateX(1280px) rotate(-45deg); opacity: 1; height: 800px; } } @keyframes icloudice-meteor-skin { from { transform: translateY(0px) translateX(0px) rotate(-45deg); opacity: 1; height: 5px; } to { transform: translateY(1920px) translateX(1920px) rotate(-45deg); opacity: 1; height: 800px; } } @keyframes meteor { 0% { transform: scale(0.3) rotate(0deg); opacity: 0.4; } 25% { transform: scale(1) rotate(360deg); opacity: 1; } 50% { transform: scale(0.3) rotate(720deg); opacity: 0.4; } 100% { transform: scale(0.3) rotate(0deg); opacity: 0.4; } }

Gunakan Tag Style

Atau juga kamu bisa menggunakan tag style, untuk meletakkan kode CSS tersebut, seperti ini

<style>
/* Dark Mode Meteor by icloudice */ .meteor-icloudice{ position: fixed; width: 100%; height: 100%; top: 50%; left: 50%; display: none; overflow: hidden; z-index: 5; pointer-events: none; box-shadow: 0 0 50px 5px rgba(255,148,0,.1); transform: translate(-50%, -50%); } .meteor-icloudice { -webkit-transition: all 500ms linear; transition: all 500ms linear; } .icloudiceMeteor-terjun { z-index: 2; width: 1px; height: 50px; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; top: 0; left: -70px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); animation: icloudice-meteor 6s linear infinite; -webkit-transition: all 2000ms linear; transition: all 2000ms linear; } .icloudiceMeteor-Skinterjun{ z-index: 2; width: 1px; height: 50px; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; top: 0; left: 200px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); animation: icloudice-meteor-skin 9s linear infinite; -webkit-transition: all 2000ms linear; transition: all 2000ms linear; } .meteor { z-index: 2; position: absolute; top: 185px; left: 25px; background-image: url('https://ivang-design.com//svg-load/air/star.png'); background-size: 15px 15px; width: 15px; height: 15px; opacity: 0.4; animation: meteor 3.5s linear infinite; -webkit-transition: all 1200ms linear; transition: all 1200ms linear; } .meteor.1 { top: 100px; left: 310px; animation-delay: 1s; } .meteor.2 { top: 130px; left: 100px; animation-delay: 1.4s; } .meteor.3 { top: 190px; left: 200px; animation-delay: 1.8s; } .meteor.4 { top: 85px; left: 1080px; animation-delay: 2.2s; } @keyframes icloudice-meteor { from { transform: translateY(0px) translateX(0px) rotate(-45deg); opacity: 1; height: 5px; } to { transform: translateY(1280px) translateX(1280px) rotate(-45deg); opacity: 1; height: 800px; } } @keyframes icloudice-meteor-skin { from { transform: translateY(0px) translateX(0px) rotate(-45deg); opacity: 1; height: 5px; } to { transform: translateY(1920px) translateX(1920px) rotate(-45deg); opacity: 1; height: 800px; } } @keyframes meteor { 0% { transform: scale(0.3) rotate(0deg); opacity: 0.4; } 25% { transform: scale(1) rotate(360deg); opacity: 1; } 50% { transform: scale(0.3) rotate(720deg); opacity: 0.4; } 100% { transform: scale(0.3) rotate(0deg); opacity: 0.4; } }
</style>

Info: Jika kamu menggunakan tag style maka kamu bisa meletakkan kodenya diatas Tag </head>

Kode HTML

Langkah selanjutnya adalah, kamu bisa menyalin kode HTML berikut ini, kemudian letakkan kodenya diatas kode </body> atau sebelum kode </body>

<div class="meteor-icloudice">
<div class="icloudiceMeteor-terjun"></div>
<div class="icloudiceMeteor-skinTerjun"></div>
<div class="meteor"></div>
<div class="meteor 1"></div>
<div class="meteor 2"></div>
<div class="meteor 3"></div>
<div class="meteor 4"></div>

Info: Kemudian sobat IcloudZer bisa memeriksa blognya apakah Animasi Meteor Jatuh nya udah berhasil ditampilkan

Langkah langkah

Baiklah berikut ini admin akan jelaskan secara terperinci untuk memasang dan menggunakan animasi CSS Meteor jatuh ini kedalam blog, perhatikan setiap langkah serta cara penggunaannya

  1. Login ke blogger menggunakan akun kamu
  2. Kemudian pergi ke menuTheme dan pilih edit HTML
  3. Selanjutnya salin kode CSS dibawah ini kemudian letakkan diatas kode ]]></b:skin> atau sebelum kode ]]></b:skin>
  4. /* Dark Mode Meteor by icloudice */ 
    .meteor-icloudice{ position: fixed; width: 100%; height: 100%; top: 50%; left: 50%; display: none; overflow: hidden; z-index: 5; pointer-events: none; box-shadow: 0 0 50px 5px rgba(255,148,0,.1); transform: translate(-50%, -50%); } .meteor-icloudice { -webkit-transition: all 500ms linear; transition: all 500ms linear; } .icloudiceMeteor-terjun { z-index: 2; width: 1px; height: 50px; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; top: 0; left: -70px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); animation: icloudice-meteor 6s linear infinite; -webkit-transition: all 2000ms linear; transition: all 2000ms linear; } .icloudiceMeteor-Skinterjun{ z-index: 2; width: 1px; height: 50px; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; top: 0; left: 200px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); animation: icloudice-meteor-skin 9s linear infinite; -webkit-transition: all 2000ms linear; transition: all 2000ms linear; } .meteor { z-index: 2; position: absolute; top: 185px; left: 25px; background-image: url('https://ivang-design.com//svg-load/air/star.png'); background-size: 15px 15px; width: 15px; height: 15px; opacity: 0.4; animation: meteor 3.5s linear infinite; -webkit-transition: all 1200ms linear; transition: all 1200ms linear; } .meteor.1 { top: 100px; left: 310px; animation-delay: 1s; } .meteor.2 { top: 130px; left: 100px; animation-delay: 1.4s; } .meteor.3 { top: 190px; left: 200px; animation-delay: 1.8s; } .meteor.4 { top: 85px; left: 1080px; animation-delay: 2.2s; } @keyframes icloudice-meteor { from { transform: translateY(0px) translateX(0px) rotate(-45deg); opacity: 1; height: 5px; } to { transform: translateY(1280px) translateX(1280px) rotate(-45deg); opacity: 1; height: 800px; } } @keyframes icloudice-meteor-skin { from { transform: translateY(0px) translateX(0px) rotate(-45deg); opacity: 1; height: 5px; } to { transform: translateY(1920px) translateX(1920px) rotate(-45deg); opacity: 1; height: 800px; } } @keyframes meteor { 0% { transform: scale(0.3) rotate(0deg); opacity: 0.4; } 25% { transform: scale(1) rotate(360deg); opacity: 1; } 50% { transform: scale(0.3) rotate(720deg); opacity: 0.4; } 100% { transform: scale(0.3) rotate(0deg); opacity: 0.4; } }

    Atau menggunakan Tag <style> seperti yang sudah saya bahas sebelumnya

  5. Langkah selanjutnya adalah menyalin kode HTML dibawah inj, kemudian tempelkan didalam blog tepatnya diatas kode </body> atau sebelum kode </body>
<div class="meteor-icloudice">
<div class="icloudiceMeteor-terjun"></div>
<div class="icloudiceMeteor-skinTerjun"></div>
<div class="meteor"></div>
<div class="meteor 1"></div>
<div class="meteor 2"></div>
<div class="meteor 3"></div>
<div class="meteor 4"></div></div>

Info: Oke setelah itu simpan, dan lihat hasilnya

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

إرسال تعليق

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.