Blogging | Bloğunuza 'Yukarı Çık Butonu' Ekleyin!

16

21 Ocak 2017

yukarı çık butonu

Finallerden kurtulmanın sevinciyle attık kendimizi bloga inşAllah 2 günde 1 yazı paylaşmaya çalışacağız #kizkardeslerolarak malum sınavlar yüzünden çok boşladık buraları...

Sevdiğinizi umarak blog ipuçlarına devam etmeye karar verdik  tabi basit ama bloğunuza canlılık katacak öneriler sunmaya çalışacağız.
Bugünse bloğunuza nasıl yukarı çık butonu ekleyebileceğinizi göstereceğim ki çok basit bir işlem "ben bu işleri hiç beceremiyorum" diyenler bile kolaylıkla yapacak hadi başlayalım :) 
Öncelikle internetten sizin için bulduğumuz tasarımlardan beğendiğinizi, bloğunuzun temasına yakıştırdığınız butonlardan birinizi seçmeniz lazım. 
Balonlu tatlış bir seçenek

Anime Severler İçin
                                                                              
Baykuş Severlere

    



                              
Seçtikten sonra fare ile sağ tuş  resmi yeni sekme de aç yapıp resmin url'sini kopyalamalısınız. Kopyaladığınız url'yi aşağıya bırakacağım koddaki pembe kısma yapıştırdığınızda butonunuz hazırlanmış oluyor.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
/*********************************************** 
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* Modified by www.blogokulu.blogspot.com 
* This notice MUST stay intact for legal use 
* Visit Project Page at http://www.dynamicdrive.com for full source code 
***********************************************/
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="RESMİNİZİN URL'SİNİ BURAYA YAPIŞTIRIN" />', //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 Kaynak: Blog Okulu)  
                                           Peki bu butonu bloğa nasıl ekliyoruz o da çok basit 
yerleşimgadget ekle➤html-javascriptte kodu yapıştırıp kaydetmeniz yeterli 

Biraz minnoş tasarımlar seçtik sanırım aşağıdaki siteler de sade tasarımlarda mümkün bir göz atın! 😊 

Web Kodu & Site Kodları

İşte bu kadar eğer bloğunuza bu butonlardan eklerseniz mutlaka bize yorumlardan linkinizi bırakın bloğunuzu ziyaret edelim eğer yapamazsanız da yine yorumlara yazın ki size zevkle yardım edelim 😊

Önceki yazılarımızda ise şık watercolor sosyal medya ikonları ve pinterestte bulduğumuz header seçeneklerini nasıl ekleyebileceğinizi göstermiştik :) onları okumak içinse yazılara tıklayabilirsiniz! 😊  
Tüm blogger ipucu yazılarımız için tık → Bi Blog

16 yorum:

  1. Paylaşımınız için çok teşekkürler. Butonlar çok tatlılar iyi bloglamalar dilerim kızkardeşler :D

    YanıtlaSil
  2. Benim de yukarı diyen minik bir ok var :) Özellikle mobilden girilince çok işe yarıyor :) Teşekkürler kızlar :)

    YanıtlaSil
    Yanıtlar
    1. gayet şık bir tasarım olmuş bloğun iyi günlerde kullan :)

      Sil
    2. Çok teşekkür ederim :)

      Sil
  3. Elinize sağlık, gayet güzel paylaşım olmuş. Bu arada blogunuzun temasını yenilemişsiniz, çok şık ve hoş olmuş.

    YanıtlaSil
  4. Ne güzelmiş, eve dönünce bir bakarım ben de :)

    YanıtlaSil
  5. Meraba 😃 tamam çok tatlı bu butonlar lütfen türkish diyorum 😃 mümkünmüdür bu back to top lara türkçe öğretmek 😃 sizi blogdan da takip ediyorum artık.3 kız kardeş olarak hoşuma gitti bloğunuz.

    YanıtlaSil
    Yanıtlar
    1. Öncelikle bloğumuza 3.kız kardeşimiz olarak hoş geldiniz :) keşke türkçe olanları da paylaşabilsek ama hep bulduğumuz kaynaklar malesef ingilizceydi :(

      Sil
    2. Hoşbuldukkiiii 😃 amannn napalim böylede güzel bu butonlar renk kattı en azından 😃

      Sil
  6. Blog tasarımınız ne kadar da tatlış olmuş yaa! (Yeni inceleme fırsatı buldum, biliyorsunuz;) ) Çok beğendiim! :)

    YanıtlaSil
    Yanıtlar
    1. Çok teşekkür ederiz canım benim :) daha güzelleri senin olsun :)

      Sil
  7. geçmiş olsuun az tatil yapıın şirinleer :)

    YanıtlaSil

Yorumlarınız bizim için çok değerli, çok teşekkür ederiz :)
Sizden ricamız linklerinizi Blog Keşif Etkinliğimize bırakmanız! :)