Cara Membuat Animasi Loading Blog Keren

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.

Share This Article

Facebook +Google Twitter Digg Technorati Reddit

Sumber Berita Ini: Cara Membuat Animasi Loading Blog Keren

Riio Cyber-Art

Blog ini berisi informasi mengenai dunia blogging dan internet dari berbagai sumber, jika anda menyukai dan mau dapatkan Update berita terbaru, harap ikuti blog ini dengan memasukan Email anda atau mengikuti Twitter/Facebook, dengan begitu anda secara otomatis akan mendapatkan Update Berita terbaru disini.

• Rss
• Twitter
• FaceBook
• Follow This Blog

Baca Juga Artikel Terkait Lainnya

Berita Populer Lainnya