6 Nisan 2013 Cumartesi

Kişiselleştirilmiş 'Yukarıya Dön'

Herkese merhaba! :)
Bugün size hızlı 'yukarıya dön' simgesini blogunuza eklemeyi öğreteceğim. Sadece blogunuzun belirtilen köşesinde ki simgeye tek bir tıklama ile blogunuzun en başında olacaksınız...
Simge için size bir kaç öneri:






 Neyse gelelim yapmaya...
Şablon Düzenle kısmından  </head> kodunu bulun. Kodun hemen üzerine aşağıda ki kodu yapıştırın:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
Daha sonra ]]></b:skin> kodunu bulun. Hemen üzerine aşağıda ki kodu yapıştırın:

/* Yukarıya Dön
----------------------------------------------- */
#Subir {
position: fixed;
bottom: 30px; /* Blogun sonundan uzaklık */
right: 30px; /* Sağdan veya soldan ne kadar uzaklık  */
}
#Subir span {
width: 0px; /* Görüntü Genişliği */
height: 0px; /* Resim Yüksekliği */
display: block;
background: url(RESİM URL BURAYA) no-repeat center center;
}
Son olarak da  </body> kodunu buluyoruz ve üzerine aşağıdaki kodu yapıştırıyoruz:

<div id='Subir'>
<a href='#UP'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Voltar ao Topo
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#Subir").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#Subir').fadeIn();
} else {
jQuery('#Subir').fadeOut();
}
});
jQuery('#Subir a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
//]]>
</script>
Hepsi bu kadar, umarım işinize yaramıştır. :3 ♥

Hiç yorum yok:

Yorum Gönder

Rainbow