• ads
  • ads
  • ads
  • ads
  • ads
klik Thisklik This
CyDARKNESSCyDARKNESSCyDARKNESSCyDARKNESSCyDARKNESSCyDARKNESSCyDARKNESSCyDARKNESSCyDARKNESSCyDARKNESSCyDARKNESSCyDARKNESSCyDARKNESSCyDARKNESSCyDARKNESS
NEW POSTING
Posted by : Unknown Kamis, 10 Oktober 2013

Kali ini saya akan memberikan tutorial cara membuat animasi Loading di blog. Tutorial ini saya dapatkan di DSZ, kalau menurut blog Om-Dayz "Animasi loading blog bisa memberikan efek manipulasi terhadap loading blog agar nampak lebih cepat". Daripada bingung mending langsung saja ke caranya.. :)

Pasang CSS Animasi Loading
Taruh kode CSS berikut di atas kode ]]></b:skin>


#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); }}
Pasang JQuery Terbaru
pasang script jquery 1.7.2 tepat di atas tag </head> atau kalau ada JQuery terbaru, silahkan pasang yang terbaru.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Pasang Script Loading Animasi
Letakkan kode berikut tepat di atas tag </body>


<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>
Keterangan :
dan tinggal anda edit edit saja.. :D jika ingin melihat Code Warna klick disini 

sumber : rilkaze 

Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © 2013 Blogger Test - Blue Ginga Hagane Style - Powered by Blogger - Designed by Mhd faisal-and Cmy-B-ori by Johanes Djogan -