Membuat Efek Loading Blog Elegant Seperti Blog Zonatio

Membuat Efek Loading Blog Elegant Seperti Blog Zonatio

Membuat Loading blog elegant keren dan simpel - Sebelumnya saya sudah banyak membagikan cara membikin efek-efek loading untuk blog anda, seperti loading menggunakan flash gambar animasi dan juga progress loading bar seperti situs YouTube. Tetapi kali ini saya ingin mencoba tutorial yang fresh untuk anda coba.

Loading blog yang akan saya bagikan ini sangat lah sederhana tetapi terlihat klasik, elegant dan lebih menarik dari sebelumnya tanpa mengurangi kecepatan load blog sobat, dikarenakan tutorial kali ini hanyalah menggunakan sedikit kode jQuey beserta CSS sehingga tidak banyak mempengaruhi. Nah jika sobat ingin mencoba membikin loading blog yang keren ini, silahkan anda lihat screenshot dibawah serta cara pembuatanya.

Membuat Loading Blog Elegant Seperti Blog Zonatio

1. Login ke Blogger, dan Klik menu Template => Edit HTML
2. Silahkan anda simpan kode external jQuery library berikut ini tepat sebelum tag </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
INFO : Jika pada blog anda sudah terpasang kode jQyery library, silahkan anda lewati langkah ini, karena dengan memasang lebih dari 1 dapat mengakibatkan konflik ( semua kode jQuery tidak akan berfungsi)

3. Copy kode CSS di bawah berikut, setelah itu silahkan anda paste tepat sebelum tag </head> :
<style>
/* LOADING HALAMAN */
#loadingHalaman {
background:url(https://lh5.googleusercontent.com/-FjPBmaz4eZ0/VHPOQKFFodI/AAAAAAAAGA4/A64qYQ7YaMs/s1600/dark-loading.gif)
 no-repeat center;
background-color:rgba(0, 0, 0, 0.32);
width:100%;height:100%;
position: fixed; left: 0px; top:0px; z-index: +100000;}
</style>

4. Silahkan anda Copy kode HTML di bawah ini dan paste tepat setelah tag <body> :
<div id="loadingHalaman"></div>

5. Langkah terakhir simpan kode jQuery di bawah ini sebelum kode </body> :
<script>
//<![CDATA[
//Loading Halaman
$(window).bind("load", function() {
    $('#loadingHalaman').slideUp(1000);
});
//]]>
</script>
Selesai!
Untuk demonstrasi langsung anda bisa masuk ke www.zonatio.web.id klik salah satu artikel dalam blog tersebut untuk melihat tampilan demo nya. Nah, Semoga artikel saya mengenai Cara Menampilkan Loading di Blog paling Simple ini bisa bermanfaat bagi semua sobat blogger yang membutuhkanya!

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »