Skip to main content
Kene Ono

follow us

Cara Menambah Tombol Back to Top di Blog

Asslamualaikum.... kawan...
Postingan kali ini saya akan share Cara Menambah Tombol back to top di blog. apa itu ? yaitu tombol yang digunakan untuk kembali ke bagian atas blog (seperti dibawah kanan pojok blog), dengan 1 klik tanpa harus scroll mousenya atau touch pad "mengusap-usap" layar SmartPhone-nya.



Nah, gimana cara pasangnya..?
Mudah...


Cara Memasang Back to Top
  1. Masuk bagian Tata Letak 

  2. Tambahkan Gadget pilih HTML/JavaScript 
  3. Masukkan Script berikut
    
    <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 undefinedInteger, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on undefined0=top).
        setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
        controlHTML: '<img src="URL Gambar Back To Top" />', //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:functionundefined){
            if undefined!this.cssfixedsupport) //if control is positioned using JavaScript
                this.$control.cssundefined{opacity:0}) //hide control immediately after clicking it
            var dest=isNaNundefinedthis.setting.scrollto)? this.setting.scrollto : parseIntundefinedthis.setting.scrollto)
            if undefinedtypeof dest=="string" && jQueryundefined'#'+dest).length==1) //check element set by string exists
                dest=jQueryundefined'#'+dest).offsetundefined).top
            else
                dest=0
            this.$body.animateundefined{scrollTop: dest}, this.setting.scrollduration);
        },
    
        keepfixed:functionundefined){
            var $window=jQueryundefinedwindow)
            var controlx=$window.scrollLeftundefined) + $window.widthundefined) - this.$control.widthundefined) - this.controlattrs.offsetx
            var controly=$window.scrollTopundefined) + $window.heightundefined) - this.$control.heightundefined) - this.controlattrs.offsety
            this.$control.cssundefined{left:controlx+'px', top:controly+'px'})
        },
    
        togglecontrol:functionundefined){
            var scrolltop=jQueryundefinedwindow).scrollTopundefined)
            if undefined!this.cssfixedsupport)
                this.keepfixedundefined)
            this.state.shouldvisible=undefinedscrolltop>=this.setting.startline)? true : false
            if undefinedthis.state.shouldvisible && !this.state.isvisible){
                this.$control.stopundefined).animateundefined{opacity:1}, this.setting.fadeduration[0])
                this.state.isvisible=true
            }
            else if undefinedthis.state.shouldvisible==false && this.state.isvisible){
                this.$control.stopundefined).animateundefined{opacity:0}, this.setting.fadeduration[1])
                this.state.isvisible=false
            }
        },
    
        init:functionundefined){
            jQueryundefineddocument).readyundefinedfunctionundefined$){
                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=undefinedwindow.opera)? undefineddocument.compatMode=="CSS1Compat"? $undefined'html') : $undefined'body')) : $undefined'html,body')
                mainobj.$control=$undefined'<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                    .cssundefined{position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                    .attrundefined{title:'Scroll Back to Top'})
                    .clickundefinedfunctionundefined){mainobj.scrollupundefined); return false})
                    .appendToundefined'body')
                if undefineddocument.all && !window.XMLHttpRequest && mainobj.$control.textundefined)!='') //loose check for IE6 and below, plus whether control contains any text
                    mainobj.$control.cssundefined{width:mainobj.$control.widthundefined)}) //IE6- seems to require an explicit width on a DIV containing text
                mainobj.togglecontrolundefined)
                $undefined'a[href="' + mainobj.anchorkeyword +'"]').clickundefinedfunctionundefined){
                    mainobj.scrollupundefined)
                    return false
                })
                $undefinedwindow).bindundefined'scroll resize', functionundefinede){
                    mainobj.togglecontrolundefined)
                })
            })
        }
    }
    
    scrolltotop.initundefined)
    </script>
    

  4. Tulisan URL Gambar Back To Tap ganti url gambar back to top
  5. Berikut contoh gambar-gambar back to top
    http://4.bp.blogspot.com/-nhvmIT-UOiY/USDh-EyeKDI/AAAAAAAAAjE/hjEdj5OMvO0/s1600/back+to+top.png
    http://4.bp.blogspot.com/-BWmnRp-sR9o/USDmkStjAcI/AAAAAAAAAko/q6nJN8bXMZ8/s1600/back-to-top-button.png
    http://4.bp.blogspot.com/-y2BIm2-mphA/UQLlFFt1-MI/AAAAAAAAAXo/lXvFBVnpLjc/s1600/Back-To-Top.png
  6. Kalau sudah klik simpan - Selesai
Mudah bukan... :)
Sekian postingan artikel kali ini semoga bermanfaat..

Wassalamualaikum....

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar