Cara membuat Animasi Loading Blog (Css)

Buat para sobat BSI yang baik hatinya dan ganteng-ganteng seperti admin.. hehe. Kali ini BSI akan memberikan tutorial cara membuat animasi Loading di blog.

Seperti biasa pertama-tama

  Login to Blogger kemudian pilih "Layout"

  Klik pada "Edit HTML" , kasih tanda centang "Expand Widget Templates"

Pasang CSS Animasi Loading
Taruh kode CSS berikut ini 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
pasang script jquery 1.7.2 tepat di atas tag </head>

===================================================================

 <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>

===================================================================

 Untuk Penyesuaian Warna

Tambahan dari BSI, untuk yang ingin menyesuaikan warna loading nya dengan warna lain, karena BSI memakai kode #00a3ff pada loading halaman. Jika ingin mengganti warna nya, lihat kode CSS loading halaman yang paling atas tadi dan ganti kode warna yang ditulis dengan warna birumuda dengan kode warna yang diinginkan.