 |
| Kotak Rubik |
Cara Membuat Efek Loading Kotak Rubik Keren Di Blog - Pasti anda sangat
menginkan Modifikasi tampilan loading blog anda dengan Hal-Hal Yang Baru ,
Karena Anda Begitu Bosan Dengan Yang Default Saya Kecuali Sudah Ditambahkan Dari
Sananya , Mungkin Widget Ini Bisa Jadi Salah Satu Pilihan Anda Untuk
Menggantinya
Langkah-Langkah Nya :
1. Cari Kode </head>
2. Letakan Kode Dibawah ini Diatas Kode </head>
<style>
/* loader */
#SEO BLOG-load {
position: fixed;
z-index: 50;
top: 0; left: 0;
opacity: 0.9;
width: 100%; height: 100%;
background: #FDFEF8 url(http://3.bp.blogspot.com/-WqA4mLrQVsw/U4COhzzQi2I/AAAAAAAABrw/57-G3Pw25ek/s128-no/Loading.gif) no-repeat center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.MD #SEO BLOG-load { display: none; }
@media only screen and (device-width: 768px) {
#loading {
position:absolute;
width:1040px;
min-height:768px;
}
}
#SEO BLOG-progbar {
position: absolute;
top: 0; left: 0;
background: #ED0000;
opacity: 0.8;
width: 0;
height: 5px;
}
#md-loader {
height: 100%;
display: none;
}
</style>
<script>
(function($){
$("html").removeClass("MD");
$("#header").ready(function(){ $("#bingangbingung-progbar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#bingangbingung-progbar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#bingangbingung-progbar").stop().animate({ width: "100%" },600,function(){
$("#bingangbingung-load").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script>
Langkah Ke-2
1. Cari Kode <head> <-- Berbeda Dengan Kode Sebelum Nya </head>
2. Masukan Kode Dibawah Ini Dibawahnya
<div id='SEO BLOG-load'><div id='SEO BLOG-progbar'/><div id='md-loader'>Loading...</div></div>
2 komentar
:2thumbup
Replywah mantap gan efek loadingnya
Replysambil blogwalking ganBlog Mas-Yudha
Notice :
- Menggunakan Bahasa Sopan
- Dilarang Spam , Flood , Junk , Iklan , Sara , Sex , Dsb.
- Dilarang OOT ( Out Of Topic )
- Dilarang Menaruh Live Link