Info Xt
Blog Kang Fikri
Selamat Datang Di Blog Info Xt
Terima kasih atas kunjungan Anda di blog Info Xt,
semoga apa yang saya share di sini bisa bermanfaat dan memberikan motivasi pada kita semua
untuk terus berkarya dan berbuat sesuatu yang bisa berguna untuk orang banyak.
Jika Ingin copy paste artikel Info Xt Di harapkan meletakan sumber karena blog di lindungi DMCA Dan Copyscape

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('http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/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 :


Efek Loading 1 Rite Experience

http://4.bp.blogspot.com/-TPG2f3oEJWc/UQaijnks84I/AAAAAAAAFOA/KwXSCwh7Cxs/s1600/loading1.gif

Efek Loading 2 Rite Experience
http://4.bp.blogspot.com/-FASuc5X70e8/UQaijioU_8I/AAAAAAAAFOE/UM9HTErEowA/s1600/loading2.gif

Efek Loading 3 Rite Experience
http://2.bp.blogspot.com/-2LpTZKLCHZU/UQaikSj-wuI/AAAAAAAAFOY/vXpl8uZ7mGc/s1600/loading3.gif

Efek Loading 4 Rite Experience
http://3.bp.blogspot.com/-99_s0XfLTt0/UQaikh3bSMI/AAAAAAAAFOU/BuKqG0mh0eY/s1600/loading4.gif

Efek Loading 5 Rite Experience
http://1.bp.blogspot.com/-W9bm3Oc6WzA/UQaik9ql4AI/AAAAAAAAFOg/3fyDf9Agbso/s1600/loading5.gif

Efek Loading 6 Rite Experience
http://1.bp.blogspot.com/-udgAVO3FySQ/UQailMH35aI/AAAAAAAAFOo/JD6vDePg9OU/s1600/loading6.gif

Efek Loading 7 Rite Experience
http://2.bp.blogspot.com/-Va-9DPoGnio/UQailTDIWUI/AAAAAAAAFOw/iWgEqVu0zFg/s1600/loading7.gif

Efek Loading 8 Rite Experience
http://2.bp.blogspot.com/-yz54Aj8Fp1s/UQailmVa8BI/AAAAAAAAFPA/LT0KOGY-_lk/s1600/loading8.gif

Efek Loading 9 Rite Experience
http://3.bp.blogspot.com/-eeiu8xL2Qls/UQaimEebl4I/AAAAAAAAFO8/hSK_kq7C8Po/s1600/loading9.gif

Efek Loading 10 Rite Experience
http://3.bp.blogspot.com/-bWMOJ7ywzjg/UQaij1cSLiI/AAAAAAAAFOM/Nrdgh1W6hys/s1600/loading10.gif

Sekian Dulu Dari Saya, Jika ada yang di tanyakan silahkan bertanya dikomentar !
Enter your email address to get update from Info Xt.
Print PDF
Next
« Prev Post
Previous
Next Post »

Komentar yang bener aje ye... harus sesuai topic pembahasan, dan juga dilarang spam,sebar situs p*rno, dan terakhir jangan ribut .
jika melanggar komentarnya akan di hapus

Copyright © 2013. Info Extended - All Rights Reserved | Template Design by Kompi Ajaib | Redesign by Info Xt