Cara membuat Efek Loading Blog Seperti Windows 8 Keren

Apakah anda bosan dengan efek loading di blog anda ? Jika kalian bosan dan ingin menggantinya saya punya beberapa efek loading di blog, Langsung saja Ikuti langkah - langkahnya di bawah ini :

Langkah - langkah membuat efek loading blog :
1. Masuk ke Dashbor Blogger anda
2. Masuk ke menu Template >> Edit Template
3. Sekarang cari kode ]]></b:skin> agar lebih cepat gunakan tombol Ctrl+F pada keybord
4. Copy dan Pastekan kode di bawah ini tepat di atas kode ]]></b:skin>

/* Irfan Page Loading Effect ( http://www.irfand.com) */
#mbl-lazyloading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FDFEF8 url(http://i1273.photobucket.com/albums/y416/muhammadirfand/windows8loadingblackoriginal_zps20d6fae5.gif) no-repeat center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.MD #mbl-lazyloading { display: none; }
@media only screen and (device-width: 768px) {
#loading {
position:absolute;
width:1040px;
min-height:768px;
}
}
#mbl-progress-bar {
position: absolute;
top: 0; left: 0;
background: #de1301;
opacity: 0.8;
width: 0;
height: 18px;
}
#mbl-loader {
height: 100%;
display: none;
}

5. Cari kode </head>
6. Pastekan kode di bawah ini tepat di atas kode </head>

<script>
(function($){
$("html").removeClass("MD");

$("#header").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "75%" },1500) });

$(window).load(function(){
    $("#mbl-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#mbl-lazyloading").fadeOut("fast",function(){ $(this).remove(); });
    });
});
})(jQuery);
</script>

7. Cari kode </body> dan pastekan kode dibawah ini tepat di atas kode </body> .Kode ini hanya menampilkan efek loading page hanya pada home page saja, hapus kode <b:if cond='data:blog.url == data:blog.homepageUrl'> untuk menampikan efek loading page di semua halaman

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://d-copy.blogspot.com">D-CopyBlog</a></div></div></b:if>

Sekarang untuk mengganti effek loading pagenya, tinggal ubah link gambar yang berwarna merah dengan link kamu, atau bisa memilih gambar loading dibawah ini:

Windows 8:

http://i1273.photobucket.com/albums/y416/muhammadirfand/windows8loadingblackoriginal_zps20d6fae5.gif

http://i1273.photobucket.com/albums/y416/muhammadirfand/windows8loading_zpsca0200a2.gif

Other:

http://i1273.photobucket.com/albums/y416/muhammadirfand/ajax-loader_zps153409c4.gif

Ditulis Oleh : Rizky

Sobat sedang membaca artikel tentang Cara membuat Efek Loading Blog Seperti Windows 8 Keren. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini. Silakan di rubah dan sesuwekan sesuka selera sobat

<a href="http://rizkyekoyblog.blogspot.com/2013/08/cara-membuat-efek-loading-blog-seperti.html" target="_blank">Cara membuat Efek Loading Blog Seperti Windows 8 Keren</a>

:: Kunjungi Sumbernya ::