Cara memasang tombol scroll ke atas / to top pada blog

Apakah tombol scroll ke atas / to top yang kalian maksud itu tampilannya adalah yang terlihat seperti pada gambar dibawah ini?
Jika jawabannya iya, baiklah kalau kalian ingin bisa memasangnya ke dalam blog kalian.
Inilah tutorial untuk cara memasang tombol scroll ke atas tersebut :
  1. Copy kode html untuk tombol scroll ke atas dibawah ini   <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://4.bp.blogspot.com/-s6QJCwiMNjY/Ubh9s3XiNCI/AAAAAAAAB3c/JMXN_Y5yhss/s1600/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>
  2. Kemudian pastekan ke tambahkan widget html / javascript blog kalian.
Lihat hasilnya, blog kalian pasti sudah ada tombol scroll to topnya jika halamannya sudah kalian baca sampai bawah.
Sampai tahap ini, proses pemasangan tombol scroll ke atas pada blog sudah selesai, mudahkan? selamat mencoba semoga kalian berhasil.

0 komentar:


CIMB Niaga, 7603 6767 7300, Arsis W | axxxxske-stsuxxxxxxxxx*#*$
OCBC NISP, 634130601924, C G Widi | suxxkamb
BRI, 6440-01-001908-53-8, St S | 94jy0CWep1

 
© Solo On Line ~ All Rights Reserved
Terima kasih atas kunjungannya
Cara Daftar FBS