Animasi page loader keren di blog



Posted by: Eko Hardiansyah

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






  1. Login blogger
  2. Rancangan, Edit Html, Cari kode]]></b:skin>



  • 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 -->
    5. Simpan Template dan Selesai.

    0 komentar: