tranlate blog

Minggu, 31 Januari 2016

cara membut efek loading rubik

hallo sobat kali ini saya mau post tentang CARA MEMBUAT EFEK RUBIK DI BLOG para pengunjung yang datang ke blog sobat akan betah berlama lama.

Cara Membuat Efek Loading Rubik Pada Blog


jika sobat tertarik untuk memberikan efek rubrik yang mengacak pada blog, berikut tutorialnya:

1.Sobat masuk terlebih dahulu pada blog sobat.
2. Pada dasbor blogger, klik menu Template.

Cara Membuat Efek Loading Rubik Pada Blog

3. Selanjutnya di dalam menu Template, klik Edit HTML.


Cara Membuat Efek Loading Rubik Pada Blog

4. Carilah kode </head> untuk mempermudah pencarian, klik CTRL + F pada keyboard

5. Setelah kode </head> di temukan, letakkan kode di bawah ini tepat berada di atas kode </head>


<style>
/*  loader http://dherma-technology.blogspot.com/*/
#SEO BLOG-load {
position: fixed;
z-index: 50;
top: 0; left: 0;
opacity: 0.9;
width: 100%; height: 100%;
background: #FDFEF8 url() 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($){
$(&quot;html&quotwink.removeClass(&quot;MD&quotwink;
$(&quot;#header&quotwink.ready(function(){ $(&quot;#bingangbingung-progbar&quotwink.stop().animate({ width: &quot;25%&quot; },1500) });
$(&quot;#footer&quotwink.ready(function(){ $(&quot;#bingangbingung-progbar&quotwink.stop().animate({ width: &quot;75%&quot; },1500) });
$(window).load(function(){
$(&quot;#bingangbingung-progbar&quotwink.stop().animate({ width: &quot;100%&quot; },600,function(){
$(&quot;#bingangbingung-load&quotwink.fadeOut(&quot;fast&quot;,function(){ $(this).remove(); });
});
});
})(jQuery);
</script>

 6. Selanjutnya, masih di dalam Edit HTML, carilah kode <head>
7. Setelah kode <head> ditemukan, masukkan kode di bawah ini tepat di bawah kode <head>

<div id='SEO BLOG-load'><div id='SEO BLOG-progbar'/><div id='md-loader'>Loading...</div></div>
8. Terakhir, klik Simpan Template dan lihat perubahan pada blog sobat. TERIMAKASIH ATAS KUNJUNGANNYA

6 komentar: