Yukarı Çık Butonu
Bugün yukarı çık butonunun nasıl yapıldığını öğreneceksiniz, Blog içeriğinizde özel, blogunuzdaki ziyaretçiler için kullanımı kolay.
Yukarı çık veya aşağı in butonu gibi ziyaretçilerinizin daha kolay gezinmelerini sağlamış olacaksınız.
1. 19 Farklı Stiller ile Top Düğmeler Görüntü
Adım 1
Tamam, şimdi blogger hesabına gidin ve Tasarım –> Şablon –> HTML'yi düzenle ve aşağıdaki kodu bulabilirsiniz.
Not: Yukarıda şablon yedeklemeyi mutlaka yapınız herhangi bir hatada
şablonu geri yükleyebilirsiniz.
HTML şablonu genişlete tıklayın ve Crtl+F tuşlarına basarak arama yapın.
]]></b:skin>
#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}
</body>
<a href="#" id="backtotop"><img src = "Resim URL"alt =" geri dön "/></ a>
http://3.bp.blogspot.com/_JwD5r652h00/SvDAnTlDfDI/AAAAAAAAAQY/y-NAytkDXjI/s1600/bttp-5.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDAnGbH7qI/AAAAAAAAAQQ/qKtrVmPCBXY/s1600/bttp-4.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmyqvA9I/AAAAAAAAAQI/hACE99TswzU/s1600/bttp-3.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmXE1tvI/AAAAAAAAAP4/pQk69X73NIo/s1600/bttp-1.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmVOZPMI/AAAAAAAAAQA/_Y2Nd0UZVMM/s1600/bttp-2.png
http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI/AAAAAAAAARA/oEpqkKnL0Jw/s400/bttp-10.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDBBw_U6MI/AAAAAAAAAQ4/KDKaH8OTDO4/s400/bttp-9.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDBBzoz4II/AAAAAAAAAQw/n9hIomKpQxY/s400/bttp-8.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBBlYeFHI/AAAAAAAAAQo/lzY3WpZpwPA/s40
http://4.bp.blogspot.com/_JwD5r652h00/SvDBWWig4UI/AAAAAAAAARI/28cXbIDOaqk/s400/bttp-11.png
http://4.bp.blogspot.com/_JwD5r652h00/SvDBWmm_WTI/AAAAAAAAARQ/xfyALfcAbZ4/s400/bttp-12.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBW-al_pI/AAAAAAAAARg/Aoxlzmp3Kw0/s400/bttp-14.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDBXF2WGRI/AAAAAAAAARo/FIPZOwsTTBc/s400/bttp-15.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBloI2NZI/AAAAAAAAARw/VI-Li7cPUvM/s1600/bttp-16.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDBl9PLQ7I/AAAAAAAAAR4/5fV05DNfZ9o/s400/bttp-17.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBl0UhsvI/AAAAAAAAASA/ge0GmH0HkyE/s400/bttp-19.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png
<a href="#" id="backtotop"><img src="http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png" alt="back to top" /></a>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script> <script language="javascript"> $(window).ready(function(){ $('#backtotop').click(function(e){ e.preventDefault(); $('html, body').animate({scrollTop:0}, 'slow'); }); }); </script>
]]></b:skin>
#backtotop { width:100px; /* Change Box Width*/ background:#F4FFBF; /* Change background color*/ border:1px solid #ccc; /* Change Border Style*/ text-align:center; padding:5px; position:fixed; bottom:10px;right:10px; cursor:pointer; color:#666; /* Change text color*/ text-decoration:none; }
</body>
<a href="#" id="backtotop">Back to top</a>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>