CARA MENAMBAHKAN EFEK LOADING DI BLOG

Cara membuat efek Loading di Blog. Seocips.com tentang Cara Menambahkan Efek Loading di Blog. Ok sobat tutorial seocips kali ini tentang Cara Membuat Efek Animasi Page Loading keren di Blog Blogger. Mungkinsobat mempunyai alasan tersendiri untuk Membuat Efek Loading Pada Blog, misalnya adalah untuk mempercantik tampilan Blog, atau membuat terkesan pengunjung Blog anda karena lebih terlihat keren.

Berbicara soal efek diblog telah dijelasakan sebelumnya mengenai cara membuat efek hujan salju diblog dan cara membuat efek bayangan ditemplate blogger. Beberapa Blogger tidak memasang efek loading seperti ini karena walaupun loading blog kita ringan tapi akan memiliki kesan yang berat di mata pengunjung, tapi tidak apa untuk anda yang ingin tampil "cantik", hehehe. Ok sobat berikut ini adalah cara memasang efek loading ke template Blogger anda.

Langkah 1 : Tambahkan jQuery pada blog sobat. Simpan kode di bawah ini sebelum </head> dan Apabila template sobat sudah memiliki jQuery seperti dibawah ini, lewati saja langkah pertama ini. karena tidak boleh ada script jQuery lebih dari satu.

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

Langkah 2 : Tambahkan CSS. Simpan CSS ini 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/AVvXsEgT3-KFUqqHicSaXEo7SoHwMewOsbAU77ACtltoNi1_MZcB4m2sNCvB-wtbEN7RD5L97Bfqh_jHfX_5nHmd6PADJASHMnj8nXKnGIR8RMkuke_DUOu6AIB-teyPbqmNdCEZ0Q5q5kwiuMg/s200/load6.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
}

Langkah 3 : Tambahkan JavaScript. Tambahkan kode JavaScript 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>

Kode berwarna biru diatas adalah gambar animasi yang akan ditampilkan waktu loading, sobat dapat menggantinnya dengan gambar sobat atau pilih beberapa gambar animasi efek loading blog dibawah ini.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5FrnJK7KQayCVmDMEmLALqoDpgc6i6l8slWNzQkCN4h-ErykpDvDOMAv094nZMjHTTTRZainQgtEMSigGY1Hua5Y1TKb8pdRtnJavr5pYJ7WKOeBCHYub_IQXxt-dYflqTeFcLGGYW2T8/s1600/loading2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguMxwKVloFm-TR4uFxQg4pD6zhwrpC_1LLdReTGyA44s6rv38lQhL7XgnihzC2z3TmheA7SKbbSOw1_-cBWQqeB89pDL5sJEUzknZci3xEH88fJ5UIDnZKxwZZJFizJDvQn-FwL9dPHRAq/s1600/loading3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirFo4WpvuWUuEck5nw7_23SCIh7Jw9q78w6Udk4QVY4mq9zeA_2oX78YvnggpyA2Os8AmbqVLqjN_0oy1SR5sOqdg1nFAc4-l5-qnTtMDmPlTn8vVIOTj_no7EOcHg0BQyXvbSKYHwse1K/s1600/loading4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqnCJelqGI6nTjKZI_urFCBa3L83xKBC-8WOZnapF3fQsJg-DKUBobPsn2WW4sp20mnHSi3R0Pcm0q7KRQ8cbs6EhhO8B84h8Glrd5-cCyXNwpqzuD-XRtwrAJ_IWw-lkryQfKQVq_a5zQ/s1600/loading5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrpL6ZrdUUXuo050-cGvbDfDEZdOfgnU8dB9LD7S5UQsMk3xaStGl4GN-Vh_IgpAUTk1Q6_HX2pJsAtAcHVr42WB5jRhWUE-4vZOzBr3AVeByrvmcaFKgmBRPa8rrVISHqFI2zv-v1CT6O/s1600/loading6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisNX-cphsW6VogCaloROMZrq_swULLxww8XgTQUT7KQdrX7fx7Z2c8FjFQIqOwILRxYYHgNzwQdhJE901gp5LVKyrvD8eMfyNQVuTNhBzWJQAmgy8aNehCKGFr7JORZK_fWOC2IpfCYvv7/s1600/loading7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5eMWMsg1AsLvWWTWA2aMrfDb734JTcRnfE9i6msx3zVbzLjcx0tmSr7mFlnvQCswNdtUjPI-XC-wBsv9yfJ7BpqsaDozMUJfkFjIieCvmtOHPChowHnoMkEyUN-1b13_wcomGzHUV_Eqy/s1600/loading8.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLflkiHrHi-RMjP0p9RUN762reHGJBciISHtYPdRY2MLNT-GX36XhFuIddzsr0BklpXZVMjSoXzZ5Q6cgWYqRcJkigbWCUXsZu5htkUUlwuouK_RpdeK3haSuxrWL2ylRhRo9U0VoA36tY/s1600/loading9.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh99Ei_E5cmphLu6AQgbbtrLcpyegX3l82v3x9Oxp-Z2NjnYWO7D1mzKyf2IsW9_zXc_p3eeAt3DDxEPzMQEbD7MQBuIPsZTdysXOTXpty87JXbopJ2EsKw4o_W5EQ_6R0DWd7GLsIyOLkK/s1600/loading10.gif

Selain kode diatas ada juga kode loading halaman seperti yang saya gunakan ditemplate sebelumnya. kodenya adalah seperti dibawah ini, dan cara meletakannya adalah sama seperti diatas.

#loadhalaman{position:fixed; opacity:0.93; top:0; left:0; background-color:#000; z-index:9999; text-align:center; width:100%; height:100%; padding-top:20%; color:#000; display:none}.loadball{background-color:transparent; border:5px solid #00a3ff; border-right:5px solid transparent; border-left:5px solid transparent; border-radius:50px; box-shadow:0 0 35px #00a3ff; width:50px; height:50px; margin:0 auto; -moz-animation:spinPulse 1s infinite ease-in-out; -webkit-animation:spinPulse 1s infinite linear}.loadball-2{background-color:transparent; border:5px solid #00a3ff; border-left:5px solid transparent; border-right:5px solid transparent; border-radius:50px; box-shadow:0 0 15px #00a3ff; width:30px; height:30px; margin:0 auto; position:relative; top:-50px; -moz-animation:spinoffPulse 1s infinite linear; -webkit-animation:spinoffPulse 1s infinite linear}@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px#00a3ff}50%{-moz-transform:rotate(145deg); opacity:1}100%{-moz-transform:rotate(-320deg); opacity:0}}@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px#00a3ff}50%{-webkit-transform:rotate(145deg); opacity:1}100%{-webkit-transform:rotate(-320deg); opacity:0}}@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}

Dan langkah selanjutnya tambahkan kode berikut ini diatas kode </body>

<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
    var siteURL = &quot;http://&quot; + top.location.host.toString();
    var $internalLinks = $(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], a[href^=&#39;../&#39;]&quot;);
    $internalLinks.click(function() {
        $(&#39;#loadhalaman&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
    });
    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target=&#39;_blank&#39;
    $(&#39;#loadhalaman&#39;).click(function() {
        $(this).hide();
    });
});
</script>

seocips.com