- 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>
- Langkah selanjutnya adalah menyalin kode HTML dibawah inj, kemudian tempelkan didalam blog tepatnya diatas kode </body> atau sebelum kode </body>
/* 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
<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