Hello sobat IcloudZer kali ini admin akan memberikan informasi seputar teknologi dan dunia blogging untuk anda yakni dalam membahas bagaimana caranya membuat sebuah preloader diblog menggunakan efek animasi CSS di blogger
Info: Okay Baikah tanpa berlama lama lagi admin bakalan memberikan informasi untuk anda, jika terlalu banyak basa basi nanti sakit hati terus bilang mantap mantap lagi, bilang aja sakit hati 😂 artikelnya kepanjangan bet(padahal lengkap), dan belum tahu bahwa ngeblog itu harus pakai basa basi dulu hehehe biar blognya lebih mendidik dan bukan berisi bacotan doang bener
Jangan salah paham bukan mantap mantap seperti difilm yak hehehe 😁, entar di-block lagi Ama googlenya, sakit hati boleh tapi jangan lampiaskan ke mantap mantap yak kecuali udah muhrim
Preloading
Okay lanjut Preloader atau Preloading diblog merupakan suatu tampilan yang sengaja ditampilkan oleh pengelola blog untuk mempercantik tampilan blog serta membuat blog semakin menarik tentunya, dan dengan menggunakan Preloader pengunjung tidak akan mudah bosan iya kan
Fungsi Preloader
Sebelumnya juga admin sudah membahas mengenai loading page menggunakan efek animasi CSS diblogger sama halnya dengan Preloader atau Preloading ini, fungsi yang sebenarnya adalah untuk membuat suatu tampilan lainnya pada blog dan sebelum blog tersebut memuat data secara keseluruhan maka Preloader atau Preloading 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>
.rahloader-overlay{width:100%;height:100%;background:#fefefe;position:fixed;bottom:0px;left:0px;right:0px;top:0px;z-index: 9999;}
.rahloader{height:50px;left:50%;margin: -25px 0 0 -76px;position: absolute;top: 50%;width: 150px;}
.rahloader .bar{background-color:#f80000;font-size: 0;height: 8px;border-radius:3px;opacity:0;width:25px;-webkit-animation-duration: 2s;-webkit-animation-fill-mode: both;-webkit-animation-iteration-count: infinite;-webkit-animation-name: subtleIn;-webkit-animation-timing-function: ease-in-out;display: inline-block;}
.rahloader .bar:nth-child(1) {-webkit-animation-delay: 0s;}
.rahloader .bar:nth-child(2) {background-color: #f80000;-webkit-animation-delay: .3s;}
.rahloader.bar:nth-child(3) {background-color: #f80000;-webkit-animation-delay: .6s;}
.rahloader .bar:nth-child(4){background-color: #f80000;-webkit-animation-delay: .9s;}
.rahloader .bar:nth-child(5) {background-color: #f80000;-webkit-animation-delay: 1.2s;}
@-webkit-keyframes subtleIn {0% {opacity: 0;-webkit-transform:translateY(300%);transform: translateY(300%);}30% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(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 class='rahloader-overlay'>
<div class='rahlicensi' id='mscontent'/>
<div class='rahloader'>
<div class='bar'/>
<div class='bar'/>
<div class='bar'/>
<div class='bar'/>
<div class='bar'/>
</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(".rahloader").fadeOut("slow");jQuery("#rahloader-overlay").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: #161617!important').html('Created with <i style="color:red;-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
Perhatian: Preloader ini sangat stabil Apabila kamu menerapkannya didalam template blog kamu langsung oke, mohon maaf Apabila pada saat kamu merefresh halaman ini preloader nya tidak bisa berfungsi secara baik okay