.....

9 How to Add Floating Back to Top Icon Button in Blogger




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/AVvXsEhRJ6_qh2Kyib_x3JmEV_7_VOWDz6iN1LeHO3-XmmwJKuq8C9mjvXw8JrPQSzhu4pt3jjUhB8opn-vWn_fq0E1RVDSY48hmLmZZC4SCJRdpUkW6bDiTIv7nA0iNaqFI-mVa9v4BpZrXyLmj/s1600/bttp-5.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzX4seBh3epmAVPyJGbzlCzw3Mf_97k87uMiViw5JXCDFbXPufSgYZpnkxL7PJFEI2iF1396gZI6Jgp6YOU4SoaYUKVcAjJLxzHIl8jM5O-5RnrWcCLVBTQPjERSXHD6jvC_qoeSoZq6z8/s1600/bttp-4.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH92UNANQ7IqV37oGdP4HsBa55TwFHeASPF5-lo4xfRiSlHroWOCsZKrS81jhY0xuRsWmX2X833C02Tp5ZZ2vwgIZAZaKU1sH6WRxhUHq966xSYO-l1YCrU08GULyR0ObuhdHmNV18lWF5/s1600/bttp-3.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFZxJxUOk6d7SuYfG_1HKjh6GpcIU0A8gyaVCdvncmVfUg_0tlMacqDF0KuuuD83JujkyIlxV03jbeHYkH1hlv_QiM4SQJ6sXpoxzfHLPmhAfo-upIn4Y5NCV5M51Qc0jfDwLB_CTW0_BF/s1600/bttp-1.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg38KyTLEl3yLdzOLkjjAktPNw-HhFDLAmY4AT5cNTwW6DRVWU2b5AqahRt2JCDb2BpzV6HtHR-fbxnEQQu5LvaGFalXL8V5W21D_MtzS52qaAirHo6owtdXuhQyF2w4YqdjNv6hft8JXim/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/AVvXsEghmylub-wYR5T9iAsDjBq_lxjH8WhR2PdUNNN9TzvWQmUVhXcYLeNfHBLyzuDPIEd7CtpXdDItMYY783LkCNC1CoFuTeRCSyBfbVUlxzjzCgoXBXebqyDxNHiMFnylvncNvIHjQWoVa5w4/s400/bttp-10.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfr-VRzG10moGPaRKkBCy0wLy_lOFhuWvay3nvCx3hhlCZg07ae30UqsVb-OOMm8rSSDpmOhfBrhNqi3Z28oa0TxS0DswmzH9CmwxaSuFatBwnzsdgt5wpsJjvw4sEzjeaqXjUiFglHoEp/s400/bttp-9.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV4L9BcMAlFXfmEC8WwYmcDt-nzGkDjevcyrcIV8kDDacF2_EXixsjHz8CwmflYFWzRc6xkxRE947c3hBun9igrZ9S8sGMNqaW4daNWC9vd3hxu86wQpvtqUI0cV_Z0r1bDLE2Wn5wYwRq/s400/bttp-8.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj09vTRhMugoMNGgOvhjOWIFeNeXmBvptvZMq66fLrjoKSEBpkkbrZEdadjLJRnrpTuUfc9IWTRoXYi4_8k5xfQg8B0315rR9EEQgIOgiEe6oRAAi3C5ECn21yHHp-AiCH_ePixkb5Y3weB/
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcL5xJEMgAg_-Pba_N7ivSjZsvTkgVVbHYg3haT2CPs-QgmLHbTcauHWMwl7zctt_n_05Eeue-u58vSPeE0vOryv88SB8VzUATej3SOVYPeKrxo7uf0PZrkwccjynXsaJE42aK6lT6gifz/s400/bttp-11.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0vcF2eGSTQHyiNH9L6jS0ZdEh9ICtQCAqgAFXCt8N_Xso-jNR8ZA4fiHP0eeEvskYVt6y70EkVm6Q1pIFoTUkAOG_u2SHzPCxSk2gxBstl1ik37fj21ftOW_pOnxCeHK6zjlw0D1GwGgJ/s400/bttp-12.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXHt0yIh3-qQf59lYwjdCXe6g6lpV8TtrZSeHil8Y8BylWQ58nMqPnJTZihLQgznkjcYJlBhg_zY0xWrXVZU-XOzPSITzwzG9tee5HRg74dxH6zLMDi8m-3hG07SDx5BDvazoUZjA3a6-_/s400/bttp-13.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSJQqXc4jdRCLr9r9juE3mcsvPWrBTqMx8_cmL9DzJIk06xbq6ITd_CKwmn8eeU50ROVB-QrtQlswoGvi8m6tfo115-XjU31cyTWE-cp9Zxgwj61zyCUfFPHj1GqRzHtx1CAlce6MTXtxI/s400/bttp-14.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoRckRVCO-05AZzSrRtnRX3UR-r8lubLfr12kBd5FnG8OFIzwqNNnzPndfUD8WNrj7fJcMSAo-yhNwbkwGN1rmzAcRskkb2tn_7ATh7EZenuQWV4lU-QlcC3rAMyWopB0-OuiVN5TOq_j3/s400/bttp-15.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh3L3eosfSq4gUp1HYCPXO36gkuqBYRSuKWLIlUI8Vf404O9PXACbU2IPwY-iV12ggf4wBOO-M2DIrnImO87pkLjzIIGA_RNSfpaLEDazDOHb2iIjkRoZ9Bo1rjhszojUWy4pvnyu2A7St/s1600/bttp-16.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbPufN2IYePRfuwgKWQ3FhvcOe25dwr7DYENFOqTm8Xat_FIdVMxr_ZvgSQr0iEwxWq19qoYP5dwXESNJjfYHpM__MXVdxmfTUlRgSqZOd-5rv4fU8c0Hnh8xrDlmC0615XHiHeqz9pEax/s400/bttp-17.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVmBupwvMQyrC0L62WXoTSTUcgOF_yEpv2Y7tlSrw0j5b0FumqaMjvSqf6Q2cbBb2LLgrhmY3IXoBrJyoVx5UeeSB9BrQVmU8jO9gNdO-2o113J5oMYBafCoE7nLvzLnPWdyTiSSnzms4J/s400/bttp-19.png
back to top For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQI8ESHTQMqFq5h71fp3vjkS-pUXtuYIBF5lYJWMdilEidqCFmm-w5Ean7RXzAlz-xwf9oFSMk4L_TnMk5Ss7H5MHeSdl6UplhBOgj5Q9hpML1tiLRghxfHv5_yLFlmz-A_rDrWmcUr2iK/s400/20.png

Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>
Free Backlinks blogger widgets



Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.
submit here

9 Responses So Far:

myGewang said...

great...love it.

thanks

RIO IT said...

nice

Ranjith said...

Nice and useful tips
www.ranjithpoems.blogspot.com

Promote Bangla said...

Thanks that was really helpful.

Pohela Boishakh | পহেলা বৈশাখ said...

Nice, but can we have some smaller icons ? lil more dynamic would be gr8.

Unavailable said...

Here is the result alwaysdejavu.blogspot.com/

ps:
be my follower

Abdur Rakib said...

Thanks for sharing.Nice post.

Visit here for some blogging help

Unknown said...

check this out http://www.imtalk.org/

3000+ backlinks free and fast

ADMIN:http://www.nixonok.com/

GuidePedia said...

@myGewangThisAdd Back To Top Widget looks great

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger