Cara Membuat Animasi Efek Loading di Blog

Cara Membuat Animasi Loading di Blog - Bagi sobat blogger yang ingin memperindah tampilan blognya, sobat blogger bisa menambah beberapa tampilan yang sederhana tapi bisa membuat blog terkesan lebih indah.

Salah satu yang dapat memperindah blog yaitu dengan menambahkan efek loading pada blog. bagi sobat yang ingin menambahkan efek ini, silahkan ikuti langkah di bawah.

1. Login ke akun blog anda dan klik template - edit Html
2. Cari kode </style> atau ]]></b:skin>. Jika sudah ketemu, letakan kode dibawah ini tepat dibawah kode tersebut.

#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/AVvXsEih2pibpYyMc40xyrhtGl9c_Crwo1u9Zvz6ueifIzVMCXabzy375DLgv1U8vR0LsiU4cR2-Pc8RQSG1xsbGI0WbyzrBuPrSulLb0Cv2TOdhkZ8XjnOUgEFGaZee73DuZKnbzQTvcfWN1eU/s128-no/Loading7.GIF') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
}

Silahkan sobat ganti kode dengan background merah dengan efek loading yang sobat inginkan.

2. Caro kode </head> dan letakan kode berikut diatasnya, Jika pada template sobat sudah terdapat scirpt JQuery, lewati saja langkah ini. Karena tidak boleh jika memasang jQuery lebih dari satu.

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

3. Tambahkan kode berikut dibawah kode </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>

4. Simpan.

Coba lihat blog sobat, apakah sudah terpasang efek loadingnya. Semga sudah terpasang ya, Sekian postingan saya kali ini.