How to Add Back To Top Button To Your Blogger Blog. +19 Different Styles And More.

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 ...

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
  • 1. Image Back To Top Buttons With 19 Different Styles
  • 2. Text Back To Top Link with different styles And Colors
1. Image Back To Top Buttons With 19 Different Styles
Step 1
Ok, now go to your blogger account and go to, Dashboard >> Layout >> Edit html >> and please find the following code.
]]></b:skin>
 And before it add this code
#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}
Step 2
Now find the following code.

</body> 
 and before it add the next code.

<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>  
 But before adding this code to your template please choose your favorite button of the following And change the words in red, Image-Url to the button url.


http://1.bp.blogspot.com/-WPVe1HpluX0/UDV-j__giII/AAAAAAAAAdc/HThAxOvpts0/s1600/noble+top+-5.png

 
http://2.bp.blogspot.com/-vnwuyghuMN8/UDV_c_0ctRI/AAAAAAAAAdk/1UsS1UKxTpY/s1600/noble+top+4.png
http://2.bp.blogspot.com/-zJlRGMtaRFs/UDV_26-GjHI/AAAAAAAAAds/JDv3RMGMFd8/s1600/noble+top+3.png

http://1.bp.blogspot.com/-ek_2VhJnWog/UDWBh-slj5I/AAAAAAAAAd0/xcaY7Kho4jw/s1600/noble+top+4.png
 
http://2.bp.blogspot.com/-_7HlIg06J2w/UDWB1GLGCFI/AAAAAAAAAd8/55B5y65-3zg/s1600/noble+top+6.png

http://3.bp.blogspot.com/-MDKPRfSH40U/UDWCG45QMxI/AAAAAAAAAeE/yulMUASxtDs/s1600/noble+top+7.png
http://1.bp.blogspot.com/-1HOwDD5jnlo/UDWCXmB_hpI/AAAAAAAAAeU/Rp2XxTbwxr4/s1600/noble+top+8.png


http://2.bp.blogspot.com/-P__6TqX_Axw/UDWCkk3_HuI/AAAAAAAAAec/vPcvSfvSBGs/s1600/noble+top+9.png

http://2.bp.blogspot.com/-sH2pL_cQKos/UDWCwZ1f0VI/AAAAAAAAAek/y4P1xgbQWNY/s1600/noble+top+10.png

http://3.bp.blogspot.com/-ynFFJxFg5TI/UDWC7qA-FAI/AAAAAAAAAes/1ANXIDXfkwc/s1600/noble+top+11.png

http://1.bp.blogspot.com/-Kc_7cAKmCj0/UDWDFTKMKLI/AAAAAAAAAe0/rz39VF4Yneg/s1600/noble+top+12.png

http://2.bp.blogspot.com/-j3IBsNvyOA0/UDWDXFjTlVI/AAAAAAAAAe8/6nZWXizZl74/s1600/noble+top+13.png


http://4.bp.blogspot.com/-gKrTjO6S2Rk/UDWDidGwNxI/AAAAAAAAAfE/yvq3z3TMa-w/s1600/noble+top+14.png

http://3.bp.blogspot.com/-L_S3Clc4luA/UDWE5HniGXI/AAAAAAAAAfM/fNcTktER7uE/s1600/noble+top+15.png

http://4.bp.blogspot.com/-OAPUAeL1SKs/UDWFNZKG4VI/AAAAAAAAAfU/k8HfcUvOH50/s1600/noble+top+16.png

http://4.bp.blogspot.com/-wyNV7tihs2Y/UDWFiu8Lu_I/AAAAAAAAAfc/tCdB2xglsis/s1600/noble+top+17.png

http://1.bp.blogspot.com/-mdpOA52x0bQ/UDWFwUkdb9I/AAAAAAAAAfk/VmX8fC0aRgY/s1600/noble+top+18.png

http://3.bp.blogspot.com/-01CYcy4Q8Fs/UDWF_10CuQI/AAAAAAAAAfs/_fp1Xb0V_Do/s1600/noble+top+20.png

http://3.bp.blogspot.com/-RsX49gnUNGo/UDWGNKoWYCI/AAAAAAAAAf0/Tq0_4FX9e5E/s1600/noble+top+19.png

http://4.bp.blogspot.com/-rJxTtUykK6s/UDWGd93Y1XI/AAAAAAAAAf8/wzMexWxiodc/s1600/noble+top+21.png
 After Replacing the Image-Url with your favorite button url, it should looks like this

<a href="#" id="backtotop"><img src="http://4.bp.blogspot.com/-rJxTtUykK6s/UDWGd93Y1XI/AAAAAAAAAf8/wzMexWxiodc/s1600/noble+top+21.png
" alt="back to top" /></a> 

