Rabu, 19 Desember 2012

Membuat loading pada blog

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 = &quot;http://&quot; + top.location.host.toString();
    var $internalLinks = $(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], a[href^=&#39;../&#39;]&quot;);
    $internalLinks.click(function() {
        $(&#39;#loadhalaman&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
    });
    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target=&#39;_blank&#39;
    $(&#39;#loadhalaman&#39;).click(function() {
        $(this).hide();
    });
});
</script>

Tidak ada komentar:

Posting Komentar