Animasi Page Loading Di Blog

Pada Dasarnya anda akan menikmati sebuah tampilan menarik saat anda membuka sebuah website, sebelum memasuki halaman web atau blog si suguhkan berbagai macam page loading hasil creasi dari setpa pembuat

• Silahkan login  ke Blogger.com
• Klik Template => Edit HTML
• Cari kode ]]</b:skin> atau </style>
• Paste kode css di bawah ini tepat diatas kode ]]</b:skin> atau </style>

/* Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('https://lh4.googleusercontent.com/-lvlkiOAd4UA/U6qOQ4uFtUI/AAAAAAAAD58/wqTdiNc3M0g/s128-no/loading.GIF') no-repeat 50% 50%;padding:1em 1.2em;display:none}

• Copy dan Pastekan code di bawah ini tepat di atas   </head>

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

• Cari kode </body>

• Copy kode jQuery dibawah ini, lalu Paste diatas kode </body>

<script type='text/javascript'>

              //<![CDATA[

    // Animasi Loading

     $(document.body).append('<div id="page-loader"></div>');

    $(window).on("beforeunload", function() {

        $('#page-loader').fadeIn(500).delay(5000).fadeOut(1000);

    });

   

     //]]>

</script>

• Copy dan Pastekab Kode di bawah ini tepat di atas ]]></b:skin>

#page-loader {

    position:fixed !important;

    position:absolute;

    top:0;

    right:0;

    bottom:0;

    left:0;

    z-index:999999;

    background: #1E90FF url("http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif") no-repeat 50% 50%;

    padding:1em 1.2em;

    display:none

    }

Beberapa Gabar Animasi Menurut Kesukaan Anda

Efek Animasi Loading Page 1
https://lh3.googleusercontent.com/-bixcnTkh4q4/U7nQUNmm3_I/AAAAAAAAEDU/YE9s5MKfa60/s128-no/Loading7.GIF

Efek Animasi Loading Page 2
https://lh4.googleusercontent.com/-Y2S2txttvPw/U7nQPi0h5MI/AAAAAAAAEDU/rsMYnz5-yn0/s128-no/Loading2.GIF

Efek Animasi Loading Page 3
https://lh3.googleusercontent.com/-tjFFryWgIcs/U7nQQ0x7JHI/AAAAAAAAEDU/v2BqyuIvCc8/s128-no/Loading3.GIF

Efek Animasi Loading Page 4
https://lh5.googleusercontent.com/-kXvhQBHoB0s/U7nQRhwcIxI/AAAAAAAAEDU/WDhTfSJOii8/s128-no/Loading4.GIF

Efek Animasi Loading Page 5
https://lh5.googleusercontent.com/-JN0Uo9ud0SY/U7nQSv_-HfI/AAAAAAAAEDU/NfHcUkP27QY/w124-h128-no/Loading5.GIF

Efek Animasi Loading Page 6
https://lh5.googleusercontent.com/-sGFHLSRy2OI/U7nQTn34h8I/AAAAAAAAEDU/0PUXPSEACPc/s128-no/Loading6.GIF

Efek Animasi Loading Page 7
https://lh4.googleusercontent.com/-1nnz_q-zdlE/U7nQPsC7zvI/AAAAAAAAEDU/a3A-LG1mM0I/s128-no/Loading1.GIF

Efek Animasi Loading Page 8
https://lh5.googleusercontent.com/-sbG2UKoWYpc/U7nQUtY6YOI/AAAAAAAAEDU/Oc22arnyymc/w128-h54-no/Loading8.GIF

Efek Animasi Loading Page 9
https://lh5.googleusercontent.com/-H8yWVVQ78Wk/U7nQVZTbQqI/AAAAAAAAEDU/a-aWtzRZlls/s128-no/Loading9.GIF

Efek Animasi Loading Page 10
https://lh4.googleusercontent.com/-qqEpMJ9PeoI/U7nQO-rfprI/AAAAAAAAEDU/YvXcmUbolGc/w128-h40-no/Loading10.GIF

Tweet

Ditulis Oleh: Fransiskus Fallo at 9:23 AM