Add Back To Top Button To Blogger
Step 1. In your dashboard click Design'> Add A Gadget > Choose Html/Javascript from the pop up menu.
Step 2. Copy The Code Below And Paste It Into The Html/Javascript gadget.
<a href='http://thenetfabz.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIAQcq0TjeGeIYX506m9GQfB8no4Lm6QigHDQnG61ssbWVaTJSy1ONkx0XD7eAYPFDYy_n7CF9sB6i0vM_kkNlmYiVecLmj4QYbLnIJDGeU1GXYf2tYQ3HjY8V8YCuW6BsDZBOl4sMO8cl/s1600/best+blogger+tips.png'/></a><script type="text/JavaScript">
var topMargin = 300
var slideTime = 1200
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
window.setInterval("main()", 10)
function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
}
}
function main() {
if (ns4) {
this.currentY = document.floatLayer.top;
this.scrollTop = window.pageYOffset;
mainTrigger();
} else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
}
}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY
floatStart();
}
animator();
}
}
function floatStart() {
var now = new Date()
this.A = this.targetY - this.currentY
this.B = Math.PI / ( 2 * this.slideTime )
this.C = now.getTime()
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt
this.A = this.A > 0 ? this.findHt : -this.findHt
} else {
this.D = this.currentY
}
}
function animator() {
var now = new Date()
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D
newY = Math.round(newY)
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )floatLayer.style.pixelTop = newY
if ( ns4 )document.floatLayer.top = newY
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px"
}
}
//-->
</script>
<div id="floatLayer" style="position: absolute; height:20px; width:15; left:650px; top:400px; z-index: 100"><a href="#"><img vspace="0" border="0" hspace="0" alt="Back to Top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ac9b_heUrS5Aq5ZMyeTGec6hrtlXbOeLNmqgYohmPPP17g2dcIx7sTCkVWww56KhmJ0X9Er1jVTMoyRePhh__NOXuaCIJD1Tu6f3oaHXjRlBAzRZShd3OPEf8JBW0Hn_1blf3erinC8x/s1600/TOP+BUTTON.gif" title="Back To Top Of Page" /></a></div><a href="http://spiceupyourblog.com" target="_blank"><small>Blogger Top Gadget</small></a>
Important
If the button stops in the middle of your page and not at the bottom increase the number in red at the start of the code, for example in the demo i had to set that number to 500.
left:650px; = How far from the left the button appears you can increase and decrease it to suit your blog.
top:400px; = How far from the top it appears.
You can change the image used for the button by changing the image URL in blue to any image you wish to use.
Step 3. Save your template - You can drag and drop the gadget to the bottom of your design page as position wont effect the gadget.
)
A Floating back to top button.Since then i have wanted to cover a more up to date back to top modern button.The popular option when it comes to scroll top buttons is to use jQuery for two reasons.Firstly with jQuery you can have the button hidden until the page is scrolled, secondly when clicked the page scrolls smoothly to the top instead of the direct jump a regular link would have.So that's exactly what i have in this tutorial.We will add a button that will only be visible when the reader starts scrolling and then when they click it the page slowly scrolls up easing into position at the top.For the button itself we us a sprite to create a hover effect sprites also keep the page load time down.
In this blog tip we will look at a quiet simple way to add captions or descriptions to the images used on your blog.On Blogger there is an option when you click on an image uploaded to the post editor to add a caption.This adds the caption below the picture using a table.However with just a few lines of Css we can have the caption across the bottom on top of the image with an neat opacity background.You can also change the colors of the caption to suit your blogs design, You can see some examples in the demo below.
