Bacakan

Cara membuat preloading keren menggunakan efek animasi diblogger

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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes.com

    Template mirip xmlthemes.com

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes.com

    Template mirip xmlthemes.com

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes.com

    Template mirip xmlthemes.com

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes.com

    Template mirip xmlthemes.com

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes.com

    Template mirip xmlthemes.com

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • 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.