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.
Cara Membuat Animasi Efek Loading di Blog

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://lh3.googleusercontent.com/-bixcnTkh4q4/U7nQUNmm3_I/AAAAAAAAEDU/YE9s5MKfa60/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.

Komentar

Aunillah mengatakan…
Maaf itu gak bikin lelet yah???
Patrick Prasetyo mengatakan…
loading blognya bisa dimodifikasi nggak ya. Kalo bisa, jangan lupa bagi tutorialnya. Jadi, biar tidak terkesan kembar gitu sapa punyanya yang lain. Oke.
Unknown mengatakan…
Menurut saya tidak gan
Unknown mengatakan…
Bisa gan, tinggal ganti url gambar yang diberi background merah
Anak Nelayan mengatakan…
menarik sekali, saya suka yang indah-indah :)

Postingan populer dari blog ini

APA ITU AGROTEKNOLOGI?

Cara Menghilangkan Redirect Pada Template

Cara Menampilkan Subtitle Film di Android