paste it into your template code,
Step 3
Find the following code.
&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;
 and then click Save Template 
And you are done.




COMMENTS

BLOGGER
Name

Acronyms,1,Ads Ready,1,Adsense,1,Adserver,1,airtel,2,android,22,Apps,4,Auto Loader,19,backup,1,Bank,1,BB10,1,better,1,bios,1,blackberry,24,Blogger,11,blogger jquery,12,Blogger Template,3,blogger tips,12,Blogger Widget/Gadget,13,Bluetooth,1,BOIS Update,1,browser,2,Bug,1,business,3,CAD,1,capability,1,Career Development,2,Celebrate,1,chat,1,cloud computing,1,code,1,comment,2,computer,13,crack,17,crash,1,css,3,cure,1,CV,18,data,2,delete,1,Diamond Bank,2,download,32,email,6,ESPN,1,etisalat,2,Facebook,2,Feedburner,1,Firmware,3,Flash File,27,Flash Games,3,Flashing,3,For Seniors,2,free-up space,1,Freebies and Giveaways,2,FTP,1,Galaxy,2,games,5,glo,2,good,1,Google,8,Google Affiliate,1,Google Drive,1,Google Photos,1,Google Play Store,3,Google+.,1,great,1,GTA,4,guide,3,hacks,7,handle,1,Hard drive,2,HDD,1,how to,10,HTC,2,html,1,Huawei,1,ict,4,India,1,INEC,1,Infinity Best,1,Innovation,1,Intel,1,internet,6,internet explorer,1,iOS,2,ipad,4,iphone,7,Itel,1,java script,6,Jetpack,1,keyboard,8,know,3,Label,3,Laptop,1,Learning,12,LG,2,Lollipop,2,Mac,2,Management,1,Marriage,1,Mediafire,1,meeting,1,message,12,Microsoft,5,Microsoft excel,2,mobile,7,Mobile Phones Specifications,1,mobility,2,money,1,Motorola,1,Movie,1,Mozilla Firerfox,1,MS Word,1,MTK,2,mtn,4,music,1,need,1,Networking,1,NOBLE NOKIA INFO,9,Nokia,4,notebook,1,passwords,1,PayDirect,1,PayPal,1,PC,7,PC Games,45,PC mgazine,6,PC Tricks,3,pc-crash,1,PDF,1,Personal Productivity,4,Phone,3,photo shop,1,Play Station,9,Plugin,1,post,2,Premium Blogger Template,1,protect,3,ProtectTool,1,Racing Game,2,reasons,1,Responsive,1,Root,2,sagem,1,samsung,11,save,1,secrets,1,secure,4,security,9,security Enhancements,5,Server,1,shell-coding,1,shortcut,21,Simple Server,1,SmartsmsSolutions,2,SMS,6,social community,3,Sony,2,Spreadtrum,1,SSD,1,steps,1,Stock Rom,2,Symbian,1,Sync,2,Tablet PC,3,Talent,1,TECH_WORLD,2,Techniques,3,technology,3,technology tips,26,Tecno,7,template hacks,1,Theme,1,tips,19,transmissions,1,Tutorial,3,tutorials,28,types,1,USB Driver,1,users,1,Video,1,Virus,1,Visa Card,1,Volcano Box,8,Vote,1,WAP WORLD,8,Whatsapp,1,windows,11,Windows 10,2,Windows 7,1,Windows 8,1,windows mobile,1,Windows Phone,2,Windows Phone Store,2,windows xp,5,word of life,11,Wordpress,3,work place skills,7,WPTouch Mobile Plugin,1,Xbox,2,zain,1,Zenith Bank,1,
ltr
item
NOBLE ICT EXPLOITS ZONE™: How to Add Back To Top Button To Your Blogger Blog. +19 Different Styles And More.
How to Add Back To Top Button To Your Blogger Blog. +19 Different Styles And More.
http://1.bp.blogspot.com/-WPVe1HpluX0/UDV-j__giII/AAAAAAAAAdc/HThAxOvpts0/s1600/noble+top+-5.png
http://1.bp.blogspot.com/-WPVe1HpluX0/UDV-j__giII/AAAAAAAAAdc/HThAxOvpts0/s72-c/noble+top+-5.png
NOBLE ICT EXPLOITS ZONE™
https://naijaexploits.blogspot.com/2012/08/how-to-add-back-to-top-button-to-your.html
https://naijaexploits.blogspot.com/
https://naijaexploits.blogspot.com/
https://naijaexploits.blogspot.com/2012/08/how-to-add-back-to-top-button-to-your.html
true
4058378300189517969
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy