Cara Membuat Animasi Loading Blog Keren

Redi

Jumat, 20 September 2013

Belum ada komentar

Cara Membuat Animasi Loading Blog Keren - Alhamdulillah akhirnya udah selesai PR sekolahnya . saatnya update artikel .. Kali ini saya akan membagikan ilmu kepada sahabat blogger tentang loading animasi blog yang sangat keren . berikut scren shotnya.

Gimana sob cukup keren kan animasi loading blognya . Berikut cara membuat animasi loading blog :

1. Masuk dahulu ke akun bloger sobat
2. Pilih Menu Template => EDIT HTML
3. Kemudian sobat cari kode ]]></b:skin> ( gunakan CTRL+F untuk memudahkan pencarian )
4. Letakan kode dibawah ini tepat di atas kode  ]]></b:skin> tersebut.

#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 rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);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 rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);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 rgb(255, 0, 0)}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 rgb(255, 0, 0)} 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. Kemudian letakan kode dibawah ini tepat diatas kode </body> ( ini bertujuan supaya loadingnya cepat 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function() { var siteURL = "http://" + top.location.host.toString(); var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']"); $internalLinks.click(function() { $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000); }); // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank' $('#loadhalaman').click(function() { $(this).hide(); }); });

6. Simpan Template dan lihat hasilnya ..

Oh ya sob saya hampir lupa , Bila di blog sobat sydah ada kode JQuery . maka jangan pasang kode <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> . di atas. Demikan artikel mengenai Cara Membuat Animasi Loading Blog Keren , semoga artikel tersebut bermanfaat bagi anda.