Cara Membuat Efek Loading Di Blogger.

Tutorial 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 dijelaskan sebelumnya mengenai cara membuat animasi loading dengan keyframe di blog dan membuat efek animasi loading blog lingkaran. 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.

Membuat Efek Loading V1

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.

<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/AVvXsEh0_VqmW2sz-zHVkPQTzmLTR0lnYsmQb17M5mvQRYXRGbCUlxHvMEbELWM961YJlix5czbz_CT1nOKhCRqf-9v0pGW3iU-Rykx7o8e0bFJg_UUhbOLP-s2DRcHgtx9ajhU4eS8XPc9suV4/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/AVvXsEj4inlejlDlLr8x_yG7YxmjL1tA9djvFqCplqu-JyjQX5UOq55bEC_Dt5pvdYgL_kTqeZX0lso2yn8I3-bMH-HDSXlV2Xy9XyAdjzvRZcdY8H-NB6IqRQXOOERmX_bDIpJGXa7JwWkfazUw/s1600/loading1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkkVge8gPj2geOUl0owVfx7nxZBjZkrY54l7Xh2c8j3dGtsszeYIbGME8kfV8kaSn4pYO9gQ3_k7EB88ISyRbU1JxCIkNG7uWDLTS9FJdp9hNra1Sil0CrJgn2h2eOG1eU7l-XRHUizeks/s1600/loading2.gif

http://2.bp.blogspot.com/-2LpTZKLCHZU/UQaikSjwuI/AAAAAAAAFOY/vXpl8uZ7mGc/s1600/loading3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYOHDf-k0rKys2BYAVWBbVhsgeHOR0U1YNl7F53CBy-bb8NolkBeOBkPS7gZaJwsT26jozs3t5VlXz598jMxPF4D6akKmcjpo_kt6et8eFPbc4q0WRzGATzWDr-9lB4k77iYZf8R5qiaAO/s1600/loading4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HhTLnki7Q5dQwh3JvzvOtBuGFlTrgA29yIZLscguPCZGo8rcH0HY1Pwa1RGaq4MtqZwDq__akEZCEH0d8_i7VtTluEQcV_XzvxP7YU4bsn9F8B_8KLCdoz7nusK-GibmgtTbI1G2ghe6/s1600/loading5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKqvMaJX13ejrDni6eFbsTF_ZocXpdZ2rBE5l0nNSPkvb2FFijRzW-qFlZLdXg89RODsE0zwtCdPRlZy3CupM2xuCxa27h-7fB3Nt1KOGAYQ1I28PB56azG-BbeOkwohx_TEz54z_Z59NL/s1600/loading6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii_soEczgClq6oWlJaj0fnCaJlE7fErfDUPO8gT0Y5PFIZp5l7AO5JhEze_D7zxnNxtDHg3m56aVxaVBXxfMd8iSSRsZI3GDfQq5HhkTu2XesZ8oHGCn5upwbJQMgUECi4OBT5hiWJuBiQ/s1600/loading7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd-SERpHu9WW2aJ2-lRwIjiTHJiRJPxmQMj81H2-jV3ixJbEUiDelumwaGgOs-DMFkRDmFAdZKwqpMIoHEswEnEfxubcsUabHa3jFFEy9baHKyH7f_giOfawFEAOLZiqO4w_Kv6khtR_LW/s1600/loading8.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8PoxFXmixEJb2WbKnCGyfH8GQTy0uFhCL__Ocar2aPxZHxYQd65-qrwhjWk25vGkUpUOCBoA5T1lnqZ0TCbe11UBw5jK8XG0guBl_2PcPR9V0pkoHyA_p4x6b5es_xXmVYfEkO6N0aDLq/s1600/loading9.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeZKDzqGoUXJfXYqWsztcfGRMjwEjVeYDNUAsZ7vbgDBgBsz9bClJX37FxlPmYVMn-ajM9eIDQmdUHqfJtOY5l_dykLTNGCmCaaK9etQoFwYbAyEB7HAEbKQ6v4X9ox0bIfbvPcq2oHuVs/s1600/loading10.gif

Membuat Efek Loading V2

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>

Nah sekian tutorial seocips.com untuk saat ini semoga bermanfaat dan semoga efek loading blog ini dapat mempercantik tampilan blog sobat.