Tombol Back to Top untuk Blog


Tombol Back to Top untuk Blog

Tombol Back to Top untuk blog atau website karena akan memudahkan pembaca apabila halaman artikel sudah sangat panjang, sehingga pembaca hanya menekan atau klik, maka halaman akan otomatis kembali ke atas. Ada template yang sudah dilengkapi dengan tombol back to top dalam script html, namun ada juga yang belum ada tombol ini, sehingga perlu membuat tombol back to top baik melalui edit html maupun Java script. Saya akan menjelaskan dengan melalui Java Script supaya Anda mudah untuk membuatnya, ada cara lain melalui edit template dalam script html, bagi pemula cara ini agak rumit. 

Caranya mudah dan ikuti langkah-langkah berikut ini.

1. Login ke blog Anda.
2. Masuk ke dasbor.
3. Klik tambah tambahkan gadget.
4. Cari menu HTML/ Javascript.
5. Copy script di bawah ini.
6. Pastekan di gadget HTML tadi.
7. Simpan dan Publikasikan.
8. Lihat hasilnya.

Copi script berikut ini :


<!--Back to top script-->
<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={     setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},    controlHTML: '<img src="http://2.bp.blogspot.com/-5xtKo3sslHs/UPbpgD8LY2I/AAAAAAAACBc/gIQGZ9ZBzDg/s1600/back+to+top13.png" />',
    controlattrs: {offsetx:5, offsety:5},
    anchorkeyword: '#top',
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport)
            this.$control.css({opacity:0})
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1)
            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()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
<!--Back to top script end--></scrip>

Warna merah bisa diubah dengan simbul Tombol Back To Top yang Anda  inginkan, seperti
tersebut di bawah ini.



http://1.bp.blogspot.com/-H9FeLj7CD-I/UQu-cumUP5I/AAAAAAAADcE/ri7wY89umU0/s1600/arrow-up-icon+%282%29.png


http://3.bp.blogspot.com/-ggvoO88bhfM/USDi6IWVtFI/AAAAAAAAAjc/n4vpSkZgR00/s1600/back+to+top.png



<a href='#' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='Back to Top'><img rel="nofollow" src="https://lh3.googleusercontent.com/-OpA5xLkcZ-k/TuawqM0M74I/AAAAAAAABhM/Wxlli3el6po/s800/top1.jpg" /></a>




<a href='#' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='Back to Top'><img rel="nofollow" src="https://lh5.googleusercontent.com/-jOrgK5qkK4c/Tuawvt9M-OI/AAAAAAAABhU/BpBLbE2elWs/s800/top3.jpg" /></a>


http://1.bp.blogspot.com/-b3YWne8aCdw/USDmXTnyUiI/AAAAAAAAAkg/SieNqYTVQKQ/s1600/back-to-top-button.png

http://3.bp.blogspot.com/-WH_FEtT_Cvs/USDjPDtErPI/AAAAAAAAAjk/0BNlHdiUu9w/s1600/back+to+top+button.gif

http://2.bp.blogspot.com/-PEmadyDjsUw/USDjUyqlWsI/AAAAAAAAAjs/oVRttmskRfc/s1600/back+to+top+button.gif


Referensi : Dari berbagai sumber







Silahkan Tinggalkan Komentar Anda :