siapa sih yang nggak mau Blog nya tampil beda/tampil keren di mata para pengunjung.. nah untuk memperindah blog kali ini blog-mas tedy akan berbagi cara membuat Efek Loading Rubik Blog keren nih.. siapa yang mau silahkan anda simak. dan jika anda tidak berminat atau tidak mau silahkan anda berbagi kepada teman teman anda biar sama sama merasakan betapa kerenya..
langsung saja yuk simak..
Cara Membuat Efek Loading Blog Kotak Rubik
Langkah 1
1. Masuk ke Akun Blog kalian
2. Masuk Ke Template >> Edit HTML
3. Cari Kode </head> untuk mempermudah tekan CTRL+F tulis </head>
4. Pastekan Kode Berikut Diatas Kode </head>
<style>
/* loader http://purwakartailmu.blogspot.com/*/
#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>
2. Pastekan Kode ini di bawah <head>
<div id='SEO BLOG-load'><div id='SEO BLOG-progbar'/> <div id='md-loader'> Loading...</div></div>Klik Simpan
Nah gimana sob.. sudah bisa..??
jika masih kesusahan silahkan anda bertanya di kotak komentar...
sekian postingan dari saya.. semoga cara membuat Efek loading blog kotak rubik yang saya sampaikan dapat bermanfaat..
Wah keren nih gan efek loadingnya, pernah saya liat di blog orang.
ReplyDeleteizin coba dulu gan:D
wahh keren nih :D
ReplyDeleteizin comot gan :D
wah ini nih yang mainstream, pake juga ah :D
ReplyDeleteijin pakai
ReplyDeleteWahh Keren gan Efek Loadingnya :D ..Ijin Coba ya.
ReplyDeleteyg langkah 2 ko ada kesalahan saat pemasangan gan. kaya gini "div should not appear inside of head"..
ReplyDeletemohon bantuannya :)