Cara Mudah Membuat Animasi Loading Keren di Blog

“Cara Mudah Membuat Animasi Loading Keren di Blog” – Rasanya makin menarik jika sedang edit template, menambah animasi keren di blog dan belajar Tutorial blog. itu yang saya lakukan ketika sudah didepan komputer dengan asyik internetan. efek loading di blog dengan animasi sungguh kelihatan menarik dan membuat kepuasan tersendiri. kali ini Saya akan share beberapa animasi loading page keren di blog.

Cara membuat animasi loading di blog sangat banyak sekali sampai bingung pengen milih yang mana, tapi tetep donk pilih yang paling disuka, hehe pada kesempatan ini akan saya kasih 5 animasi loading keren di blog. yuk simak bareng-bareng: cekidot!!!!

-<<Cara 1>>-

Cara Membuat Animasi Loading Keren di Blog

1. Login dulu ke akun blog sobat.
2. Masuk Template >> edit HTML

3. Copy dan paste kode berikut ini dibawah kode </head>

<!– Loading Page Script – –>
<style type=”text/css”>
/* add loading image */
body {background:#000000 url(http://4.bp.blogspot.com/-zJmT6iuz0Gs/TyKvHDEFtjI/AAAAAAAABso/Uf8IHNom-MM/s1600/loading_gif.gif) no-repeat fixed center;}
/* hide page div */
#page{display:none;}
</style>
<script type=”text/javascript”>
function css(classORid,rules){
try{var css=document.createElement(“style”);
css.innerHTML=classORid+”{“+rules+”}”
document.body.appendChild(css);}
catch(e){}
try{document.styleSheets[document.styleSheets.length-1].addRule(classORid,rules);}
catch(e){}}
function loaded(){
css(“#page”,”display:block!important”);
css(“body”,”background:#000 url()”);}
if(window.addEventListener)window.addEventListener(“load”,loaded,false);
else if(window.attachEvent)window.attachEvent(“onload”,loaded);
else if(document.getElementById)window.onload=loaded;
</script>

4. Selanjutnya cari kode <body> setelah ketemu, letakkan kode dibawah ini tepat dibawah kode <body> :

<div id=”page”>

5. Terakhir Sobat Cari lagi kode </body> dan letakkan kode </div> diatas kode </body>
6. Klik simpan dan lihat hasilnya.

Hasilnya seperti gambar dibawah ini:

-<<Cara 2>>-

Cara Membuat Animasi Loading Page Keren di Blogspot

1. login akun Blogger sobat,
2. Pilih Template >>>Klik Edit HTML

3. Cari kode ]]></b:skin> dengan menekan Ctrl + F pada kolom Edit HTML kemudian
letakan kode dibawah ini tepat di atas ]]></b:skin>.

/* Loading Page */
.QOverlay {
background-color: #000000; /* background color loading */
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC; /* color bar loading */
height: 10px;
}
.QAmt {
color:#FF530D; /*loading Color number*/
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;}

5. Lalu sobat cari lagi kode </head> dan letakan kode berikut diatasnya:

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/>
<script src=’http://script-seo.googlecode.com/files/loadpage.js’ type=’text/javascript’/>

6. Kemudan cari kode </body> dan letakkan kode berikut ini diatasnya:

<script>
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>

5. Simpan dan lihat hasilnya. berikut gambar hasil dari kode diatas:

Hasilnya seperti gambar dibawah ini:

-<<Cara 3>>-

Cara pasang loading animasi keren di blogspot

1. Letakkan script Jquery berikut diatas kode </head> :

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

Keterangan:

Jika telah ada sebelumnya Jquery di atas pada template blog, lewati langkah ini.

