Cara menambahkan efek animasi loading yang ringan dan keren

Advertisement

Pada keempatan sebelumnya Rite Experience sharing tentang Cara Modifikasi Scroll bar dengan CSS3.
Nah , pada kesempatan ini Blog Rite Experience akan sharing lag 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 !
Share this article :
+
Apakah Anda menyukai postingan ini? Silahkan share dengan klik di sini
author-photo Situs Indonesia

Saya hanyalah orang biasa yang menyukai blogging dan mencoba berbagi pengalaman dengan yang lain tentang blogging dan SEO. Semoga bisa bermanfaat.

Follow me on: Facebook | Twitter | Google+
×
Previous
Next Post »
4 Blogger Comments
Facebook Comments
June 23, 2014 at 6:54 PM ×

artikel nya keren banget gan ane sekarang tau cara nambahin efek loading :) hehe by the way tempe nya ringan amat wussh

Balas
avatar
admin
June 23, 2014 at 6:59 PM ×

He..he..
Ya Gan..
Soalnya javascript yang bikin lelet blog gw hilangin.. :D

Balas
avatar
admin
June 23, 2014 at 7:05 PM ×

mantab loading nya broo,.
ijin coba ya

Balas
avatar
admin

Aturan Berkomentar :
- Dilarang berkomentar menggunakan kata kotor, menghina, atau mengejek.
- Dilarang berkomentar yang mengandung unsur sara, po*no, promo, spam dan sebagainya.
- Dilarang berkomentar berupa link hidup.
- Komentarlah dengan bahasa baku, sopan, dan santun serta sesuai dengan isi postingan.
- Jika komentar tidak sesuai dengan isi postingan atau melanggar peraturan di atas, saya akan langsung menghapusnya.

Terima kasih karena telah mentaati perturan !

Out Of Topic Show EmoticonHide Emoticon

Terima kasih sudah berkomentar
Copyright © 2013. Rite Experience - All Rights Reserved | Template Created by Kompi Ajaib Proudly powered by Blogger