Cara Membuat Animasi Efek Loading Blog

Cara Membuat Animasi Efek Loading Blog - Cara ini sebenarnya sudah terpasang di blog ini :D kalian tertarik gak untuk menambahknanya di blog agan? hahah, wanipiro dulu.

Cara ini saya dapatkan setelah search dari om google, ternyata agak sulit juga nyari sekarang soalnya sudah mulai langka. namun tenang, sekarang saya kan posting tentang itu kok, jadi agan gk pelu susah payah untuk mencari lagi. soalnya di blog ini sudah saya postingkan heheh

oke, kalau agan pingin lihat ScreenShotnya sudah saya sediakan dibawah ini :

ScreenShot Loading Blog Keren

Nah itu adalah ScreenShotnya dari blog ini. agan sudah penasaran cara menambahkannya di blog. oke langsung saja saya kasih nih tipsnya

1. Login dulu ke blogger
2. Klik Template > Edit HTML
3. Cari kode </head> dan taruhkan kode dibawah ini tepat diatas kode </head>

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

4. Cari Kode ]]></b:skin>  dan taruhkan kode dibawah ini diatasnya

#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. Terakhir tambahkan Kode dibawah ini 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>

Sekian dari saya semoga dapat bermanfaat bagi anda semua, dan jika anda ingin copas artikel ini, silahkan asalkan anda sertakan link sumber yang lengkap

Terimakasih :D

Tweet

Posted by Unknown