Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Efek Loading di Blog Keren



Salam kenyut , Kali ini admin akan membahas tutorial Cara membuat efek Loading di Blog .

Efek loading di blog membuat blog anda jadi lebih menarik , Script dari efek loading ini juga tidak berat dan blog juga terasa lebih ringan karena adanya efek loading ini .
Untuk Preview Efek Loading yang saya buat tutorial ini sudah saya pasang di blog kenyut ini , jadi anda bisa memastikan apakah efek loading yang saya pakai ini sesuai selera apa enggak .
Selain itu efek Loading ini sudah saya praktekin sendiri dan work 100% .

Oke langsung saja simak baik-baik tutorial membuat efek loading ini :


  • Masuk Ke Dashbor Blogger => Template => Edit Html => Tambahkan Kode jqury di bawah ini tepat di atas kode </head> 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>


  • Tambahkan kode css di bawah ini tepat di atas ]]></b:skin 


#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcP53RA6WFKzVHATQNCdYGartOaVodJktYSzzg0XEEc2cCOyEEeRML8TPIcZkaLTBWi72l4jPW4p8rZtYKSC9L8c4ywiMzDqitgu5v_hMhHIjcEviym1guCJqin3C_BSoyWVo2zIdjksE/s200/load6.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
}

  • Selanjutnya tambahkan Java Script di bawah ini di atas </body>


<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script> 


  • Save Template , dan lihat hasilnya . .


Gimana Mudah kan , Oke sekian dulu tutorial dari saya semoga bermanfaat .
Bila ada yang ingin ditanyakan silahkan tanya di tempat yang sudah di sediakan . .

Salam Kenyut. .