Wednesday, 8 August 2012

Wednesday, August 08, 2012
16
cara membuat tombol kembali keatas di blog

Memasang tombol kembali ke atas di blog | Pada kesempatan yang lalu, tepatnya beberapa hari yang lalu saya share tentang cara membuat daftar isi di blog. Saya baru sempat update lagi berhubung adanya kesibukan di tempat PKL sehingga blog ini kurang terurus, tapi alhamdulillah ada kesempatan untuk update blog. 
Pada postingan ini, saya sekedar berbagi tombol kembali ke atas yang saya terapkan di blog saya ini dengan efek scroll dan juga auto hide. Langsung saja caranya sebagai berikut:
  1. Pada dashboard blog, pilih tata letak.
  2. kemudian pilih tambah gadget
  3. pilih HTML/Javascript
  4. Kemudian copy kode di bawah ini dan paste pada koloh HTML/javascript tadi
  5. <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="http://3.bp.blogspot.com/-b1hw2cqey60/TfzE0oLSFkI/AAAAAAAAD3w/FpMh-mdf7rA/s400/Back-to-top.png" />', //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>
  6. Simpan
Silahkan ganti link image yang berwarna biru di atas dengan gambar anda. Jika anda ingin gambar back to top silahkan kunjungi link ini.
Sekian dan wassalam

Jika anda menemukan blog ini dari search engine google dan anda merasa terbantu dengan informasi dari blog ini, silahkan klik tombol google plus di samping kanan. terima kasih partisipasinya.