Saturday, October 31, 2015


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

Cara Membuat Efek Loading Keren dan Ringan di Blog



https://s0.bukalapak.com/system/images/1/3/8/8/6/9/0/large/otomotif.jpg

Kumpulan Gambar Modifikasi Motor Drag Keren

Otomotif

Kali ini yang akan saya share adalah Kumpulan Gambar Modifikasi Motor Drag Keren. Langsung saja sahabat indoking dapat melihat gambar-gambarnya di bawah ini: