Breaking News
Loading...
Sunday, May 19, 2013

Cara Membuat Animasi Loading Blog

Animasi Loading Blog


Assalamualaikum.Wr.Wb .


Hai sobat Info ^^
Kali ini saya akan mengshare Cara Membuat Animasi Loading Blog , caranya cukup mudah kalo menurut saya ^^ , ikuti cara-caranya yaa ..


1. Login ke akun Blogger Sobat . Klik disini
2. Sobat pergi ke Dashboard
3. Kemudian sobat klik Template >> Edit Html
4. Lalu sobat cari kode ini ]]</b:skin> , setelah ketemu sobat taruh kode ini tepat di atas kode ]]</b:skin> itu : 

#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 #00a3ff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 35px #00a3ff;
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 #00a3ff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #00a3ff;
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#00a3ff}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 #00a3ff} 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); }}

5. Eiit belum selesai nih , Sobat cari kode </body> , kemudian letakkan kode ini tepat di atas kode </body> tersebut ..


<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</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>


6. Kemudian simpan/save 

Selesai dah , cukup mudah bukan ?
Sekian Cara Membuat Animasi Loading Blog
Terima kasih telah berkunjung Sob ^,^ .


Assalamuaalikum.Wr.Wb .

Ditulis Oleh : Achmadi Iman Faris ~ Faris Share

Faris Art Sobat sedang membaca artikel tentang Cara Membuat Animasi Loading Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

0 komentar:

Post a Comment

Mohon Sobat Untuk Tidak Berkata Kasar Pada Formulir Komentar, Dan Mohon Untuk Saling Menghargai .
[1] . Berkomentar boleh , tapi jangan nyepam(BOM COMMENT) ya kaaka ..
[2] . Live link tidak papa , tapi maksimal sehari 2 link jika berkomentar;)
Sekian Dari Admin Dan Terima kasih....

 
Toggle Footer
Copyright © 2012 Faris Share™ All Right Reserved
Blogger Designed by IVYthemes | MKR Site