Cara Memasang Tombol "Back to Top" SEO Friendly di Blog

Baca Juga

Cara Memasang Tombol Back to Top (Kembali ke Atas) SEO Friendly di Blogger.

BACK to Top Button (Tombol Kembali ke Atas) merupakan salah satu trending desain blog (website).

Menu, link, atau Tombol Kembali ke Atas ini membuat blog jadi sangat user friendly karena memudahkan pengunjung kembali ke bagian atas halaman dalam satu klik atau "tap".

Demo Tombol Kembali ke Atas bisa dilihat di blog CB ini. Ada di bagian kanan bawah layar komputer Anda. Namun, tombol ini hanya muncul saat halaman sudah sedikit ke bawah atau bagian atas blog mulai tertutup.

Cara Memasang Tombol Back to Top SEO Friendly

Berikut ini cara memasang kode "back to top" (kembali ke atas) yang hanya muncul saat halaman blog discroll ke bawah.

1. Layout > Add a Gadget > pilih HTML/Javascript
2. Judul kosongkan
3. Copas kode Tombol Back to Top SEO Friendly berikut ini di kolom "Content":

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpaE2mGvZqiQxPrv7E_c3lbxyGAZdD-SLemHbQnPrv3jgZS7zFJFaLapeLMgdzh-u0My0az5bewnxx1SxVeCvKtzpIAeuvGTxEjnd6xOHlQnqGfeNpNaSezoNk41Tr8hEwojZQjCP5I2ou/s1600/back+to+top+button+(1).gif" />', //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>

Pilihan gambar panahnya, bisa dilihat di posting cara pasang back to top sebelumnya.

4. Save!

KODE LEBIH SIMPLE:

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img alt="kembali ke atas" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXCc2KQodiLvHik2wAdzdJAYlKIiTVNutCrU9ZLwDlBFfBBF1z6Qy0ds6rLPcFPCzOhyblI7HUA80lxGci_080KtD5UTGIF9KhaHT0ULvOguOZkJedmJtiDOOJYaSQOctgGU9HvFTCoZJz/s1600/back+to+top+(2).png"/></a>

Namun kode simple ini selalu muncul, baik saat halaman discroll ke bawah ataupun tidak. Good Luck! (http://www.contohblog.com).*