Friday, January 14, 2011

How to Add Floating Back to Top Icon Button in Blogger

0 comments


Today we’ll learn a very easy and important trick, Specially if you have got a lot of content on you blog pages, And if you want your blog to be easy to use for your visitors, A back to top link or button on your blogspot blog will make it easier and faster to your visitors when it comes to fast exploring and browsing.

Ad
Now we’ll see how to add


STEP #1 Log in to Blogger, go to Layout


page-elements

Add a Gadget of HTML/JavaScript type.


image
Then add this code in to it:.


<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" width="15" src="http://i35.tinypic.com/sfia38.jpg" height="25" /></a></div>


Now click Save Template






Image Back To Top Buttons With Different Styles

back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid7prMIHb41aYb4jGiSAr3HWqJn5qjh5xL4Mfwo4xc1Hr14Md1ckPK5lVqps6hZcTysc3uESIojbzNsIvZCvVy3TqgZlYNyR51laTMTqMcUqoeTo56_ffsredVWRzY10Gpwzdmxy0L53WF/s1600/bttp-5.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU64feKd0EqCOIHTXTDKPkYcVCVFmEbNhDlGxD9Zl4AjzgcwevUX3OFvloElsPtSBnNkboUOnl8D95-7GoV0GXHLmJA4UJTHJ76Qazt_L_-K3d9ae_7m1-AzSV0i0z3R0qydy1BANCUsgv/s1600/bttp-4.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipWjMCbQFU5HEMqLO8lRlewgoH7BgFOl8Ifle_80t1yVa5SeNdbAdTO-yKpwPfs5c0NmVWb2864LJZxvgUndW6ti3n_uqVcZJv0SyM6cla5F_4hE7cPTxLyrkT1VkgXsRzbTxLm7oflFFg/s1600/bttp-3.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXBTVJGaOW3bpNSSDn0GftIJ41RqaWlbzkW1RVC9clD_KykCirJ1-JgHzMiMb_1q6EsjlADYBGrNpQMul4lyB-1qkZjKCQIlAQFIpnyTvb_8R7R8Ax3mpDWNA-DlFoidq_WwIKcNmlhy7I/s1600/bttp-1.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL5fh7nWoQ6A5EB_DBTDEiJtTpvXlaUX3sBbTZhwXh_2zvfuqgkbM2GTPi7ACTpbo1l8sQz_6eev39IL8noY67Pj8RXpe_3ff71YPZTKAlBD0Aj824yYgIiB32Cy6fh4ZU-4zDuQ9OdAn8/s1600/bttp-2.png
back to top For Blogger
http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE95d2PLZZMb9i5MAsmy5ZyjjUz8H2dmZFFYKDEjamctRiWXluSoBe5uoUlgXBiqKhBfSgg69-Uv7qj6zfdJ285mtTX_uRnDrGs0MyFyjvd4xV1Npa6fFawHTGKGaaZDzMnlMciRgTbRuU/s400/bttp-10.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDD81pUV9jRlMCHOZdvYiNbz5_ArjUOqal1SghNcSfcauZJljNDV9njsC2Axsh7ATUJVf_NgCjQIucfC8I9-Qkwlm0vvMwd7K8oi3uq_qBOScHFuo4hLR66ou3vWnK_85geR7SvtUqSZAb/s400/bttp-9.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3SXGZE9zezPJmak2-qhid6LfH-H9V5xjw-IcDUTt7v0sR65v0AAUerhSUerbrEbvdvVtouPgZF1R_iSknG0zNltJltLnzWoW2DaiYotIDuL6ticzVCBut80f0YPbI9tu-d5GJ6Hqgeydh/s400/bttp-8.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhNFNSnl185Raqm6BJbgaSUIeG3faUrmCPtE5WxpyV-Z-sLuyPFiSE0RgmatKMrD9tVhYZMq1_leZAYvBAQ_5vVdzWz6G9DtAaATXZQXh5B0fnPQ-V8Ne5VvNhcbBv8bBEk5WGUcuAzjTj/
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirRF_Tp0zh5teW3krd-1ya3Oqc7tIp0S0CnCeAJLzHKV3-5OASmnNL21v0QqQI6zlAKRX8iRkNm-sQU-z3dJ6N8tPeDG-UKWesAu8HUkOwn_NGnjquxnTWwcsE8Rpn5yhH561laA0tVDIT/s400/bttp-11.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMtKMMHi4D_4m_hxjn8aHRYGC0r74XJoIL-p2THhxGLyE7jjrjDeE9txkoRjrnQ6QWMqWmHRaY-lU5WCVgM_1isnFobpXVsiVC7rxSd6M9Gn6ttFZ7HgF5X55QvlU-uwB0VUhYbn_SrFSn/s400/bttp-12.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhecWdsD91iGbLYKhGUIdJkfsKcl7XRmHbfQyNIxDaWVYYssK-d-_CLYdlAYkPGhLI2lSDvblwDz9GUnby8qaRK8VMQqOucx6jSTYmi_aDjNNLutuf0emjkeh-XUPmr3jEvr4_154yGPNA4/s400/bttp-13.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiupD6M8CGyIfhW9O0TdK9I36iwY_twXDeXyVVsHzQiXi52v1KnIYIxilkCoweyBTwEYXEvVJO-3JE6HpTKUy3JIEPrRsHc8EBZGtmMeYPvA6aGygyZT1ZiaBv603LUfuoPI_6PnhyphenhyphenisjF0/s400/bttp-14.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHL7hq5GwPw7st6F4At12vY3br0CJOi2i7nvLGmENfH1xNJIeE1QSDxzg4-B2u4MC9j9TJwMn67GyE_A0aTPiLmRM39v83X8izg6nTv-tt77R1N1tok_0x00rRcOoFd41NdXztuq_a9kPF/s400/bttp-15.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgICxmrOrmV4SX-Csasv780ylww7FsKJGuYCMl4MviAufAHQoyn-qaYAkIQaTAp8cF5Rx_6u259YXf4IXqxIYQgKDHEGLzB8LmNHBJ4YtvYT1-2lacNnhcsqZueIJeasOz3i6w2oIH__ezN/s1600/bttp-16.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqDLOaiczQ9OCaL_4ERjrJ5EJX0Jr-aJWpK-_L5kX4zDIFfnmw6iwnMetmexpQJiODm_Ovm7fVGAYWrEzUPUCImlJx1lqP_DQxUkqTq1iBBMymqYnnisVo2V66lNEuCpyCcT99geoffo_P/s400/bttp-17.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUslU-Tc9wcSTSykTaGRX8HsqDRoC9TZdKCGNuSA_R4pmGaZcTlIlAR5V1HWte4V6Xg_O_IFHHuXdPpeXy2eh7vwhyphenhyphenz4tMDgUqRY_diE1Kyi2ONdaR3gfvCJ7cB0whhjJEgnbOcRmnyYEn/s400/bttp-19.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkZDry_tNW1KUgtBvnImW-1CEbDcmw2Xa5qTNSMm0HXqfn0A6JoAiNClZVbExBeEcBBBzB9j71NWXEjLUCXdOhI6hT9fLOWBxMp7jZU-Mm3KZGcpFdRFJfngqdq1um7x4-u0Bt4cXKJj0J/s400/20.png

0 comments:

Post a Comment

Followers

Blogumulus by Roy Tanck and Amanda Fazani
Free Blogger Tips, Hacks, Widgets, Templates and more