Hello sobat IcloudZer kali ini admin akan memberikan informasi seputar teknologi dan dunia blogging untuk anda yakni dalam membahas bagaimana caranya membuat sebuah preloading diblog menggunakan efek animasi CSS diblogger
Info: Okay jika kamunya sudah penasaran dengan Preloading menggunakan efek animasi CSS ini, mari langsung aja kita bahas secara bersama sama
Preloading
Pada postingan saya sebelumnya sudah banyak membahas mengenai Preloader atau Preloading ini, dan disertai tampilan yang berbeda beda pada setiap postingan saya, dan khusus pada postingan kali ini mengenai Preloader diblog juga memiliki tampilan yang juga berbeda dari Postingan postingan saya sebelumnya
Sebagai informasi: Admin bakalan merangkum mengenai setiap postingan postingan terkait loading page ini okay, didalam postingan saya yang lainnya okay
Fungsi Preloading
Fungsi yang sebenarnya adalah dari Preloading atau loading page ini adalah untuk membuat suatu tampilan lainnya pada atau didalam blog dan sebelum blog tersebut memuat data secara keseluruhan maka Preloading atau loading page ini bakalan ditampilkan
Cara Pembuatan
Baiklah sekarang admin bakalan memberikan informasi mengenai bagaiamana caranya membuat Preloader keren dengan efek animasi CSS diblogger, okay
Kode CSS
Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian kamu bisa meletakkannya diatas kode ]]></b:skin>
/* Preloader by rahcode */
#rahPreloading{overflow:hidden;background:#fefefe;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#rahLoading{width:100px;height:40px;position:absolute;top:50%;left:50%;margin:-20px -50px}
#rahLoading div{width:10px;height:10px;background:#f80000;border-radius:50%;position:absolute}
#d1{animation:rahanimate 2s linear infinite}
#d2{animation:rahanimate 2s linear infinite -.4s}
#d3{animation:rahanimate 2s linear infinite -.8s}
#d4{animation:rahanimate 2s linear infinite -1.2s}
#d5{animation:rahanimate 2s linear infinite -1.6s}
@-webkit-keyframes rahanimate{0%{left:100px;top:0}80%{left:0;top:0}85%{left:0;top:-10px;width:10px;height:10px}90%{width:20px;height:15px}95%{left:100px;top:-10px;width:10px;height:10px}100%{left:100px;top:0}}Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS diatas
Kode HTML
Nah langkah selanjutnya adalah kamu bisa menyalin lagi nih kode HTML dibawah ini kemudian kamu bisa meletakkannya diatas kode </body>
<div id='rahPreloading'>
<div id='rahLoading'>
<div id='d1'></div>
<div id='d2'></div>
<div id='d3'></div>
<div id='d4'></div>
<div id='d5'></div>
</div>
</div>Info: Fungsi dari kode HTML diatas adalah untuk menampilkan preloadingnya
Kode Javascript
Langkah selanjutnya adalah menyalin lagi kode javascript dibawah ini kemudian kamu bisa meletakkannya diatas </body>, berikut ini adalah kodenya
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
/*<![CDATA[*/
$(window).bind("load", function () {jQuery("#rahLoading").fadeOut("slow");jQuery("#rahPreloading").delay(0).fadeOut();});$(document).ready(function(){$('#mscontent').attr('style','display: inline-block !important;visibility: visible!important; opacity: 1!important; position: relative!important; z-index: 1!important; font-size: 12px!important; color: #fefefe!important').html('Created with <i style="color:#f80000;-webkit-animation: icloudiceRing 5s 0s ease-in-out infinite; -webkit-transform-origin: 50% 4px; -moz-animation: icloudiceRing 6s 0s ease-in-out infinite; -moz-transform-origin: 50% 4px; animation: icloudiceRing 6s 0s ease-in-out infinite; transform-origin: 50% 4px;" class="fa fa-heart"></i> by <a href="https://icloudice.com" style="visibility: visible!important; opacity: 1!important; position: relative!important; z-index: 1!important; font-size: 12px!important; color: #161617!important;font-weight: 500!important;">Icloudice</a>');setInterval(function(){if(!$('#mscontent:visible').length)window.location.href='https://icloudice.com'},3000)}); /*]]>*/</script>Info: Fungsi dari kode javascript diatas adalah untuk menyetabilkan performa dari Preloader nya
Contoh Tampilan
Sedangkan untuk contoh tampilannya kamu bisa melihatnya dengan merefresh halaman blog ini agar kamu mengetahuinya