Blogger blogunuza 'Alt' ve 'Üst' butonları ekleyin

'Alt' ve 'üst' butonları sayfanın el altına veya en üstüne çıkmak için kullanılır.Eğer ana sayfada veya diğer sayfalarda çok içerik varsa bu butonlar bize kolaylık sağlar.Genellikle çok yorum yapılan sayfalarda kolaylıkla en altta veya en üste çıkmak için bir çok ünlü blogcu kendi bloglarına 'Alt' ve 'Üst' butonları ekler.


                            



Peki 'Alt' ve 'Üst' butonlarını nasıl ekleyebilirsiniz?Aşağıdaki adımları takip edin:

Adım 1:Blogger hesabınıza giriş yapınız ve sırasıyla Şablon>HTML'yi düzenle kısımlarına tıklayın.

Adım 2:HTML kodu içinde herhangi bir alana tıklayın ve CTRL+F yardımıyla aşağıdaki kodu bulun:

]]></b:skin>

Adım 3:Yukarıdaki kodu bulduktan sonra hemen üstüne alttaki kodu yapıştırın.

.button_up{padding:7px; /* Distance between the border and the icon */background-color:white;border:1px solid #CCC; /* Border Color */position:fixed;background: white url(http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you wbackground-position:50% 50%;width:20px; /* Button's width */height:20px; /* Button's height */bottom:280px; /* Distance from the bottom */right:5px; /* Change right to left if you want the buttons on the left */white-space:nowrap;cursor: pointer;border-radius: 3px 3px 3px 3px;opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}.button_down{padding:7px; /* Distance between the border and the icon */background-color:white;border:1px solid #CCC; /* Border Color */position:fixed;background: white url(http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you wanbackground-position:50% 50%;width:20px; /* Button's width */height:20px; /* Button's height */bottom:242px; /* Distance from the bottom */right:5px; /* Change right to left if you want the buttons on the left */white-space:nowrap;cursor: pointer;border-radius: 3px 3px 3px 3px;opacity:0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}

-Yeşil renkle belirtilen url'lerin yerini değiştirerek Alt ve Üst butonlarının yerini değiştirebilirsiniz.

-Butonların arkaplan renklerini değiştirmek için sarı renkle belirtilen white kelimesini değiştirin.


Adım 4:Şimdi yine CTRL+F yardımıyla alttaki kodu bulun:

</body>

Adım5:Adım 4'te bulduğunuz kodun hemen üstüne alttaki kodu yapıştırın.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/><div class='button_down' id='button_down' style='display:none;'/>
<script>//<![CDATA[(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=
setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this
).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {var $elem = $('body');$('#button_up').fadeIn('slow');$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){$('#button_up,#button_down').stop().animate({'opacity':'0.2'});});$(window).bind('scrollstop', function(){$('#button_up,#button_down').stop().animate({'opacity':'1'});});$('#button_down').click(function (e) {$('html, body').animate({scrollTop: $elem.height()}, 800);} );$('#button_up').click(function (e) {$('html, body').animate({scrollTop: '0px'}, 800);} );});//]]></script>

Adım 6:Şablonu kaydet'e tıklayın.