22 Ocak 2016 Cuma

Yukarı Çık Butonu Ekleme

yukari cik butonu
Yukarı çık butonu

Yukarı Çık Butonu Ekleme

Yukarı çık butonu, uzun yazılar yazan bloggerların çok başvurduğu, zamandan kolaylık sağlarken, görselliğede önem verenlerin farklı arayış içerisinde olduğu bir buton

Genelde sade tek düze oklar kullanılıyor. Bunlardan sıkılanlar için size hazırladığım yukarı çık butonlarını sunuyorum efenim ;)

Yukarı Çık Butonu Nasıl Eklenir?

Panelden-Yerleşim-Gadget ekle-HTML/Javascript şeklinde sıralamayı takip ediyoruz.  Aşağıdaki kodu oraya aynen yapıştırıyoruz.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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://www.upmatik.com/m/2016/01/21/yukari-buton.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" 
    controlattrs: {offsetx:5, 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:'Sayfa Başına Dön'}) 
                .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>

Kod içerisinde bulunan kırmızı resim linkini aşağıda yaptığım veya kendiniz tasarladığınız resim linkleriyle değiştirebilirsiniz.


yukari cik butonu

http://www.upmatik.com/m/2016/01/22/blog-yukarı-butonu.png


yukari cik butonu

http://www.upmatik.com/m/2016/01/22/blogger.png

yukari cik butonu

http://www.upmatik.com/m/2016/01/22/buton-yukarı.png

yukari cik butonu
http://www.upmatik.com/m/2016/01/22/mervenin-evinden.png

yukari cik butonu
http://www.upmatik.com/m/2016/01/22/Untitled-2.png

yukari cik butonu

http://www.upmatik.com/m/2016/01/22/YUKARI-BUTON.png

yukari cik butonu

http://www.upmatik.com/m/2016/01/22/YUKARI-BUTONU.png

yukari cik butonu
 http://www.upmatik.com/m/2016/01/22/yukarı-blogger.png
yukari cik butonu

http://www.upmatik.com/m/2016/01/22/yukarı-buton-blog.png

yukari cik butonu

http://www.upmatik.com/m/2016/01/22/yukarı-buton.png

yukari cik butonu
http://www.upmatik.com/m/2016/01/22/yukarı-butonu-blogger.png

yukari cik butonu
http://www.upmatik.com/m/2016/01/22/yukarı-butonu-mervenin-evinden.png

yukari cik butonu

http://www.upmatik.com/m/2016/01/22/yukarı.png

Sevgilerle...
Merve'nin evinden









28 yorum:

  1. aaaa çok güzel bunlarrr tam aradıklarım, yavaş yavaş blogumu kurmaya başlıyorum, her şey için teşkür

    YanıtlaSil
  2. ruju çok beğendim eline sağlık

    YanıtlaSil
  3. Ayakkabıya bayıldımmmm evet evet harikaaa :)

    YanıtlaSil
  4. Enfes olmuş bir tanesini kullanabilirim değil mi? ^^

    YanıtlaSil
    Yanıtlar
    1. Balonu ekledim canım. Çok içime sindi. Çok teşekkür ederim ^^

      Sil
    2. evet gördüm canım, güle güle kullan ;)

      Sil
    3. Teşekkür ederim Mervecim ^^

      Sil
  5. Çok renkli bir eklenti.
    ucluklavye.blogspot.com beklerim

    YanıtlaSil
  6. Çok iyi bu bilgiler çok değerli.

    YanıtlaSil
  7. Yanıtlar
    1. gördüm gayet güzel olmuş güle güle kullan ;)

      Sil
  8. çok şekerler ya :)) teşekkürler paylaştığın için :)

    YanıtlaSil
  9. şahane olmuş. hemen bir tanesini kullanmaya başladım bile. ellerine sağlıkkk

    YanıtlaSil
    Yanıtlar
    1. güle güle kullan canım gördüm çok güzel olmuş :)

      Sil
  10. Yaptım çok güzel oldu :) çok teşekkür ederim :).

    YanıtlaSil
    Yanıtlar
    1. rica ederim ggüle güle kullan :)

      Sil