Blogger Loading effecti sayfa geçişi
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 = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#mbsload').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='_blank'
$('#mbsload').click(function() {
$(this).hide();
});
});
</script>
<div id='mbsload'>
<div class='mbsloadball'/>
<div class='mbsloadball-2'/>
</div>
Etiketler: Blogger Eklentileri, blogger loading efekti, loadin efekti


4 Yorum:
rengi değiştirmek mümkünmüdür dönen şeyin.
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.
teşekkür ederim:)
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