cara membuat tombol naik di blog

  Belajarngeblog-cara membuat tombol naik di blog,sedikit aku akan memberi info cara membuat icon tombol naik di blog.bagi para blogger yang baru belajar tentang ngeblog pasti akan kena kendalah kalau belajar dengan otodidak tapi,hehee tapi semua para blogger kebanyakan belajar dengan otodidak seperti saya.jadi jangan putus asa kalau mengalami kesulitan bisa shering di sosialmedia karena sangat efektif belajar otodidak akan bisa mengatasi kesulitan.silakan bisa mencobanya
1.buka template => edit html => cari tulisan </head> atau tekan CTR + F lalu letakan scrip di atasnya

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

2.*buka layout
   *add a wedget
   *masukan scrip di bawah ini
   *save


<script type="text/javascript" >

var scrolltotop={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img width="64px" hight="64px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh69Lny1y2U_6oXKRtjCBD7l3SNaC9RCRffPrBSYm9R_prW2btPywO3p5SE2gC2sOJ0JyeAnpyuvhyY0DsCwSaAAw3Q7oHtV9sqrI25PLd1CWlaw5daAMnd3lIX88o4nd4Zx66a-cVqZvSA/s1600/back+to+top.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
            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()!='')
                mainobj.$control.css({width:mainobj.$control.width()})
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>


3.lihat hasilnya

Comments

Popular posts from this blog

cara pasang paossword di halaman utama blog

cara mudah bikin parse html di blog

anti klik kanan di blog