Blogger Bloglarına En Üste Dön - Yukarı Çık - Başa Dön Eklentisi

  Bu yazımda sizlere küçük ama çok şirin ve faydalı bir eklentiyi paylaşacağım. Bu eklenti okuyucularınızın çok işine yarayacak ve onlara fayda sağlayacak bir eklentidir. Uzun bir yazınız var ve okuyucunuz çok altlara indi ve tekrar en üste dönmek istedi tam bir işkence o şeriti çek çek... veya yukarı tuşuna bas bas ama o arada bizim küçük dediğimiz olmasa da olur dediğimiz başa dön eklentisi devreye girecek sağ alttan eklentinin üstüne geldiğinde okurunuz en üste çık yazısı belirecek ve bu eklentinin butonuna tıkladığı zaman okurunuzun tüm ıstırapları son bulacak.

  Bu eklentiyi blogunuza eklediğinizde görüntüsü yandaki resimdeki gibi olacaktır ama tabi kide tamamen özelleştirilebilir bir eklenti. Yazımın devamında bu eklentiyi blogunuza nasıl ekleyeceğiniz vardır.

En Üste Dön - Yukarı Çık - Başa Dön Eklentisini Nasıl Blogunuza Eklersiniz?

  Bu eklentiyi blogunuza ekleyebilmek için Yerleşimden Gadget Ekleye tıklamalısınız  ve ardından HTML/JavaScript'i seçmelisiniz. Açılan pencereye alttaki kodları yapıştırın.

kod:

<türk blog yardımcısı en üste çık eklentisi kodları>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" >

/*********************************************** 

* Bu kod Türk Blog Yardımcısı tarafından tasarlanıp modifiye

edilmiştir.

* Destek olmak için http://turkblogyardimcisi.blogspot.com.tr/'yi ziyaret edin.

***********************************************/

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://www.gogusbuyutucuked.com/SystemImage/up.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" 

    controlattrs: {offsetx:25, offsety:25}, //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:'En üste çık'}) 

                .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></türk>

Kodun Düzenlemeleri

  Kırmızı ile yazılı olan kod kısmındaki link sağ alttaki çıkacak olan ikonun URL'sidir.

  Mavi ile yazılı olan kod kısmındaki yazı ise üstüne gelince beliren En üste çık yazısıdır.

  Yeşil ile yazılı olan kodların yanındaki değerler ikonun sayfanızda görüneceği yerin kordinatlarıdır offsetx değerini artırdığınızda ikon daha solda yani yatay eksende olacaktır değişimi, offsety değerini artırdığınızda ikon daha yukarıda yani dikey eksende olacaktır değişimi.

 bu kodlarda ki değişiklikleri keyfinize göre belirleyebilirsiniz.

Kolay gelsin, iyi bloglar!

Yazar Hakkında

Merhaba ben Onur Gücer, hobi olarak uzun zamandır blog yazmaktayım ve bu blogda sizlere deneyimlerimi paylaşıyorum.. İyi günler, iyi bloglar.. (: