Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana cara nya membuat loading preloader menggunakan animasi Hashtag di blogger
Info: Jika kamu penasaran dengan bagaimana kah contoh tampilan dari animasi preloader Hashtag di blogger, yuk langsung aja kita bahas bersama sama
Preloader
Preloader merupakan suatu tampilan yang muncul ketika blog di refresh alias tampilan yang akan muncul saat loading halaman blog, banyak sekali jenis tampilan dari preloader mulai dari sekedar text, animasi CSS, gambar, dan sebagainya
Animasi Hashtag
Nah khusus pada preloader yang bakalan admin bahas di sini adalah contoh preloader menggunakan efek animasi Hashtag, jika sudah menggunakan animasi pastinya tampila preloader akan bergerak gerak sesuai pengaturan CSS yang kita buat sebelumnya
Menggunakan CSS
Preloader blog yag menggunakan animasi hatag di blogger tersebut di buat menggunakan kode CSS Alias menggunakn efek animasi CSS, meskipun tidak 100% murni CSS untuk bisa menampilkan tampilan preloader tersebut namun kamu jangan khawatir mengenai kecepatan preloader yang satu ini sangat fepat dan juga keren lah
Contoh Tampilan
Jika kamu penasaran bagaimana kah contoh tampilan dari preloader tersebut kamu bisa merefresh tampilan halama yang sedang kamu baca ini, insya Allah preloader tersebut akan muncul secara menakjubkan hehehe 😅‚, atau gunakan saja tombol di bawah ini untuk merefresh tampilan
Info: Bagaimana sobat dengan contoh tampilan nya keren sekali yak
Cara pembuatan
Baiklah sobat icloudZer sekarang saatnya admin bakalan memberikan informasi mengenai bagaimana kah cara membuat preloader animasi Hashtag di blogger, baca terus artikel ini hingga selesai ok biar paham
Kode CSS
Seperti biasanya salin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>
/* Preloader Hashtag by ICloudice.com */
.rahLoad35{direction:ltr;position:fixed;top:0;right:0;bottom:0;left:0;display:none;background:#fefefe;align-items:center;justify-content:center;z-index:9999;visibility:visible;opacity:1;transition:all .8s ease}.rahLoad35:before{content:'By ICloudice.com';position:absolute;right:6px;top:9px;font-size:12px;font-weight:800;} .rahLoad35.r{display:flex} .rahLoad35.a{opacity:0;visibility:hidden}
.rahLoadIn {position:relative;transform:rotate(165deg)}
.rahLoadIn:before, .rahLoadIn:after{content:'';position:absolute;display:block;width:.5em;height:.5em;border-radius:.25em;transform:translate(-50%,-50%)} .rahLoadIn:before{animation:rahPdbe 2s infinite} .rahLoadIn:after{animation:rahPdAf 2s infinite} @keyframes rahPdbe{0%{width:.5em;box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}35%{width:2.5em;box-shadow:0 -.5em rgba(225,20,98,.75),0 .5em rgba(111,202,220,.75)}70%{width:.5em;box-shadow:-1em -.5em rgba(225,20,98,.75),1em .5em rgba(111,202,220,.75)}100%{box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}} @keyframes rahPdAf{0%{height:.5em;box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}35%{height:2.5em;box-shadow:.5em 0 rgba(61,184,143,.75),-.5em 0 rgba(233,169,32,.75)}70%{height:.5em;box-shadow:.5em -1em rgba(61,184,143,.75),-.5em 1em rgba(233,169,32,.75)}100%{box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}} .drK .rahLoad35{background:#1e1e1e}Info: Atau kamu juga bisa mengunakan tag kode <style> untuk meletakan koe CSS di atas
kode HTML
Langkahnya Selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode HTML di bawah ini kemudian kamu bisa meletakkan nya di bawah kode <body>
<div class='rahLoad35' id='rahLoad35'>
<div class='rahLoadIn'/>
</div>Info: Fungsi daribkode HTML di atas adalah unuk menampilkan preloader di dalam blog kamu
Kode Javascript
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode Javascript di bawa ini kemudian letakkan di atas kode </body>
<script>/*<![CDATA[*/
var _0xee98=["\x23\x72\x61\x68\x4C\x6F\x61\x64\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","\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\x6F\x61\x64\x33\x35","\x6C\x65\x6E\x67\x74\x68","\x2E\x72\x61\x68\x4C\x6F\x61\x64\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 rahLoad35=document[_0xee98[1]](_0xee98[0]);rahLoad35[_0xee98[4]][_0xee98[3]](_0xee98[2]);document[_0xee98[7]](_0xee98[5],function(){setTimeout(function(){rahLoad35[_0xee98[4]][_0xee98[3]](_0xee98[6])},2000)});$(document)[_0xee98[18]](function(){$(_0xee98[12])[_0xee98[11]](_0xee98[10],_0xee98[8])[_0xee98[9]](_0xee98[8]);setInterval(function(){if(!$(_0xee98[14])[_0xee98[13]]){window[_0xee98[16]][_0xee98[15]]= _0xee98[17]}},3000)})/*]]>*/</script>Info: Fungsi dari kode javascript diatas adalah untuk menjalankan fungsi preloader agar tampil secara sempurna