Ok, langsung aja di simak tutorial ini
1. Masuk ke Dashboard Blogger, klik Template lalu pilih Edit HTML
2. Ini adalah point terpenting, pertama cek dulu template blogmu apakah sudah ada script jquery didalamnya atau belum, jika belum ada silahkan copy kode ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>dan pastekan tepat diatas kode <b:skin><
Masukkan Kode berikut tepat diatas 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;}
/* DEMO 1 */
#horizontal-load body:after {
content: "";
z-index: -1;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
}
#horizontal-load .bar {
font-size: 20px;
width: 10em;
height: 1em;
position: relative;
margin: 100px auto;
border-radius: .5em;
background: rgba(255,255,255,0.6);
box-shadow:
0 0 0 .05em rgba(100,100,100,0.075),
0 0 0 .25em rgba(0,0,0,0.1),
inset 0 .1em .05em rgba(0,0,0,0.1),
0 .05em rgba(255,255,255,0.7);
}
#horizontal-load .bar:after {
content: "Please wait.";
position: absolute;
left: 25%;
top: 150%;
font-family: 'Carrois Gothic', sans-serif;
font-size: 1em;
color: #555;
text-shadow: 0 .05em rgba(255,255,255,0.7);
}
#horizontal-load .bar .sphere {
border-radius: 50%;
width: 1em;
height: 100%;
background: -webkit-linear-gradient(#eee, #ddd);
background: -moz-linear-gradient(#eee, #ddd);
background: -ms-linear-gradient(#eee, #ddd);
background: -o-linear-gradient(#eee, #ddd);
background: linear-gradient(#eee, #ddd);
box-shadow:
inset 0 .15em .1em rgba(255,255,255,0.3),
inset 0 -.1em .15em rgba(0,0,0,0.15),
0 0 .25em rgba(0,0,0,0.3);
display: block;
-webkit-animation: slide 1.75s ease-in-out infinite alternate;
-moz-animation: slide 1.75s ease-in-out infinite alternate;
-ms-animation: slide 1.75s ease-in-out infinite alternate;
-o-animation: slide 1.75s ease-in-out infinite alternate;
animation: slide 1.75s ease-in-out infinite alternate;
}
@-webkit-keyframes slide {
to { margin-left: 90%; }
}
@-moz-keyframes slide {
to { margin-left: 90%; }
}
@-ms-keyframes slide {
to { margin-left: 90%; }
}
@-o-keyframes slide {
to { margin-left: 90%; }
}
@keyframes slide {
to { margin-left: 90%; }
}
Lalu letakkan kode berikut tepat dibawah 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="horizontal-load"><div class="bar">
<i class="sphere"></i>
</div></div>
</div>
<!-- End Loader -->
Klik Pratinjau, kalau loading muncul silahkan simpan template
# Style 2
Masukkan Kode berikut tepat diatas 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;}
#load2 body {
background-image: url(../images/hexabump.png);
background-color: #222;
}
#load2 body:after {
content: "";
z-index: -1;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
}
#load2 .spinner {
position: relative;
font-size: 100px;
width: 1em;
height: 1em;
margin: 100px auto;
border-radius: 50%;
background: #123456;
box-shadow: inset 0 0 0 .12em rgba(0,0,0,0.2), 0 0 0 .12em rgba(255,255,255,0.1);
background:
-webkit-linear-gradient(#ea2d0e 50%, #fcd883 50%),
-webkit-linear-gradient(#fcd883 50%, #ea2d0e 50%);
background:
-moz-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
-moz-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
background:
-ms-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
-ms-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
background:
-o-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
-o-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
background:
linear-gradient(#ea2d0e 50%, #ffdd72 50%),
linear-gradient(#ffdd72 50%, #ea2d0e 50%);
background-size: 50% 100%, 50% 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
opacity: 0.7;
-webkit-animation: mask 3s infinite alternate;
-moz-animation: mask 3s infinite alternate;
-ms-animation: mask 3s infinite alternate;
-o-animation: mask 3s infinite alternate;
animation: mask 3s infinite alternate;
}
@-webkit-keyframes mask {
25% { -webkit-transform: rotate(270deg); }
50% { -webkit-transform: rotate( 90deg); }
75% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(180deg); }
}
@-moz-keyframes mask {
25% { -moz-transform: rotate(270deg); }
50% { -moz-transform: rotate( 90deg); }
75% { -moz-transform: rotate(360deg); }
100% { -moz-transform: rotate(180deg); }
}
@-ms-keyframes mask {
25% { -ms-transform: rotate(270deg); }
50% { -ms-transform: rotate( 90deg); }
75% { -ms-transform: rotate(360deg); }
100% { -ms-transform: rotate(180deg); }
}
@-o-keyframes mask {
25% { -o-transform: rotate(270deg); }
50% { -o-transform: rotate( 90deg); }
75% { -o-transform: rotate(360deg); }
100% { -o-transform: rotate(180deg); }
}
@keyframes mask {
25% { transform: rotate(270deg); }
50% { transform: rotate( 90deg); }
75% { transform: rotate(360deg); }
100% { transform: rotate(180deg); }
}
Lalu letakkan kode berikut tepat dibawah 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="load2"><div class="spinner">
<i class="sphere"></i>
</div></div>
</div>
<!-- End Loader -->
Klik Pratinjau, kalau loading muncul silahkan simpan template
# Style 3
Masukkan Kode berikut tepat diatas 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;}
#bowlG{
position:relative;
width:128px;
height:128px;margin:20% auto;
}
#bowl_ringG{
position:absolute;
width:128px;
height:128px;
border:11px solid #5C5C5C;
-moz-border-radius:128px;
-webkit-border-radius:128px;
-ms-border-radius:128px;
-o-border-radius:128px;
border-radius:128px;
}
.ball_holderG{
position:absolute;
width:34px;
height:128px;
left:47px;
top:0px;
-moz-animation-name:ball_moveG;
-moz-animation-duration:1.3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-webkit-animation-name:ball_moveG;
-webkit-animation-duration:1.3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-ms-animation-name:ball_moveG;
-ms-animation-duration:1.3s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
-o-animation-name:ball_moveG;
-o-animation-duration:1.3s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
animation-name:ball_moveG;
animation-duration:1.3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
.ballG{
position:absolute;
left:0px;
top:-30px;
width:51px;
height:51px;
background:#FF0000;
-moz-border-radius:43px;
-webkit-border-radius:43px;
-ms-border-radius:43px;
-o-border-radius:43px;
border-radius:43px;
}
@-moz-keyframes ball_moveG{
0%{
-moz-transform:rotate(0deg)}
100%{
-moz-transform:rotate(360deg)}
}
@-webkit-keyframes ball_moveG{
0%{
-webkit-transform:rotate(0deg)}
100%{
-webkit-transform:rotate(360deg)}
}
@-ms-keyframes ball_moveG{
0%{
-ms-transform:rotate(0deg)}
100%{
-ms-transform:rotate(360deg)}
}
@-o-keyframes ball_moveG{
0%{
-o-transform:rotate(0deg)}
100%{
-o-transform:rotate(360deg)}
}
@keyframes ball_moveG{
0%{
transform:rotate(0deg)}
100%{
transform:rotate(360deg)}
}
Lalu letakkan kode berikut tepat dibawah 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="bowlG">
<div id="bowl_ringG">
<div class="ball_holderG">
<div class="ballG">
</div>
</div>
</div>
</div>
</div>
<!-- End Loader -->
Klik Pratinjau, kalau loading muncul silahkan simpan template
# Style 4
Masukkan Kode berikut tepat diatas 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)}
}
Lalu letakkan kode berikut tepat dibawah 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 -->
Klik Pratinjau, kalau loading muncul silahkan simpan template
# Style 5
Masukkan Kode berikut tepat diatas 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;}
.bubblingG {
text-align: center;
width:100px;
height:63px;margin:10% auto;
}
.bubblingG span {
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
margin: 31px auto;
background: #7BFF00;
-moz-border-radius: 63px;
-moz-animation: bubblingG 0.6s infinite alternate;
-webkit-border-radius: 63px;
-webkit-animation: bubblingG 0.6s infinite alternate;
-ms-border-radius: 63px;
-ms-animation: bubblingG 0.6s infinite alternate;
-o-border-radius: 63px;
-o-animation: bubblingG 0.6s infinite alternate;
border-radius: 63px;
animation: bubblingG 0.6s infinite alternate;
}
#bubblingG_1 {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
#bubblingG_2 {
-moz-animation-delay: 0.18s;
-webkit-animation-delay: 0.18s;
-ms-animation-delay: 0.18s;
-o-animation-delay: 0.18s;
animation-delay: 0.18s;
}
#bubblingG_3 {
-moz-animation-delay: 0.36s;
-webkit-animation-delay: 0.36s;
-ms-animation-delay: 0.36s;
-o-animation-delay: 0.36s;
animation-delay: 0.36s;
}
@-moz-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-moz-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-moz-transform: translateY(-26px);
}
}
@-webkit-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-webkit-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-webkit-transform: translateY(-26px);
}
}
@-ms-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-ms-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-ms-transform: translateY(-26px);
}
}
@-o-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-o-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-o-transform: translateY(-26px);
}
}
@keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
transform: translateY(-26px);
}
}
Lalu letakkan kode berikut tepat dibawah 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 class="bubblingG">
<span id="bubblingG_1">
</span>
<span id="bubblingG_2">
</span>
<span id="bubblingG_3">
</span>
</div>
</div>
<!-- End Loader -->
Klik Pratinjau, kalau loading muncul silahkan simpan template
# Style 6
Masukkan Kode berikut tepat diatas 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;}
#spinningSquaresG{
position:relative;
width:240px;
height:29px;margin:10% auto;}
.spinningSquaresG{
position:absolute;
top:0;
background-color:#FFDD00;
width:29px;
height:29px;
-moz-animation-name:bounce_spinningSquaresG;
-moz-animation-duration:0.6s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.3);
-webkit-animation-name:bounce_spinningSquaresG;
-webkit-animation-duration:0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-ms-animation-name:bounce_spinningSquaresG;
-ms-animation-duration:0.6s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.3);
-o-animation-name:bounce_spinningSquaresG;
-o-animation-duration:0.6s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.3);
animation-name:bounce_spinningSquaresG;
animation-duration:0.6s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
}
#spinningSquaresG_1{
left:0;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}
#spinningSquaresG_2{
left:30px;
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}
#spinningSquaresG_3{
left:60px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
#spinningSquaresG_4{
left:90px;
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}
#spinningSquaresG_5{
left:120px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#spinningSquaresG_6{
left:150px;
-moz-animation-delay:0.54s;
-webkit-animation-delay:0.54s;
-ms-animation-delay:0.54s;
-o-animation-delay:0.54s;
animation-delay:0.54s;
}
#spinningSquaresG_7{
left:180px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
#spinningSquaresG_8{
left:210px;
-moz-animation-delay:0.66s;
-webkit-animation-delay:0.66s;
-ms-animation-delay:0.66s;
-o-animation-delay:0.66s;
animation-delay:0.66s;
}
@-moz-keyframes bounce_spinningSquaresG{
0%{
-moz-transform:scale(1);
background-color:#FFDD00;
}
100%{
-moz-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-webkit-keyframes bounce_spinningSquaresG{
0%{
-webkit-transform:scale(1);
background-color:#FFDD00;
}
100%{
-webkit-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-ms-keyframes bounce_spinningSquaresG{
0%{
-ms-transform:scale(1);
background-color:#FFDD00;
}
100%{
-ms-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-o-keyframes bounce_spinningSquaresG{
0%{
-o-transform:scale(1);
background-color:#FFDD00;
}
100%{
-o-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@keyframes bounce_spinningSquaresG{
0%{
transform:scale(1);
background-color:#FFDD00;
}
100%{
transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
Lalu letakkan kode berikut tepat dibawah 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="spinningSquaresG">
<div id="spinningSquaresG_1" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_2" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_3" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_4" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_5" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_6" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_7" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_8" class="spinningSquaresG">
</div>
</div>
</div>
<!-- End Loader -->
Klik Pratinjau, kalau loading muncul silahkan simpan template
Oke akhirnya selesai juga Tutorial Cara Membuat Animasi Loading Blog CSS3 dengan 6 Variasi Loader ini, jika ada kesalahan dalam mengetik saya mohon maaf karena saya sudah ngantuk sekali ini :(
oh iya kamu juga bisa menggunakan style Animated Loader yang lain lho, cara bikin animasi nya kamu pergi aja ke situs http://cssload.net/ disana kamu bisa berkreasi membuat animasi loading yang kamu sukai
oh iya satu lagi, kalau artikel ini bermanfaat, join blog ini ya (tombolnya ada di bawah) :)
Kalau ada yang belum jelas tulis aja di komentar
53 comments
keren gan thanks ya,,, klau psang emticon sprti dikotak kmentar ini gimna ya
gan judul lagu blognya apa gan bagi donk lagunya
ini lagunya http://andi-techno.blogspot.com/2012/06/download-mp3-edward-maya-stereo-love.html
tuh bener kata Farhan :-bd
ntar ya satu2
mantaaaap, kapan2 mau nyoba ah.. hehehe .... :) keren Kang
hehe silahkan mas Eka :-d
waaah menari sekali ini
tapi bikin sedikit lemot gag sob???
Keren Bro :D
Silakan Dilihat Blog Saya.
Link : http://cracker-9.blogspot.com
gak juga sih sob, fungsi utama dari efek loading ini sebenarnya bukan untuk menghias blog tapi untuk membuat pengunjung tidak bosan menunggu halaman blog dimuat 100%, jadi ketika loading selesai pengnunjung tinggal membaca artikel kita tanpa harus menunggu gambar atau sebagian konten untuk meload :)
keren :-d
tapi ngomong2 itu menari apa menarik sob :D
ko' lama bnget gk ke bka2 gan
lamanya bisa diatur kok
setTimeout(function() {
$('#xgenloader-screen').fadeOut();
}, 5000);
angka 5000 menunjukkan waktu loader 5 detik, kurangi angkanya untuk lebih cepat
msih gk bsa ke buka, apa templatenya ya???
mana link blognya biar saya liat
Blog aku juga ya kak :
www.sagitasoft.com
\m/
Mantap,,!!!
thanks :yaya:
Waduh, kode scriptnya banyak banget gan?..
apa tidak berpengaruh dengan loading blog nantinya,
mampir balik ya ;)
kan gak semuanya dipake sob :)
Bagaimana gan agar efeknya hanya tampil dihomepage saja...
http://adhi-lasoma.blogspot.com :bye:
sialhakan menambahkan tag kondisional di atas kode loadernya :)
terimaksih untuk infonya, tp kug blogq malah gak bisa dibuka.... muncul loadingnya terus.. T_T
blog kamu aja tuh, di demo nya kan nggak,
mana blognya?
Terimakasih banyak ya Sob Atas Loadingnya Yang Mangstab-Mangstab !!!
Udah Saya Praktekin Di Blog Saya :)
Dan Hasilnya Mangstab !!!
Ohh Iya ... Bloag Sobat Udah Saya Follow, Jangan Lupa Follback Blog Saya Ya Sob !
Ini Alamat Blog Saya : http://pusyakiz.blogspot.com/
yups, udah saya followback
thanks infonya sob..
follback-nya yahh sob :)
www.novnadiehard19.blogspot.com
salam sukses !!
bikin lama gk gan
wah keren gan
udah saya pasang di blog saya dan berhasil \m/
http://aeroaxel.blogspot.com/
tergantung blog kamu sih, coba liat blog dari sobat Agung Surya Prayoga dibawah :)
yups :yaya:
Trims gan infonya ane coba di blog ane, http://klik.ciledugmedia.com dan hasilnya mantaap. OK
Mass saya baru pasang Codenya ke blog.
Work 100%.
tapi kok jadinya gabisa saya mengklik/edit PAGE ELEMENT (GADGET&WIDGET) ..???
Bisanya cman Gadget Favicon. yang lain gabisa.
Tapi kalau langsung dari halaman Blog kita sunting masih bisa.
Mungkin ada yg salah mas.?
Mohon pencerahannya.
Makasih :-)
wah kok bisa gitu ya, ngeletakkin kode html nya di "edit html" atau di tata letak emang?
karena kode ini gak mengganggu tata letak
Letaknya di edit HTML mas.
ngeletak code CSS nya di skin Udh bener mas. Pas di Code Body ni yg salah kyknya ni mas, Soalnya saya pasang satu2 dlu trus save, setelah saya pasang nah rupanya yg di code Body ni yg bermasalah mas.
ni kan ada 6 Style loading tuh. Saya udh test semua cuman yg gada masalah di Style no. 4. Selebih nya gabisa diklik PAGE ELEMENT nya :/.
Bisa dibntu gk mas. :D soalnya saya suka sama Style yg no. 6.
coba letakkan kode html nya diatas </body>
Udh mas.
masi sama kyk gitu.
gpp lah.
Kalo Archive Blog yang slide ada mas gk..?
maksudnya archive slide gimana ya?
mantap gan dari www.aifafashop.com
Mas... saya mau tanya kalo memberi loading nya waktu mau mengganti Artikel terbaru (Pagination ) Tetapi di beri Animasi loading gimana ya mas...
maaf maksudnya mengganti artikel terbaru gimana ya?
Meluncur TKP
Sob pengen animasi loadingnya sama kaya santa-mars, gimana ??
yang gimana ya? saya ga tau tuh loading santa mars :)
mas loading nya ko ga selesai" ?
mas ane mau nanya , itu ngebuat URL demonya gmana ? kan itu cuma 1 blog , tpi kok bsa langsung 6 animasi dalam 1 blog ? tolong ksh tau donk caranya mas :D
jgn lupa mampir ke blog sederhana saya
http://rizqy-fadhillah.blogspot.com
cara membuat Border melengkung kayak mana gan
stelah ane cari kok kode "body" gak ada ya ??
kieren gan, kunjungan perdana salam kenal...
sukses besar gan,. makasih
Hargai penulis dengan cara memberikan komentar di artikel ini ya sobat.
Dan berkomentarlah dengan kata-kata yang sopan.
"Jangan Menggunakan Link Aktif di Komentar" (akan dihapus)
Untuk menyisipkan gambar dalam komentar : <i rel="image">URL GAMBAR</i>