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









29 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
  5. kızların olduğu çok datlu :D

    YanıtlaSil
  6. Çok renkli bir eklenti.
    ucluklavye.blogspot.com beklerim

    YanıtlaSil
  7. Balon güzelmiş.

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

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

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

    YanıtlaSil
  11. ş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
  12. Yaptım çok güzel oldu :) çok teşekkür ederim :).

    YanıtlaSil