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

Login ke blogger menggunakan akun kamu
Kemudian pergi ke menuTheme dan pilih edit HTML
Selanjutnya salin kode CSS dibawah ini kemudian letakkan diatas kode ]]></b:skin> atau sebelum 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; } }

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

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

ICloudice.com

Auto Theme Changer

Auto Themer

Read Mode