Saturday, October 31, 2015

Cara Membuat Efek Loading Keren dan Ringan di Blog


Kali ini yang akan saya share adalah Cara Membuat Efek Loading Keren dan Ringan di Blog. Efek loading yang akan kita buat sekarang tidak akan membuat blog agan menjadi berat.

Langsung saja simak turitorialnya di bawah ini:
  
1. 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 agan sudah ada kode jquery, maka agan bisa melewati langkah ini

2. Tambahkan kode CSS di bawah ini tepat 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 : Agan bisa mengganti kode http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif dengan url gambar yang agan inginkan

3. 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>
4.Save dan selesai.

Maka sekarang akan tampil efek loading di blog agan.

Di bawah ini ada beberapa url gambar yang bisa agan 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
ajax-loader7 
http://lh6.ggpht.com/_7Y9pl24WpQY/SvWGSQefdKI/AAAAAAAACHU/pXqVd65gbE4/ajax-loader7_thumb%5B1%5D.gif?imgmax=800
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

ajax-loader3http://lh5.ggpht.com/_7Y9pl24WpQY/SvWGZ7b8KyI/AAAAAAAACHs/O1Gg535icIo/ajax-loader3_thumb%5B1%5D.gif?imgmax=800


http://3.bp.blogspot.com/-XHfhxe02UxM/VIFild4OkbI/AAAAAAAAARI/usxqTB18rA8/s1600/Loader1.gif
http://1.bp.blogspot.com/-OSk_ttKk7dA/VIFin-MYzBI/AAAAAAAAARU/3n54_PqTpr0/s1600/Loader2.gif
http://4.bp.blogspot.com/-DIc_0PiHLTA/VIFisXCTF6I/AAAAAAAAARc/_LfJNuaNp80/s1600/Loader3.gif

 

http://2.bp.blogspot.com/-EPaWBo-HO5Y/VA16pR-LyzI/AAAAAAAADYw/9J60a2EkJlI/s1600/Loading9.GIF

http://2.bp.blogspot.com/-bixcnTkh4q4/U7nQUNmm3_I/AAAAAAAAEDU/YE9s5MKfa60/s128-no/Loading7.gif 
 

 
http://4.bp.blogspot.com/-oXnJb-Hf8yg/VA16mCcCwtI/AAAAAAAADYM/L-6mkDGWBd8/s1600/Loading4.GIF

 
http://1.bp.blogspot.com/-yw93SfO7HUg/VA16kPJrEMI/AAAAAAAADX0/zA_AYKGrLpk/s1600/Loading1.GIF 

 
http://4.bp.blogspot.com/-RNEaIW8mfwM/VA16kh4jw_I/AAAAAAAADYA/8BzQLvaNjXs/s1600/Loading2.GIF

 
http://3.bp.blogspot.com/-RGDTwjwFAfI/VA16nTy73yI/AAAAAAAADYY/2Q_bv6PSZpk/s1600/Loading6.GIF 


http://1.bp.blogspot.com/-GbiMJDnzg6Y/VA16nNujPAI/AAAAAAAADYU/-8FLWN8gGX0/s1600/Loading5.GIF 

http://2.bp.blogspot.com/-qqEpMJ9PeoI/U7nQO-rfprI/AAAAAAAAEDU/YvXcmUbolGc/w128-h40-no/Loading10.gif

 
Atau agan bisa mengunjungi website Ajax loading generator online di bawah ini untuk mencari efek gambar yang di inginkan:

Preloaders.net
preloaders.net

Ajaxload.info
ajaxload.info

Chimply
Chimply

Web Script Lab
Web Script Lab

Load Info
Load Info

Xeosoft
Xeosoft

Demikianlah yang bisa saya share mengenai Cara Membuat Efek Loading Keren dan Ringan di Blog.Semoga dapat bermanfa'at

G+

Komentar Anda

 
Indoking (Kumpulan Berbagai Macam Informasi) © Copyright 2015 - Designed by Muhammad Iqbal
Back to top
Selamat Datang di www.indoking.blogspot.co.id (Download Mp3, Software, Games, Film, ebook, Chord Gitar, Tips and Trick, Operator Sekolah, Android, dll). Terima Kasih Atas Kunjungannya, Jangan lupa Komentarnya, Dan Berkunjunglah Kembali Untuk Mendapatkan Informasi Terbaru 2016.