Artikel terbaru,klik untuk membaca
loading...
  • Kode HTML tombol kembali ke atas untuk blogger

    loading...
    Pada halaman ini saya akan berbagi pengetahuan tentang kode HTML atau script tombol kembali ke atas untuk blogger,manfaat dari script ini adalah untuk meningkatkan kenyamanan pembaca blog atau situs anda sendiri

    Apabila anda tertarik untuk memasangnga di blog atau situs anda silahkan copy scriptnya di bawah ini 

    <script type="text/javascript" >//<![CDATA[
    var scrolltotop={  
        setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]}, 
        controlHTML: '<img src="https://lh3.googleusercontent.com/-djDGtUlZYVg/VWZgc3OhARI/AAAAAAAAJik/9up-tcLb3icthtbooNPApn4oMTx07eBDQCCo/s50/back%2Bto%2Btop%2Bbutton.gif" alt="back to top"/>', 
        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()//]]>
    </script>

    Tampilan pada blog atau situs terlihat seperti gambar di bawah ini 


    Selesai sekarang script tombol kembali ke atas atau back to top sudah anda miliki,tinggal bagaimana memasangnya di blog atau website anda 

    Untuk memasang scriptnya silahkan anda baca tulisan saya yang berjudul cara memasang kode HTML tombol kembali ke atas

    Demikian semoga bermanfaat
    loading...
  • Menarik untuk di baca

Berlangganan posting sampingkanan.com

Di kirim oleh
FeedBurner

Donasi