Blogger Yukarı Çık Butonu Yapımı

Bu konuda sizlere blog kullanımında yararlı olabilecek olan 'Yukarı Çık Butonu' nu nasıl blogunuza ekleyebileceğinizi anlatacağım. Eklenti sayesinde uzun blog yazılarınızın sonunda sayfa başına dönmek istediğinizde mouse topu ile uğraşmayacak direk bu eklenti ile sayfanın en başına dönebileceksiniz. Üstelik eklenti sayfa başına gelindiğinde kayboluyor aşağı inildikçe belirginleşiyor.





Kumanda Paneli ➜ Tasarım ➜ Sayfa Ögeleri ➜ Gadget Ekle bölümünden HTML/JavaScript Ekle kısmını bulun ve İçerik kısmına aşağıdaki kodu kopyalayıp yapıştırın.

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var scrolltotop={
//startline:  Integer. Number of pixels from top of doc scrollbar is scrolled before  showing control
//scrollto: Keyword  (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when  control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img  src="http://1.bp.blogspot.com/-yQwVbmtuX0s/T2hRnWG0neI/AAAAAAAADHU/GSmnEDBF0TY/s1600/yukari-cik.png" />', //HTML for  control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of  window corner
anchorkeyword: '#top', //Enter href  value of HTML anchors on the page that should also act as "Scroll Up"  links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){
if (!this.cssfixedsupport)  //if control is positioned using  JavaScript
this.$control.css({opacity:0}) //hide control  immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element  set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},

keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},

togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest  //not IE or IE7+ browsers in standards  mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div  id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to  Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest &&  mainobj.$control.text()!='') //loose check  for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV  containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}

scrolltotop.init()

</script>

Ardından kaydete tıklayarak eklenti kurulumunu tamamlayabilirsiniz.

Kırmızı ile belirttiğim kısma aşağıda verdiğim resimlerden birini ekleyebilirsiniz.

http://1.bp.blogspot.com/-lD96jrHdJBo/T2hUYNgj01I/AAAAAAAADHc/Fc7flcBuaS4/s1600/arriba.png


http://4.bp.blogspot.com/-sXn41Gv2J4Q/T2hUYkDhYJI/AAAAAAAADHg/4WNbsYTvwaQ/s1600/arrowtop.png


http://1.bp.blogspot.com/-ouWH8YlqVLQ/T2hUZKUCy7I/AAAAAAAADHo/bTGsdTnRNq0/s1600/navigate-up-icon.png


http://3.bp.blogspot.com/-xiAGx1y5byY/T2hUZ4rTZjI/AAAAAAAADH0/Bj3k1y89734/s1600/red-arrow-up-icon.png


http://2.bp.blogspot.com/--Za_vM3Kb-A/T2hUdn3TJMI/AAAAAAAADIc/11TKZUuwB2w/s1600/yukari-cik-1.png


http://2.bp.blogspot.com/-anzZjde9PP8/T2hUal3nguI/AAAAAAAADH8/Fqcrz82PJjY/s1600/toTop.png


http://4.bp.blogspot.com/-0PxhchwrfQI/T2hUbirzymI/AAAAAAAADIA/mP5My6B_KGc/s1600/top-yukari.png


http://4.bp.blogspot.com/-pIoFizsXk2w/T2hUcBZIiAI/AAAAAAAADII/4iOqPmgUJeg/s1600/up.png


http://4.bp.blogspot.com/-zuyIkPJqjpw/T2hUco4Kf1I/AAAAAAAADIQ/BEwDFu6gkv0/s1600/up_brown.png