Animasi Page Loading di Blogger

1. Silahkan login  ke Blogger.com

2. Klik Template => Edit HTML
3. Cari kode ]]</b:skin> atau </style>
4. 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZiCk82YQyo_KIcDCWUkF8S7Mffk8nOKVyv8iKV0mb0JG9EyV4IJOGBEBofOtJ6TwMtap6UrEBlXT9O4EVXR5zNWG2rL9AfTxpdlFe4D7_SY963hZb8RGVidolUtAnJvSp1G2rYSO9-keP/s128-no/loading.GIF') no-repeat 50% 50%;padding:1em 1.2em;display:none}

5. 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'/>

6. Cari kode </body>
7. 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>

8. 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Ko7X9HB98p99r-h9_1B-XDM_xgFNw36zYq9LkBNJRcg6g6ZuDjOi0exm0IDJBqg5b1QJyLuqzhe99UuLsBaaWV-mk5VyF83htpY337e9IoSJ94IO4SeJbAPCEbmwlTGBKFjXdvJlI-A/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSL8PXMnRcO0dZHjZ2J_pr_YUszp_T60xXFkL06fVtDtC36Z2MQtVdNnlIZjzZERhK90DVnbO8gHRots8CJoD0xGKHoqdcx9PFKIFsIcr7St3Cpe63XQs3kdP5ezE4RL31fzIX9giwvwM/s128-no/Loading7.GIF

Efek Animasi Loading Page 2
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLETwEJrMzqVv5Ob6QvLVnexOAArBwCqaV_r1-COqaBxkPyIeuVVl8dHkwlM40Ng7WjOiayMrIaG4FC5WrC3pLrZFnXJBxGSBOUsBSFW6_IyFWFP99IH6bRygxR1OkStypZyfoCcu6Tbk/s128-no/Loading2.GIF

Efek Animasi Loading Page 3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaBsr-AKJMqtUC6Xn2eVg5j-seL_kxsRWFmAQq88lzb06l_b11uoYFVa8l4gYWemIheIP-e3EmMc01VvwGA5WfBmdqVqdEqQt2_14kH-9ZwdSPP_erk7ifbqT63MUt0k9yEQrru2Wcpcs/s128-no/Loading3.GIF

Efek Animasi Loading Page 4
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM8W4zL2fLRniv_WjZbm5EXRWE4GdGrhyphenhyphenReqd-G4grUhP65t36iTrv19bTSD-_6H_OzZbDkEL82fX5zp1uWV3EXB_PgkJxMkg_AmRCcMDm4m3pqHJeNrK-nGxsruVuwXRxYlQn8rcXcHE/s128-no/Loading4.GIF

Efek Animasi Loading Page 5
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_KXuv4eWGP1VO1KQiZ-2VRpafeOte47ZDQNykg6I4-l9dpge_y5T81J8-h_loNMk3zUCsY71OcGP3eCv0A_zr6qC8bzeNHZBBBIjCGjVTWOTvcO5j1FMVoYP30siTv4LptfMYE3it8WM/w124-h128-no/Loading5.GIF

Efek Animasi Loading Page 6
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUapc6SNdr0ihFqueixoltJDvDGG8eLB0yzmYu8vmsxceObdKC_JDqgxnq_siJiP99aPqf2YbugQ59niaiEjK2YZl07pSKsQihUnMchOVXUTmP7jo3hYl1AQyxZcXFdTplk-bC1pWVXM/s128-no/Loading6.GIF

Efek Animasi Loading Page 7
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik2Jk74PYe8POGD5A0Cy3Hj5tVniA1LFWL4SjVWOjCUxQ9AiVOhwKhLq-YiI-W2XOnCUgs6igBA4x1hE9jRJxJNjqDEDN2C94D9nOaveloVNIXhuiO9cVBY_2gnJTAZFGAGE4-u_J35aM/s128-no/Loading1.GIF

Efek Animasi Loading Page 8
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhucsanqf8Q7i3XKv6JkBk0aoIK-uY-IqJPehUsvL8e51E96fkx6Q_tiG12vqvCGlDoISU38T7uC2hciobUMyegiTMt-OVmBl_R_-GpBZf_DMHv1zJGCVqks6Dp3vv1mnP0GIttnk9xd_o/w128-h54-no/Loading8.GIF

Efek Animasi Loading Page 9
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_1faROZ3EQ0Muyf05C8mMQNMOOFrd7QhG4JNA1eL50DDeHvTIwyN1zaj3a7Wan6QeOeBwgER-SmRuhcyksy8H1qwz-3Hk21VjSMFFW1hpY45uWWGUTdZ6xSGK5ZsFqDE_o0cyCpVXrPQ/s128-no/Loading9.GIF

Efek Animasi Loading Page 10
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUGVZx8-ZtVa4iwLI8X2_2WDmHV7770Qd850toY3Ne8atYG2rCmYkfnp2lCXydW3FymYoqoM5rAnIxrNGkXENnMsVkaMUeHOadNKCjzkfCVG4-QHg258jOyQ6uNXxtI8zXjpZm4Kg4mFw/w128-h40-no/Loading10.GIF

Thanks for reading Animasi Page Loading di Blogger. Please share...!

About Fran Fallo

Related Posts