Posted by : Unknown Tuesday 28 May 2013

Assalamualaikum.wr.wb. in this time i will share about How To Add Back To Top.when your article too long and visitor want to back to top they can use this widget. you can "fly" to the top of your blog,you dont need to scroll over again.

how to install :
1. go to blogger.com
2. Select blogs that want to install the widget
3. Select the layout
4. Add gadgets
5. html/javascript
6. copy the code below

<script type="text/javascript" src=""></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="IMAGE URL" />', //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: '', //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 =jQuery(window)
 var controlx=$window.scrollLeft() + .width() - this.$control.width() - this.controlattrs.offsetx
 var controly=$window.scrollTop() + .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>
How To Add Back To Top
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaiuOAhsisKinCq7b1RV7BzA6w_DuVf2SXPmyPvkcrAkiqSWYqqzcVlD7xiIoMiRGfpfBHWK4oThLRvIHvK7JL6T3_5aZCXOnOWNuE0OSMFwVF0iC1joOmxn0O894e4WRyD4Va6T5ALgI/s1600/back+to+top+tangan.jpg
How To Add Back To Top

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ4TNWttyPJM6yTv6OdmH8Yi8Y97YHLcljARUNdWf3yEhHQfQyrJMFCrVWEH1sQsUpJN4iayk0M6sJaD-v1w3AOvUG1ZYbz5IL2nXW6AzdtwcxwR6B2WpU5H0_fN1hIjMTa82mw_pNymc/s1600/back+to+top+biru.jpg
How To Add Back To Top
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Z4RMe2FP-jnwprLdlLa6Np2Xyqv-xgtFTNclZojzIhO5HU00iTPnx0AxJwI9UFNQ1k2rx7eoke-zyWYVAryidMnm87pOD2cuJYbh5r7tKImM1qso9X2xhVNkXtUqYXSyTWpKO9OWG68/s1600/back+to+top+panah.jpg
How To Add Back To Top

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkHKvvvr1I-Pdr9LgsqQV0DlHcJzBMLJa-gW-_-2v0rThAfosCjoJ20oAujUhznoGmB1LrKfZojaGf6opcIGIT8x9WNNogEieaIHzsQYp59SmaG082S_zUtUb5ZnI-3v9sfGZpAWqQacE/s1600/back+to+top+hijau.jpg

7.replace IMAGE URL with url above
8.save

{ 12 comments... read them below or Comment }

- Copyright © backlink4us - Hatsune Miku - Powered by Blogger - Designed by Johanes Djogan -