2. Letakkan kode CSS dibawah ini tepat di atas kode ]]></b:skin>,

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
#circular3dG{
position:relative;
width:100px;
height:100px;margin:10% auto;
}
.circular3dG{
position:absolute;
background-color:#00C4FF;
width:28px;
height:28px;
-moz-border-radius:30px;
-moz-animation-name:bounce_circular3dG;
-moz-animation-duration:0.48s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:30px;
-webkit-animation-name:bounce_circular3dG;
-webkit-animation-duration:0.48s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:30px;
-ms-animation-name:bounce_circular3dG;
-ms-animation-duration:0.48s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:30px;
-o-animation-name:bounce_circular3dG;
-o-animation-duration:0.48s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:30px;
animation-name:bounce_circular3dG;
animation-duration:0.48s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#circular3d_1G{
left:41px;
top:6px;
-moz-animation-delay:0.18s;
-webkit-animation-delay:0.18s;
-ms-animation-delay:0.18s;
-o-animation-delay:0.18s;
animation-delay:0.18s;
}
#circular3d_2G{
left:61px;
top:23px;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}
#circular3d_3G{
left:73px;
top:45px;
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}
#circular3d_4G{
left:69px;
top:67px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
#circular3d_5G{
left:42px;
top:73px;
-moz-animation-delay:0.42000000000000004s;
-webkit-animation-delay:0.42000000000000004s;
-ms-animation-delay:0.42000000000000004s;
-o-animation-delay:0.42000000000000004s;
animation-delay:0.42000000000000004s;
}
#circular3d_6G{
left:8px;
top:48px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#circular3d_7G{
left:0px;
top:14px;
-moz-animation-delay:0.5399999999999999s;
-webkit-animation-delay:0.5399999999999999s;
-ms-animation-delay:0.5399999999999999s;
-o-animation-delay:0.5399999999999999s;
animation-delay:0.5399999999999999s;
}
#circular3d_8G{
left:17px;
top:0px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
@-moz-keyframes bounce_circular3dG{
0%{
-moz-transform:scale(1)}
100%{
-moz-transform:scale(.3)}
}
@-webkit-keyframes bounce_circular3dG{
0%{
-webkit-transform:scale(1)}
100%{
-webkit-transform:scale(.3)}
}
@-ms-keyframes bounce_circular3dG{
0%{
-ms-transform:scale(1)}
100%{
-ms-transform:scale(.3)}
}
@-o-keyframes bounce_circular3dG{
0%{
-o-transform:scale(1)}
100%{
-o-transform:scale(.3)}
}
@keyframes bounce_circular3dG{
0%{
transform:scale(1)}
100%{
transform:scale(.3)}
}

3. Copy kode dibawah ini dan pastekan tepat di bawah kode <body> ::

<!– Start Andi-Techno.blogspot.com Loader –>
<script type=’text/javascript’>
//<![CDATA[
$(function() {
setTimeout(function() {
$(‘#xgenloader-screen’).fadeOut();
}, 5000);
});
//]]>
</script>
<div id=’xgenloader-screen’><div id=”circular3dG”>
<div id=”circular3d_1G” class=”circular3dG”>
</div>
<div id=”circular3d_2G” class=”circular3dG”>
</div>
<div id=”circular3d_3G” class=”circular3dG”>
</div>
<div id=”circular3d_4G” class=”circular3dG”>
</div>
<div id=”circular3d_5G” class=”circular3dG”>
</div>
<div id=”circular3d_6G” class=”circular3dG”>
</div>
<div id=”circular3d_7G” class=”circular3dG”>
</div>
<div id=”circular3d_8G” class=”circular3dG”>
</div>
</div>
</div>
<!– End Loader –>

4. Simpan Template dan lihat hasilnya.

Hasil dari kode diatas adalah seperti gambar dibawah ini:

Sekian dulu Cara Mudah Membuat Animasi Loading Keren di Blog. tetap semangat dan selalu bereksperimen untuk mendapatkan hasil yang menakjubkan. Salam blogger.

Anda baru saja membaca artikel yang berkategori Modifikasi Blog dengan judul Cara Mudah Membuat Animasi Loading Keren di Blog. Jika kamu suka, jangan lupa like dan bagikan keteman-temanmu ya… By : Zain Elhasany

Related Posts

Cara Mudah Membuat Tooltip Keren di Blog

Cara Mudah Membuat Tulisan Mengikuti Kursor di Blog

Cara Mengganti Background di Blog Dengan Gambar