Klik Untuk Chat via WhatsApp
+62821-87-56-56-53
jasa buat web/blog
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.

16 komentar:

  1. trimakasih tutorialnya sobat, ane save dulu, siapa tahu nanti minat pasang:}

    ReplyDelete
  2. nah.. ini yang pake Jquery itu kan.. :D oke dehh :D

    ReplyDelete
  3. benar-benar banyak manfaat dan ilmu yang bisa didapat dari super blog ini :)

    ReplyDelete
  4. Replies
    1. silahkan..
      kalau bisa linknya juga di ikutin ya, tapi kalau tidak bisa tidak usah..

      yang penting share..

      Delete
  5. nice tutorial... heemm penasaran pengen mencobanya.

    ReplyDelete
  6. . . kalo bikin tombol balik ke atas n ke bawah ada gak?!? . .

    ReplyDelete
  7. dulu saya pernah pasang sob back to top

    ReplyDelete
  8. ana minta ijin copy dulu artikelnya sob, bertanda tengah malam ....

    ReplyDelete
  9. pernah pasang juga di blog tombol back to top sobat, tapi uda saya copot kembali sobat, heheheh

    ReplyDelete
  10. terima kasih tutorialnya izin copas untuk saya pasang di blog
    salam kenal buat semua sahabat disini

    ReplyDelete

Blog ini menggunakan moderasi Komentar untuk menghindari komentator yang hanya menyebarkan spam. Berkomentarlah yang baik untuk menjalin silaturahmi