Membuat Animasi Loading Keren Pada Blog

Hallo sobat blogger selamat datang di dunia ^LAROS βLOG^ hari ini saya akan mereview tentang cara Membuat Animasi Loading Keren Pada Blog.
siapa yang gak mau blognya jadi keren, semua orang pasti ingin mempercantik blognya agar menarik.
gambar loadingnya seperti ini sob

okelah, berhubung saya gak punya banyak kata langsung simak aja caranya dibawah ini:

• Login ke akun blogger anda
• Klik template >> Edit html 
• Tambahkan kode css dibawah ini tepat diatas 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;}<br /> .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;}<br /> .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;}<br /> @-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; }}<br /> @-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}<br /> @-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; }}<br /> @-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

• Kemudian tambahkan kode jquery ini diatas kode </head>, jika dalam template kalian sudah terpasang jquery maka tidak perlu lagi tambahan jquery tersebut, aga proses efek loading lancar

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

• langkah yang terakhir, pasang kode berikut diatas kode </body>

<div id='loadhalaman'> <div class='loadball'> </div> <div class='loadball-2'> </div> </div> <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(); }); }); </script>

Nah itulah cara Membuat Animasi Loading Keren Pada Blog.
semoga artikelnya bermanfaat.
jika ingin copy paste sertakan link sumbernya. ^.^

Anda baru saja membaca artikel yang berkategori Blogging Tutorial dengan judul Membuat Animasi Loading Keren Pada Blog. Anda bisa bookmark halaman ini dengan URL http://yoviadyuta.blogspot.com/2013/06/membuat-animasi-loading-keren-pada-blog.html. Terima kasih!

Ditulis oleh: Unknown - Rabu, 12 Juni 2013