Cumartesi, Aralık 31, 2011

19.Blogger Yukarı Çık Butonu


back to top For Blogger

Blogger Yukarı Çık Butonu Nasıl Eklenir

Bu yazımda size farklı bir anlatım olan, blogumda alt kısımda görmüş olduğunuz yukarı çık butonunu anlatacağım. Öncelikle blogger kontrol panelinizden 
Tasarım> şablonlar>  html düzenleye gidiyoruz.
Aşağıdaki kodu aratıp buluyoruz.



]]></b:skin>


Bu kodun üstüne şu kodu yapıştırıyoruz.

 #backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}
Ardından şu kodu buluyoruz.


</body>

Bu kodunda önüne şu kodu yapıştırıyoruz.


<a href="#" id="backtotop"><img src="resim-Url" alt="back to top" /></a>  

Üstte gördüğünüz ‘Resim-Url‘ yazan yere aşağıda örnek resimlerden birinin adresini alıp yapıştırmanız yeterli olacaktır.


back to top For Blogger
http://3.bp.blogspot.com/_JwD5r652h00/SvDAnTlDfDI/AAAAAAAAAQY/y-NAytkDXjI/s1600/bttp-5.png
back to top For Blogger
http://2.bp.blogspot.com/_JwD5r652h00/SvDAnGbH7qI/AAAAAAAAAQQ/qKtrVmPCBXY/s1600/bttp-4.png
back to top For Blogger
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmyqvA9I/AAAAAAAAAQI/hACE99TswzU/s1600/bttp-3.png
back to top For Blogger
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmXE1tvI/AAAAAAAAAP4/pQk69X73NIo/s1600/bttp-1.png
back to top For Blogger
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmVOZPMI/AAAAAAAAAQA/_Y2Nd0UZVMM/s1600/bttp-2.png
back to top For Blogger
http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png
back to top For Blogger
http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI/AAAAAAAAARA/oEpqkKnL0Jw/s400/bttp-10.png
back to top For Blogger
http://2.bp.blogspot.com/_JwD5r652h00/SvDBBw_U6MI/AAAAAAAAAQ4/KDKaH8OTDO4/s400/bttp-9.png
back to top For Blogger
http://1.bp.blogspot.com/_JwD5r652h00/SvDBBzoz4II/AAAAAAAAAQw/n9hIomKpQxY/s400/bttp-8.png
back to top For Blogger
http://3.bp.blogspot.com/_JwD5r652h00/SvDBBlYeFHI/AAAAAAAAAQo/lzY3WpZpwPA/s40
back to top For Blogger
http://4.bp.blogspot.com/_JwD5r652h00/SvDBWWig4UI/AAAAAAAAARI/28cXbIDOaqk/s400/bttp-11.png
back to top For Blogger
http://4.bp.blogspot.com/_JwD5r652h00/SvDBWmm_WTI/AAAAAAAAARQ/xfyALfcAbZ4/s400/bttp-12.png
back to top For Blogger
http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png
back to top For Blogger
http://3.bp.blogspot.com/_JwD5r652h00/SvDBW-al_pI/AAAAAAAAARg/Aoxlzmp3Kw0/s400/bttp-14.png
back to top For Blogger
http://1.bp.blogspot.com/_JwD5r652h00/SvDBXF2WGRI/AAAAAAAAARo/FIPZOwsTTBc/s400/bttp-15.png
back to top For Blogger
http://3.bp.blogspot.com/_JwD5r652h00/SvDBloI2NZI/AAAAAAAAARw/VI-Li7cPUvM/s1600/bttp-16.png
back to top For Blogger
http://1.bp.blogspot.com/_JwD5r652h00/SvDBl9PLQ7I/AAAAAAAAAR4/5fV05DNfZ9o/s400/bttp-17.png
back to top For Blogger
http://3.bp.blogspot.com/_JwD5r652h00/SvDBl0UhsvI/AAAAAAAAASA/ge0GmH0HkyE/s400/bttp-19.png
back to top For Blogger
http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png

Yani kodları ekledikten sonra en son şekli şu şekilde olacaktır.

<a href="#" id="backtotop"><img src="http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png" alt="back to top" /></a> 
Veya sadece yukarı çık yazmasını isterseniz eğer


<a href="#" id="backtotop">Back to top</a>
şeklinde de kullanabilirsiniz.