Membuat Loading Blog Dengan Animasi

Hello! Kali ini saya akan membagikan mengenai cara membuat loading blog dengan animasi, bukan membuat animasi loading blog loh =)) Tips yang saya bagikan kali ini menurut saya tidak memberati blog sama sekali dan tanpa gambar. Yah memang rata-rata loading dengan animasi itu banyak yang memberatkan blog, tapi ini tidak. Dan trik ini hanya memakai CSS tanpa gambar. Yah langsung saja dah ga banyak bachot :v

   Ada dua loading animasi blog yang akan saya bagikan kali ini, yang pertama adalah lihat bola berputar-putar dibawah ini.

Untuk memasangnya buka Dashboard Blogger > Template > Edit HTML pastikan telah ada script jquery di blog kalian. Kalau belum ada, silahkan pasang kode dibawah ini tepat diatas kode </head>

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> 

Ingat! Kalau sudah ada kode tersebut jangan dipasang lagi. Kemudian cari kode </b:skin> dan letakkan kode berikut tepat di atas </b:skin>

 #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 #0084ff;border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px #0084ff;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 #0084ff;border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px #0084ff;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 rgb(255, 0, 0)}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 rgb(255, 0, 0)} 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); }} 

Untuk kode warna pada background:#000 bisa kalian ubah dengan kode warna yang kalian inginkan.
dan untuk kode warna pada border:5px solid #0084ff dan box-shadow: 0 0 35px #0084ff kode warnanya bisa juga kalian ganti terserah kalian ^_^
Dan berikut adalah untuk kode HTMLnya dipasang diatas kode </body>

 <div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>

 

Dan kode javascript ini di tempat yang sama.

 <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> 

Dan Save Template, selesai.

   Animasi loading blog yang kedua yaitu sebagai berikut.

Dan berikut adalah kode CSSnya xD taruh diatas kode </b:skin>

 #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;}
.ball {
background-color: rgba(0,0,0,0);
border:5px solid orange;
opacity:.9;
border-top:5px solid #ff0000;
border-left:5px solid #ff0000;
border-radius:50px;
box-shadow: 0 0 35px #ff0000;
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spin .5s infinite linear;
-webkit-animation:spin .5s infinite linear;
}
.ball1 {
background-color: rgba(0,0,0,0);
border:5px solid orange;
opacity:.9;
border-top:5px solid #ff0000;
border-left:5px solid #ff0000;
border-radius:50px;
box-shadow: 0 0 35px #ff0000;
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:spinoff .5s infinite linear;
-webkit-animation:spinoff .5s infinite linear;
}
@-moz-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(-360deg); }
} 

Untuk kode css warnanya bisa kalian cari dan ubah sendiri kan? pokoknya kode css warnanya ada yang dalam bahasa inggris dan diawali dengan tag (#) contoh, orange dan #ff0000. dan letakkan kode HTML berikut tepat di atas kode </body>

  <div id='loadhalaman'>
<div class="ball"></div>
<div class="ball1"></div></div>
 

Dan kode javascript ini di tempat yang sama.

 <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> 

Dan, Save Template. Selesai...
  Yah saya rasa cukup sekian untuk tutorial css kali ini, apabila ada pertanyaan harap langsung komen dan apabila sudah bisa dipakai silahkan komen juga =D Mohon maaf apabila saya ada salah kata/kalimat dalam pengetikan, saya mohon maaf yang sebesar-besarnya. Dan terima kasih :)
Silahkan dilihat Fantastic Photoshop , Tips Bisnis