Game Nostalgia

Download Harvest Moon Back To Nature (Bahasa Indonesia)

     Assalamu'alaikum wr.wb. hari ini saya ingin memposting File Harvest Moon Bahasa Indonesia.iso buat di komputer. langsung aja nih d...

Animasi Page Loader Keren di blog

Scholovers Blogger | kali ini admin akan membahas Animasi Page Loader Keren di blog. Animasi Page Loader Keren ini memberikan efek loading animasi Circle keyframes kurang lebih seperti pada gambar berikut.



Baiklah jika sobat tertarik untuk memasangnya, maka silahkan ikuti langkah-langkah berikut.





  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya :

/* PageLoader V2*/
#pageLoadaka {
position: fixed;top:0;left:0;background-color:rgba(5,5,5,0.9);z-index: 9999;text-align:center;
width:100%;height:100%;padding-top:22%;font-size:25px;color:#fff;display:none;}
.loader {
background-color:rgba(0,0,0,0);
border:5px solid #fff;
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:60px;
box-shadow:0 0 35px #fff;-moz-box-shadow:0 0 35px #fff;-webkit-box-shadow:0 0 35px #fff;
width:100px;
height:100px;
margin:0 auto;
-moz-animation:berputar 1s infinite ease-in-out;
-webkit-animation:berputar 1s infinite linear;
}
.loader3 {
background:#eee url(http://4.bp.blogspot.com/-gwF5IOqEEU0/UI0kvUoDgWI/AAAAAAAABb0/_Qt5Yj3qOJM/s1600/cyrle.png) no-repeat center;
background-repeat: no-repeat
border:1px solid #fff;
opacity:.9;
border-radius:45px;
box-shadow:0 0 35px #fff;-moz-box-shadow:0 0 35px #fff;-webkit-box-shadow:0 0 35px #fff;
width:70px;
height:70px;
margin:0 auto;
position:relative;
top:-181px;
}
.loader2 {
background-color: rgba(0,0,0,0);
border:5px solid #fff;
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:45px;
box-shadow:0 0 35px #fff;-moz-box-shadow:0 0 35px #fff;-webkit-box-shadow:0 0 35px #fff;
width:80px;
height:80px;
margin:0 auto;
position:relative;
top:-100px;
animation:berputarkecil 1s infinite linear;
-moz-animation:berputarkecil 1s infinite linear;
-webkit-animation:berputarkecil 1s infinite linear;
}
@-moz-keyframes berputar {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #fff;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes berputarkecil {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg);  }
}
@-webkit-keyframes berputar {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #fff; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes berputarkecil{
0% { -webkit-transform:rotate(360deg); }
100% { -webkit-transform:rotate(0deg); }
}

4. Selanjutnya Masukkan kode javascript berikut diatas </body>.

<!-- Start pageloader -->
<div id='pageLoadaka'>
<div class='loader'/>
<div class='loader2'/>
<div class='loader3'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
    $internalLinks.click(function() {
        $('#pageLoadaka').fadeIn(500).delay(2000).fadeOut(1200);
    });
    $('#pageLoadaka').click(function() {
        $(this).hide();
    });
});
//]]>
</script>
<!-- End pageloader -->

Note: kode bewarna merah bisa sobat ganti dengan gambar yang diinginkan

5. Simpan Template dan Selesai.

Semoga Berhasil ;)

0 Response to "Animasi Page Loader Keren di blog"

Post a Comment

Syarat-syarat Berkomentar:

☻) Berkomentarlah Dengan Bahasa Yang Sopan;
☻) Berkomentarlah Dengan Bijak;
☻) Berkomentarlah Dengan Komentar Yang Berhubungan Dengan Postingan Ini;
☻) Dilarang Berkomentar Yang Berhunbungan Dengan PORNO/SARA
☻) Dilarang Berkomentar SPAM

NB: Jika sahabat melanggar syarat-syarat diatas maka Komentar sahabat akan dihapus.

Terima Kasih.