» » Cara membuat Efek Loading Blog Seperti Windows 8 Keren

Cara membuat Efek Loading Blog Seperti Windows 8 Keren

Di Terbitkan Ardana



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

Diterbitkan Oleh : Lebihunik.com

ARTIKEL TERKAIT

Labels: