
Berbicara soal efek diblog telah dijelaskan sebelumnya mengenai cara membuat animasi loading dengan keyframe di blog dan membuat efek animasi loading blog lingkaran. Beberapa Blogger tidak memasang efek loading seperti ini karena walaupun loading blog kita ringan tapi akan memiliki kesan yang berat di mata pengunjung, tapi tidak apa untuk anda yang ingin tampil "cantik", hehehe.
Membuat Efek Loading V1
Langkah 1 : Tambahkan jQuery pada blog sobat. Simpan kode di bawah ini sebelum<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>Langkah 2 : Tambahkan CSS. Simpan CSS ini di atas
#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; }Langkah 3 : Tambahkan JavaScript. Tambahkan kode JavaScript ini di atas
<script type='text/javascript'>Kode berwarna biru diatas adalah gambar animasi yang akan ditampilkan waktu loading, sobat dapat menggantinnya dengan gambar sobat atau pilih beberapa gambar animasi efek loading blog dibawah ini.
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

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

http://4.bp.blogspot.com/-FASuc5X70e8/UQaijioU_8I/AAAAAAAAFOE/UM9HTErEowA/s1600/loading2.gif

http://2.bp.blogspot.com/-2LpTZKLCHZU/UQaikSj-wuI/AAAAAAAAFOY/vXpl8uZ7mGc/s1600/loading3.gif

http://3.bp.blogspot.com/-99_s0XfLTt0/UQaikh3bSMI/AAAAAAAAFOU/BuKqG0mh0eY/s1600/loading4.gif

http://1.bp.blogspot.com/-W9bm3Oc6WzA/UQaik9ql4AI/AAAAAAAAFOg/3fyDf9Agbso/s1600/loading5.gif

http://1.bp.blogspot.com/-udgAVO3FySQ/UQailMH35aI/AAAAAAAAFOo/JD6vDePg9OU/s1600/loading6.gif

http://2.bp.blogspot.com/-Va-9DPoGnio/UQailTDIWUI/AAAAAAAAFOw/iWgEqVu0zFg/s1600/loading7.gif

http://2.bp.blogspot.com/-yz54Aj8Fp1s/UQailmVa8BI/AAAAAAAAFPA/LT0KOGY-_lk/s1600/loading8.gif

http://3.bp.blogspot.com/-eeiu8xL2Qls/UQaimEebl4I/AAAAAAAAFO8/hSK_kq7C8Po/s1600/loading9.gif

http://3.bp.blogspot.com/-bWMOJ7ywzjg/UQaij1cSLiI/AAAAAAAAFOM/Nrdgh1W6hys/s1600/loading10.gif
Membuat Efek Loading V2
Selain kode diatas ada juga kode loading halaman seperti yang saya gunakan ditemplate sebelumnya. kodenya adalah seperti dibawah ini, dan cara meletakannya adalah sama seperti diatas.#loadhalaman{position:fixed; opacity:0.93; top:0; left:0; background-color:#000; z-index:9999; text-align:center; width:100%; height:100%; padding-top:20%; color:#000; display:none}.loadball{background-color:transparent; border:5px solid #00a3ff; border-right:5px solid transparent; border-left:5px solid transparent; border-radius:50px; box-shadow:0 0 35px #00a3ff; width:50px; height:50px; margin:0 auto; -moz-animation:spinPulse 1s infinite ease-in-out; -webkit-animation:spinPulse 1s infinite linear}.loadball-2{background-color:transparent; border:5px solid #00a3ff; border-left:5px solid transparent; border-right:5px solid transparent; border-radius:50px; box-shadow:0 0 15px #00a3ff; width:30px; height:30px; margin:0 auto; position:relative; top:-50px; -moz-animation:spinoffPulse 1s infinite linear; -webkit-animation:spinoffPulse 1s infinite linear}@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px#00a3ff}50%{-moz-transform:rotate(145deg); opacity:1}100%{-moz-transform:rotate(-320deg); opacity:0}}@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px#00a3ff}50%{-webkit-transform:rotate(145deg); opacity:1}100%{-webkit-transform:rotate(-320deg); opacity:0}}@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}Dan langkah selanjutnya tambahkan kode berikut ini diatas kode </body>
<div id='loadhalaman'>Nah sekian tutorial seocips.com untuk saat ini semoga bermanfaat dan semoga efek loading blog ini dapat mempercantik tampilan blog sobat
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>
0 Komentar untuk "Cara Menambahkan Efek Loading Blog"