Minahsmk1

Saturday, 11 April 2015

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.
Previous
Next Post »

5 komentar

Abu Zaini delete 12 April 2015 at 04:35

Maaf itu gak bikin lelet yah???

Patrick Prasetyo delete 12 April 2015 at 06:46

loading blognya bisa dimodifikasi nggak ya. Kalo bisa, jangan lupa bagi tutorialnya. Jadi, biar tidak terkesan kembar gitu sapa punyanya yang lain. Oke.

siti aminah delete 12 April 2015 at 16:47

Menurut saya tidak gan

siti aminah delete 12 April 2015 at 16:48

Bisa gan, tinggal ganti url gambar yang diberi background merah

Anak Nelayan delete 19 April 2015 at 00:59

menarik sekali, saya suka yang indah-indah :)

Silahkan tuliskan komentar sobat dan mohon jangan menampilkan link aktif

 
Back To Top