 |
| Blogger için "yukarı çık" buton eklentisi |
Daha önce böyle bir eklentinin gereksiz olduğunu düşünür ve tasarladığım sitelerde pek kullanmazdım açıkçası. Ama geçtiğimiz günlerde fare olmadan dizüstü bilgisayar kullanırken anladım ki "yukarı çık" eklentisi oldukça faydalı bir eklenti. 😊 Ayrıca uzun uzun içeriklere sahip blogger dostlarımın da kullanmasını tavsiye ederim.
Yukarı çık eklentisi için bir çok kaynak internette mevcut. Ben pek uğraşmak istemediğim için eklenti olarak aşağıdaki kodları kullanmayı tercih ettim. Blog sayfanıza eklemek için ise yapmanız gerekenler oldukça basit.
İlk olarak Blogger kullanıcı paneline ulaşıyoruz, burada sol tarafta yer alan "Yerleşim" sekmesini tercih ediyoruz. Daha sonra dilediğimiz yer için "Gadget ekle" seçeneğini seçip "HTML/JavaScript"'e tıklıyoruz. Ve açılan küçük pencereye aşağıdaki kodları ekleyip kaydediyoruz.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>Son olarak yukarıda kodlar arasında kırmızı renkle belirttiğim "GÖRSEL LİNKİ" kısmına, dilediğiniz iconun linkini eklemeyi de unutmayın.
<script type="text/javascript" >
var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="GÖRSEL LİNKİ" />', //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>
Örnek iconlar:
Bu içeriklere de bi' göz atın!
Yürüyen merdivenler hipnoz etkisi oluşturdu bende. :)
YanıtlaSilAyrıca aşağı inen merdiven de var :) bir de sayfa sonu eklentisi olabilirmiş konuda :)
SilRecep Hilmi Tufan Üşendim görsel hazırlamadım, aramalarda bununla karşılaşınca da eklemek istedim :)
SilWeb Cenneti :)