Cara Membuat Tombol Up di Blog Mudah Banget

Cara Membuat Tombol "Back To Top" di blogger -13 Juni, 2016 Akhirnya saya baru saja bisa memasukkan tombol "Back to Top" pada blog ini, Bisa dilihat pada sudut kiri bawah.

Dan juga sebenernya lagi, fungsi dari "Back to Top" ini tergantung orangya sendiri dan kebutuhan masing-masing, karena tidak sedikit pula orang yang bilang kalau fungsi ini malah meperlambat loading lah, atau apalah, bikin istri tidak cepat keranjang lah, hehehe.

Tapikembali pada kebutuhan masing-masing, dikarenakan saya sendiri adalah orang yang agak pemalas jadi menurut saya wajib lah setidaknya pasang tombol ini, belum nanti jaga-jaga (mungkin ada) komentar yang sampe sampe bejibun kan males ngatur kusor ketas keatas ketas terus kan, ya sob?

Catatan: Sebenarnya saya disini menggunakan teknik/cara lewat Html/Javascript karena menurut saya ini adalah cara yang paling mudah.

Oke lah, sepertinya saya sudah terlalu banyak gitu ngomong diatas, Ahahaha.. langsung saja kita ikuti step stepnya dibawah ini:


1. Masuk ke Blogger agan.

2. Buka Template, Lalu Tambahkan Html/Javascript

3. Lalu isikan kode ini dibawah ini pada Html/JavaScript agan yang sudah disiapkan.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/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="Tulisan Warna MERAH" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //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:'Scroll Back to Top'})
                .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>

4. Ganti tulisan MERAH dengan link gambar "Back to Top" milik agan sendiri.

5. Klik Simpan, Lalu Simpan Setelan (diatas) Dan.. Lihat hasilnya!

Sekian Tutorial kali ini mengenai dasar dasar Blogging ,, comot terus blog ane ya gan! semoga bermanfaat..

Related Posts:

Tweet