4 Şubat 2015 Çarşamba

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!
author

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.. (:

1 yorum:

  1. Çok Güzel Oldu Bakma İçin Siteme Gelebilirsiniz.

    YanıtlaSil

Yorum Kuralları
1. Dediklerinizde kimseye kırıcı olmayınız.
2. Lütfen konu dışı şeyleri iletişim sayfamızdan yazmaya çalışınız.
3. Sorularınıza en kısa sürede cevap verilmeye çalışılacaktır.