9 Mayıs 2010 Pazar

Bütün Sistemler İçin Yukarı Çık Çapası (Butonu)

Merhaba Arkadaşlar Uzun zamandı blogumla ilgilenemiyordum yaklaşık 5-6 gündür Sebebi ise dershanenin bizim sınıfı kampa alması ve pansiyonda kalmamız.Bu yüzden Öncelikle Hepinizden Özür Dilerim.

Uzun bir aradan artık tatil diyelim ve merak ettiğim bir konu vardı "Yukarı Çık Çapası (Butonu)" ama bu buton diğerlerimden ziyade en üste geldiği an kaybolmakta idi ve biraz araştırmam sonucu bunu buldum.

Yukarı Çık Çapası (Butonu) Blogger, Blogcu, Bedava Sitem ve diğer hizmetleri kullanan arkadaşlar kullanabilmekte.Eğer İsterseniz Artık Anlatıma Geçelim.


Öncelikle Blogger Arkadaşlar İçin "Yukarı Çık Çapası (Butonu)'nu" Yapalım.
Şimdi Yerleşim  > Sayfa Öğeleri > Gadget Ekle Veya Bulunan "HTML + Js" Öğesi ekleyeylim veya ekli olanı açıp aşağıdaki kodları Yapıştıralım.


<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://i41.tinypic.com/2l8kp4m.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>

Kodlarını yapıştıralım kırmızı olan yer resim linki uraya başka bir url koyabilirsiniz.

Sıra Geldi blogcu Arkladaşlar İçin Yukları Çık Çapası (butonu) Yapmaya
Şablon Ayarları > Şablon düzenle (HTML) Dedikten Sonra </body> Tagından Önce Aşağıdaki Kodları Yapıştırıyorlar



<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://i41.tinypic.com/2l8kp4m.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>



Kaydedip Çıkıyoruz İşte Hepsi :Bu Kadar Bloggerlar İçin Yukarı Çık Çapası Butonu Ve Blogcular İçin Yukarı Çık Çapası (Butonu) Yaptık Hepsi bu Kadar Hayırlı Olsun bire Teşekkür Yeter Be Aga. :)

8 yorum:

  1. ;)) pek fazla kullanılmayan bir yön aracıdır.
    TSHKKbunu kullanmak çok uzun makaleli sayfalar için iyidir

    YanıtlaSil
  2. Evet Aslında doğrusunuz.Siteye + bir değer katmakta

    YanıtlaSil
  3. Ohh aradıımı buldum. teşekkür

    YanıtlaSil
  4. böyle şeyleri siteme ekledigimde çok kasıyor :(

    YanıtlaSil
  5. deneme deneme bir iki üç deneme

    YanıtlaSil
  6. Evet siteyi birazcık kasıyor. Ama güzel bir olay.

    YanıtlaSil

Yorum Almak Bir Site Sahibine Verilecek En Güzel Hediyedir Teşekkür Ederim..