So, in the process, I have found the back / scroll to top script that is much more suitable, made in dynamicdrive, and I can easily modify it so it is suitable for Blogger. This script will be hosted itself on Blogger server (inserted through widget / gadget editor), so modifications can be done at any time without having to upload and host javascript file to other server.
What's Different?
There have been many blog tutorials that share scroll scripts / back to top (back to top), different on back to top scripts in this tutorial are:
1. Streamlining the script so as not to aggravate loading blog
2. Reduction, downsizing, and modification of the script section to match Blogger.
3. Fading effect and smooth effect at once (with the help of jquery)
4. Guide full modifications on the script to display a personal effect, to fit the blog design and desire.
5. Installation via widget / gadget (layout editor).
How to Create and Put Back To Top Button with Fading Effect & Smooth Blogger
This script has two parts, the first is the back to top function script itself, and the second jquery script to help smooth and fading effects (in and out).
Jquery is a script that is very commonly used, so if your blog is already using jquery, no need to add it. Check whether your blog is already using jquery or not, go to Edit HTML then search (CTRL + F) with jquery keyword, its location is inside the head element (between <head> and </ head>). If it already exists, there is no need to add jquery script.
<!--Back to top script by dynamicdrive.com and webmasterseo3.blogspot.com--><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" ><!-- delete the script above if the template is already using jquery -->/************************************************ Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)* Advanced modification by buka-rahasia.blogspot.com* This notice MUST stay intact for legal use* Visit Project Page at http://www.dynamicdrive.com for full source code***********************************************/var scrolltotop={setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},controlHTML: '<img src="URL Image 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().topelsedest=0this.$body.animate({scrollTop: dest}, this.setting.scrollduration);},keepfixed:function(){var $window=jQuery(window)var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetxvar controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsetythis.$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 : falseif (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=scrolltotopvar iebrws=document.allmainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards modemainobj.$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()!='') //special version of IE6 down for loose check, also to see if the control contains textmainobj.$control.css({width:mainobj.$control.width()}) //IE6- needs to be set in clear width so that text containers are neatly formedmainobj.togglecontrol()$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){mainobj.scrollup()return false})$(window).bind('scroll resize', function(e){mainobj.togglecontrol()})})}}scrolltotop.init()</script><!--Back to top script by dynamicdrive.com and webmasterseo3.blogspot.com end-->
Installation Steps:
1. Copy the script code above
2. If you have checked jquery and it already exists (note: at least jquery version that can be used is 1.3.0), delete jquery script at the top, namely:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>3. The most important modification is the URL image back to top , enter your image URL replacing the Back To Top Image URL text. Advanced modifications (if required) will be submitted at the end of the article. For back to top images you can search by Googling yourself, or use some of the following examples:
.png){kind=icon}
.png){kind=icon}
4. Go to dashboard> Layout> Add / add gadgets.
5. Choose the type of HTML / Javascript gadget.
6. Enter the entire code into the editor box and save.
7. In order not to interfere with other widgets, and loaded lately, make sure the widget is positioned at the bottom. Drag the widget either to the footer widget (if present) or in the bottom sidebar.
8. Save again and check if the back to top widget is installed properly.
Advanced modification on the Scroll / Back to Top Button
To modify the effect on the back to top button, note the following points:
- startline: Integer the pixel value to the bottom where the back to top button will be raised. Increasing the value means the button will be displayed further down after the user scroll down. The default value above is 100
- scrollto: Integer, the purpose of scroll after the button is clicked. A value of 0 (in pixels) like the default above means the scroll will return to the topmost (zero) portion. Increasing the value means it will lower the scroll destination point.
- scrollduration: speed / duration of scroll (in miliseconds), the higher the value, the slower. The default is 1000 (1 second).
- fadeduration: fading speed / duration (in miliseconds), the first value is the value of fade in, the second is the fade out value. The default values above are 500 and 200.
- offsetx: the position value x the back to top (in pixels), the more it gets deeper. Default 5.
- offsety: the position value y back to top (in pixels), the more plus the more jutting up. Default 5.
*Important note:
- Do not try to add the script into the template via the HTML editor, because there will be parsing errors, parsing widgets and different Blogger parsing templates.
- Never remove the attribution on the script, respect creators.
Okay that's it. Hopefully the above tutorial not only provides benefits in terms of installing the back to top button, but also gives a little picture about the use of javascript.
Have a nice blogging, as always.
Write markup in comments
- To write letters bold using
<strong></strong>or<b></b>. - To write letters italic using
<em></em>or<i></i>. - To write letters underline using
<u></u>. - To write letters strikethrought using
<strike></strike>. - To write HTML code use
<code></code>or<pre></pre>or<pre><code></code></pre>, and please parse code in the parser box below.
Choose the Comment System