Langsung saja pada, pada postingan kali ini saya akan memberikan tutorial bagaimana cara membuat loading pada blogger. langkah-langkahnya seperti biasa masuk pada blog kalian dst. lalu masukkan kode css-nya dibawah ini
#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;}
.garis {
width: 100%; /* Full Width */
height: 5px;
margin: 50px auto;
background: #000;
}
.expand {
width: 100%;
height: 1px;
margin: 2px 0;
background: #2187e7;
position: absolute;
-webkit-box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7);
-moz-box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7);
box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7);
-moz-animation: fullexpand 10s ease-out;
-webkit-animation: fullexpand 10s ease-out;
-ms-animation: fullexpand 10s ease-out;
animation: fullexpand 10s ease-out;
}
/* ===[ Full Width Animation Bar ]=== */
@-moz-keyframes fullexpand {
0% { width: 0px }
100% { width: 100% }
}
@-webkit-keyframes fullexpand {
0% { width: 0px }
100% { width: 100% }
}
@-ms-keyframes fullexpand {
0% { width: 0px }
100% { width: 100% }
}
@keyframes fullexpand {
0% { width: 0px }
100% { width: 100% }
} |
setelah itu masukkan dibawah ini, (letaknya diatas kode
</head>
| <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> |
kemudian terakhir masukkan kode script berikut di atas kode
</body>
<div id='loadhalaman'>
<div class='garis'/>
<div class='expand'/>
</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> |
