Cara Membuat Loading Page Keren Di Blog

Sobat Blue4rt, Pengen di blognya ada loading pagenya?
iyaudah.. saya kasi caranya nih..

• Contoh Loading Animasi dengan CSS

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

• Penyesuaian Warna

Tambahan dari blue4rt, untuk yang ingin menyesuaikan warna loading nya dengan warna lain, karena Blue4rt 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.
Selamat Mencoba :)

Anda baru saja membaca artikel yang berkategori Blog / Tips And Trick dengan judul Cara Membuat Loading Page Keren Di Blog . Anda bisa bookmark halaman ini dengan URL http://blue4rt-blog.blogspot.com/2013/05/cara-membuat-loading-page-keren-di-blog.html . Terima kasih!

Ditulis oleh: Unknown - Jumat, 24 Mei 2013