Cara Membuat Efek Animasi Loading Keren Pada Blogger

Cara Membuat Efek Animasi Loading Keren Pada Blogger

Cara memasangnya cukup mudah, sobat tinggal mencari </body> lalu simpan kode di bawah ini tepat di atas kode </body>

 

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

Nah setelah itu sobat tinggal menambahkan CSS di bawah ini dengan cara mencopykan dulu kode di bawah ini, lalu pastekan tepan di atas kode ]]></b:skin>

page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #000 url("URL IMAGE") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}

Setelah itu sobat tinggal ganti tulisan URL IMAGE dengan link gambar yang akan sobat gunakan, saya sarankan sobat untuk menggantinya dengan gambar gif atau biasa disebut dengan gambar bergerak. Jika sobat malas untuk mencarinya, tenang saja saya sudah sediakan beberapa gambar yang mungkin akan cocok digunakan di blog sobat, yuk, langsung kita lihat saja gambar gambarnya di bawah...

Kumpulan Gambar Loading .GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipt9Og5HKUnWGt-Yi4WHE8UbbvFVQY4-orcwWTK5zmgYLcjMT4m3D2ppm9rEebszJ7n3XbH0PnHEUtAHfB1bp8U46orNH3gV0a_by0c4cJop3roDducFCcVlQfeTLoi0kF0qxUC_wvZhA/s1600/Loading1.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgByvlWDm0uy5l5czoFscmSer-_qIIJ4ZNmvMAAI_ZcUfg92o99f9XXHAL1QOz5aPqGQSaBGbTOVKu_oRLgQTwoWirDzynOHzcCFqfUbJvtMA3XoT0zpfLtDlNyA-DbDmaUwjL1COHTKiM/s1600/loading3+(1).GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr_EBA99WDW7u6Tcss2IdpwRx-vZaFF2JlLqK2UeDQYlPDQZtMfUiqMf7h1_yqKktEKb9eNO4n4FDk2YCLzDPqw6GNeO37sKRoo01Q4-lxriGaFrJk9164uS7D0kW-YkkR6DDWO_sM0xI/s1600/Loading6.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8KmFb87pVWYHhGvetjx8b1j56G_3ANt5aAw_KFjAqk7BxQIid-DL4HWVlztDaSzEMM13d_uIJEmXGFVehdaBM1_Yh5cB4UO_6WDglk7bR_znCCeTxlSps-Ph9z4TFe9r8DlqL8pBuQF8/s1600/Loading4.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg22ZHNTFG5pb8mOxONTOK9l-9ztl7vYHvPA08yAYy8IWNbq81s6qxqnm-Ju5Aqx6qTOdjrBGjjkvzhfUK3IKjAvT82JqGbD4aTkwU6WsP7m2AS_EBMTNdEFr8JrAj9TX7cHxYgVB9YdF4/s1600/Loading8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqsEXIUVMKc2NVV01KJoi7QBvIpIqMhYwpzGYx1Hc2vJrDSrwS81iwXwrwpe5wtyPFyuHn0XYq8zkHQeXmRDq26n35VqpE5Ogn9qaqMK8NYLikgo_DTV443mqqZOocz28-B8RE5nzBnHI/s1600/Loading9.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8hE7ogZh5GBGT0L0cuA7oPAYanZxyaLn5zQIOdLeJzOhNsnFmQqsTZHAU6iU-UiYsUcoAkXB4EwWMtu0kcTTuq3A9P9YkAydsT5ibXlBUsEONVWIRVW5jgv-4rIRO9xEvIbFWn251DLM/s1600/loading9+(1).GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA4axnL7b39Rk55EepXeKMAjfSLD0gr00tlGQdhNOmNyXKaPs4BH4G79FIP2QfdvoKK-0p5Jsv073Ky0SI6eX9jzhmFaHg-8pvQ6fWJ1AmTNEKUZ6QgcR39PRD3oPhadDFYI_Iwd9IpwI/s1600/Loading5.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5qDk-tIJANOhaJJCZejmBytEqf88PiwjhEvBXGu33wlzqmPBdQHHzpTLMkiMGyPmaCgSjRd4BVuHBW81OffVIK9vjFdjQCh6b5b8yWtRACii0VoKVNVPPxqe1ihJaG1DuxahB5WVFCtk/s1600/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5MGRdHWOLA2mmQCyHYljdBv6N06VgdkEWNXGam0EsK1I6EeVUGXRyVeUKIJhtc_FcG-stR7a6O1S1JweSJu7kiNUf2WfH_pkbQ7HkpMnHuSDKPWh9qu0yLfnmSgmVvcYhSxLfLqjtJsk/s1600/loading1+(1).GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUVsFixLAexHrezxnvQsRbqP-uFPCdAu9bdcMkeekzc4v7MpLVMEkHbY0nzxsMPDY2LChdHLM_F_WCo6I3GX_lhyonvrwdNjwISU8ANhUABc6-HXmXFJuH4I39hqEFWpYg5xG6S74kRKc/s1600/loading2+(1).gif

Nah itulah kumpulan gambar gambar GIF loading keren pada blogger yang sudah saya kumpulkan dan saya bagikan disini, untuk gambar lainnya sobat bisa mencariny di google, dengan kata kunci "loading .gif" sobat bisa menggunakan link gambar tersebut.

Sekian Cara Membuat Efek Animasi Loading Keren Pada Blogger, sampai ketemu di artikel selanjutnya