Trik Mengganti Efek Loading Blog

Diposkan Oleh : Bryant Ajiebz | Pada : 11/25/2009 | Rating : 5 | 0 komentar
Trik Mengganti Efek Loading Blog
Trik Mengganti Efek Loading Blog
Trik Mengganti Efek Loading Blog
Hai Shobat Blogger lama gak posting tentang trik dan tips ngeblog
tapi tenang kali ini saya akan berbagi tentang Trik Mengganti Efek Loading Blog
trik ini juga bisa membuat pengunjung betah berlama lama an di blog kita karena keidahannya
untuk demo silahkan lihat loading blog ini
oke bagi kalian yang pengen menerapkannya ke blog silahkan di simak:
NB: Sebelum mencoba trik ini sebaiknya backup dulu template agar

1. Login ke akun blogger anda
2. Klik Template » Edit HTML » Lanjutkan »  Klik  Expand Template Widget
3. Tambahkan kode CSS berikut ini diatas ]]></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 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); }}
4. Kemudian tambahkan kode jquery ini  tepat diatas kode </head>.
NB: jika di template kalian sudah terpasang maka tidak usah di pasang lagi dan usahkan yang versi terbaru ya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
 5. Kemudian yang terakhir,  pasang kode berikut tepat diatas tag </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>
Kemudian simpan template
taraaa ...kini lihat blog anda sudah keren belom
oke sekian dari saya
semoga artikel ini bermanfaat dan bisa membentu anda
selamat beraktivitas

Baca Juga :

0 komentar:

Posting Komentar

 
NetXZ - Berbagi Tanpa Batas : About | Advertise | Sitemap
Support : Trik Mengganti Efek Loading Blog
Template Modified by Septia Mujizat
Proudly Powered by Blogger