Cara menambahkan efek animasi loading ringan

Pada keempatan sebelumnya Info Xt sharing tentang " apa itu blog zombie dan bagaimana mencarinya "

Nah , pada kesempatan ini Blog Info Xt akan sharing tentang tutorial blog yaitu Cara menambahkan efek animasi loading yang ringan dan keren.Mungkin sobat blogger akan menggunakannya untuk mempercantik blog biar banyak pengunjung yang tertarik.

yaudah tak usah nunggu waktu lama lagi , Begini caranya :

  

• Tambahkan Jquery Di bawah ini atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> 

NB : Jika Di Blog Sobat Sudah tertanam Jquery Sebaiknya lw\ewatkan saja langkah ini, di karenakan di blog hanya boleh ada satu jquery :D

• Tambahkan Kode CSS Di Bawah ini Di Atas Kode  ]]></b:skin> atau </style>

     #page-loader {
    position:fixed !important;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:9999;
    background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid59YhU1mqN5JQoS4urwYJxnn-_AnnYAUy1ckp8PHa_Mw04qOmX34gp649CigQw7mF_R28qc4j7s3_QbbxvUZeoXCmAZ2aNwcUvl_yuMfdFjZlBtQoCaPd-VxRnnLaJ5D4PP8C4PdKMzc/s200/load6.gif') no-repeat 50% 50%;
    color:white;
    padding:1em 1.2em;
    display:none;
    }

NB : Ganti  Yang Berwarna Merah dengan url gambar sobat !

• Terakhir tambahkan Javascript dibawah ini di atas kode </body>

     <script type='text/javascript'>
    //<![CDATA[
    $(document.body).append('<div id="page-loader"></div>');
    $(window).on("beforeunload", function() {
        $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
    });
    //]]>
    </script>

• Tinggal di simpan deh template nya.
  
  
  Beberapa URL Gambar yang bisa sobat pakai :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKoFbtAHLO4D20IDEEm2FviAOJNBUvACL98Izq6i4zkB9h8u_-UKe60Mx4ngmKkDhPCJKjeOnM1rrfGgOxUGQHUho9mSCCurTWUIWq0x1-TMZsvKdvw2vDoVmGlIi54J9Ne3scp8UogzHx/s1600/loading1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyAcqB9l43v-7jMBT8-cBAQFNtLKOoHtSjh4CFeOq0tG_wAheAFVdUKyRKPXOik2K2vFgVUrgdan7kC1GfUJ74oZKV6OAGnk2ZcsN51V852w3JGhkzSVKMDX5odYm-sfoTrarN8SvrPWaE/s1600/loading2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm_DfOj3MPFCHLqlRyuCjjvXAgbgK8r0Bm3-uwaDiu4FmNDjjTPHq0alK9uE7-dmKR7TwgaCHjEfYFfHBsbbpV0wfyNdxnMIx-l5Chyphenhyphenf5oNRXUxdhbFoUV9M4aDVjYnchtsAwNYOPmuKlW/s1600/loading3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPAAUj5ea2Mn1fa8rju3DeOvGL6HIaXzbDTnfq3iq_LPyaP4sMkDjunYctlkP1RQua33taTYavCBiH7Knwch5xu26-4ivDzukC9C5eL8qJ5TviPvP9rty8jz2TR8YbXAciSgqNvJsM2ipO/s1600/loading4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd_2Yd_0VY_dvbikQaBE-sAYNf_dUBlrSpTD-nH_PnRI9XEGEg0RBSBfYkOa_9-hjz_9cAleo_bHX1-mZrC5eTM5uz_JC_MpigrZQoVaBBILciX_4TEP0TgZgRZ3fLI2EjdJsYeMWrYBWn/s1600/loading5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0NQp-ag6ihVLDDYLpIC1E4fIkhd_dq02HK4Jmu8JcL9ze9-YY7ru3gYW7xqPkLaL3iBbgRQIWPrrlIHfDSiZ9cVhG3Ygi64RVE1WUDpELPX9fR_7SD1OiqgyuYZ9nSwbSnzYDCgJ6Bpk2/s1600/loading6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilvM2sLmTDFbkrHLj0v3MHSs44QvDbA59DUDN5bFBmPxpN7Ne0TpijoHljuNXi9kxrJKW3dwWDnOVbsu8bIuEqim8IZWjnjllDDgqF3cwoH4X5JsejDwM3pc88GThEq8bbluUae-w7h25L/s1600/loading7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs5PLTOdfOuoJzhvFLs9x3mcf-rNNqGCHeETTvquzO9CAezWGLXxmKOGCCmskJyuwFh921Gj4SZ11aAeVJJUdtHZ8w3eMLYkQXxAM7e_1j15jWCgjzspftW76V8C65YtWRXpLZgZGbfvsF/s1600/loading8.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAE5siZi_ouYaUGthbXXXXBaz8Ob8jtNZGHjik3XR7rbAsG6tkJEriYzveacBQuJuBbnnzgPh3u3A7rj9f5d4r4OGatIIhmb4Q_as7oONuNmAG2MVX7SueQkNuEIyToI7u7K1oTCM7vhMS/s1600/loading9.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHHf3ReWy3qrJuNMJW4SFKQIrxNQAwyjA-SJZ1dtOLBbgk4avGYR0FhyR4s_628Ja3flzpXoRTSJuPpCuoJ0rNG5T0sZ7RjmGIcBKScIignKQNX2ylrPRHKNy74QxRMQYBRdarILoLTEr0/s1600/loading10.gif

Sekian Dulu Dari Saya, Jika ada yang di tanyakan silahkan bertanya dikomentar !