7 Şubat 2014

Blogger Loading effecti sayfa geçişi


loading
Sitenizde sayfalar arası geçiş yaparken  loding efekti verebilirsiniz. görsel anlamda farklılık istiyorsanız eğer.
Bu eklentiyi kullana bilirsiniz. sitenize ayrı  bi hava kattığını  söyleyebilirim örneği sitemizde mevcuttur  zaten  sayfalar arası geçiş yeptınız zaman yeliş bi transparan  alanla karşılasırsınız  ve dönen  kırmızı  bi cisim :)
Daha önce bu  eklentiyi eklemiştim yanlız  yanlışlıkla silmişim şimdi tekrar eklemiş olduk..

bu eklentiyi 2 şekilde ekliyebilirsini.

1.cisi şablonu açıp html düzenle diyip bu kodu buluyorsunuz <body> ve hemen altına ekliyorsunuz.

2.ci işlemse yine aynı şekilde şablonu açıp html düzenle diyip bu sefer </body> kodunu bulup üstüne ekliyorsunuz.
 


<style>
 #mbsload {position:fixed;opacity:0.93;top:0;left:0;background-color:rgba(5, 41, 74, 0.79);z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:rgba(5, 41, 74, 0.79);display:none;}

.mbsloadball {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;}
.mbsloadball-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); }}}
</style>
<script type='text/javascript'>
$(function() {
var siteURL = &quot;http://&quot; + top.location.host.toString();
var $internalLinks = $(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], a[href^=&#39;../&#39;]&quot;);
$internalLinks.click(function() {
$(&#39;#mbsload&#39;).fadeIn(1000).delay(3000).fadeOut(1000);
});
// Remove the overlay when clicked to overcome interference, especially if the internal link is set up with a target=&#39;_blank&#39;
$(&#39;#mbsload&#39;).click(function() {
$(this).hide();
});
});
</script>
 <div id='mbsload'>
<div class='mbsloadball'/>
<div class='mbsloadball-2'/>
</div>

Etiketler: , ,

4 Yorum:

saat: 4 Mart 2014 16:57 , Anonymous Adsız dedi ki...

rengi değiştirmek mümkünmüdür dönen şeyin.

 
saat: 4 Mart 2014 17:08 , Blogger Tolgagnl dedi ki...

Mümkündür tabiki rgba(5, 41, 74, 0.79) bu koddan 2 adet var bu arka plan kodudur.

Buna benzer kodları değiştirdiğiniz zaman renkler değişir googlede rgba color renklerini araştırıp bulabilirsiniz.


 
saat: 4 Mart 2014 17:12 , Anonymous Adsız dedi ki...

teşekkür ederim:)

 
saat: 7 Ağustos 2014 20:21 , Anonymous Adsız dedi ki...

kardesım benım blog ta yazısı yok ctrl+f yapıp aratıyom bulmuyo. bu bolum var ama

 

Yorum Gönder

Kaydol: Kayıt Yorumları [Atom]

<< Ana Sayfa