Blogger için "yukarı çık" buton eklentisi

Blogger için "yukarı çık" buton eklentisi
Blogger için "yukarı çık" buton eklentisi
Uzun uzun içeriklere sahip blog sayfaları için kullanılabilecek harika bir eklenti (widget), sayfa başına dön, yukarı çık 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>
<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>
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.

Örnek iconlar:
yukarı çıkyukarı çıkyukarı çık

Bu içeriklere de bi' göz atın!

3 yorum:

  1. Yürüyen merdivenler hipnoz etkisi oluşturdu bende. :)

    YanıtlaSil
    Yanıtlar
    1. Ayrıca aşağı inen merdiven de var :) bir de sayfa sonu eklentisi olabilirmiş konuda :)

      Sil
    2. Recep Hilmi Tufan Üşendim görsel hazırlamadım, aramalarda bununla karşılaşınca da eklemek istedim :)

      Web Cenneti :)

      Sil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın. (Hemen silinir!)
3. Yazım ve dil bilgisi kurallarına uymaya çalışın lütfen. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

 
Bumerang - Yazarkafe

Copyright © 2017 Kişisel Blog | Blog Tecrübem. Tüm hakları saklıdır.
I Blogger!