Blogunuza Yukarı Çık Butonu

Blogger'da bazı yazılar olur ki upuzun bazıları ise çok kısa... Ana menüye dönmek isteriz fakat yazı çok uzun olduğundan sayfayı hareket ettirmek biraz zor olabilir.Bunun için sizlere çok iyi bir kolaylık daha sağlandı.Blogger Yukarı Çık Butonu ile yazınızın sonunda okuyucularınız hiç uğraşmadan sadece butona tıklayarak sayfanın başına dönebilecekler.

İlk olarak Yerleşim / HTML'yi Düzenle'ye giriyoruz ve Widget Şablonlarını Genişlet'e tıklıyoruz.

Daha sonra CTRL + F yardımıyla şu kodu buluyoruz :

]]></b:skin>

ve üzerine şu kodu ekliyoruz :

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

Daha sonra tekrar şu kodu buluyoruz :

</body>

ve üstüne bu kodu ekliyoruz :

<a href="#" id="backtotop"><img src="buton adresi" alt="back to top" /></a>

Unutmayın! Bir önceki kodda yazılan 'buton adresi' kısmına aşağıda beğendiğiniz buton resimlerinden birinin adresini yazacaksınız.Buyrun butonlar :

http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBl0UhsvI/AAAAAAAAASA/ge0GmH0HkyE/s400/bttp-19.png

http://1.bp.blogspot.com/_JwD5r652h00/SvDBl9PLQ7I/AAAAAAAAAR4/5fV05DNfZ9o/s400/bttp-17.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBloI2NZI/AAAAAAAAARw/VI-Li7cPUvM/s1600/bttp-16.png

http://1.bp.blogspot.com/_JwD5r652h00/SvDBXF2WGRI/AAAAAAAAARo/FIPZOwsTTBc/s400/bttp-15.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBW-al_pI/AAAAAAAAARg/Aoxlzmp3Kw0/s400/bttp-14.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBWmm_WTI/AAAAAAAAARQ/xfyALfcAbZ4/s400/bttp-12.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBWWig4UI/AAAAAAAAARI/28cXbIDOaqk/s400/bttp-11.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBBlYeFHI/AAAAAAAAAQo/lzY3WpZpwPA/s40

http://1.bp.blogspot.com/_JwD5r652h00/SvDBBzoz4II/AAAAAAAAAQw/n9hIomKpQxY/s400/bttp-8.png

http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI/AAAAAAAAARA/oEpqkKnL0Jw/s400/bttp-10.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-7.png

http://1.bp.blogspot.com/_JwD5r652h00/SvDAmVOZPMI/AAAAAAAAAQA/_Y2Nd0UZVMM/s1600/bttp-2.png

Bu yazıdaki buton yukarıya direk çıkmaktadır.Eğer yavaşça yukarı çıkma butonu yapmak istiyorsanız ilk olarak yukarıdakileri yapınız daha sonra şu kodu bulunuz:

<head>

ve altına şu kodu ekleyiniz:

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;

* Yazıda Özgün İçeriğin Yanı Sıra Aşağıdaki Sitelerden De Yararlanılmıştır

http://www.allblogtools.com/uncategorized/add-back-to-top-button-to-your-blogger-blog-19-different-styles-and-more/