A back to top button is crucial for a blog or site because visitors enjoy easy site navigation so this button will provide them with this ease.It’s very use full for website visitors this feature save time of website visitors they reach to top by pressing this smooth scrolling back to top button.
The best thing about this button is that it appears only when the user scrolls down the page and disappears as he scrolls up.
This widget is really smooth and here i am providing it with some stylish buttons. In this tutorial i will show you how to add this widget to blogger.
Add Scroll to Top button to Blogspot :
- Log in to your Blogger Account.
- Then go to Dashboard → Layout → Add a gadget.
- Then select HTML/JavaScript from the list.
- Now Copy the below code and paste in the content box and then save it.
<!--New Blogger Widget back to top widget Start-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#nbw-top").fadeIn()}else{$("#nbw-top").fadeOut()}});$("#nbw-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a href="http://newbloggerwidget.blogspot.com"></a><a id='nbw-top' style='display: none; position: fixed; bottom: 1px; right:0%; cursor:pointer;font:12px arial;'><img src='IMAGE URL' width="50px" height="50px"/></a>
<!--New Blogger Widget back to top widget End-->
Customizations:
- Replace IMAGE URL with the URL of the button you have selected bellow.
- To change the size of the button edit pixel values shown in blue color.
- To change the position of the button replace the text "right" with "left".
Back to Top Buttons URL :
1.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfXBJntSFDPf8iTtPk_WjQUpQUK8XO-wa7WC4akpjK6J8c5b9FiZUEgNnzIGwcOAzqVKERq53RPhV6JrUNuEwlg-DXYueLRHhYHlZy8VFVoKkXAKXc4nnePI40qpoNnRI6Vaar0dprLbI/s1600/newbloggerwidget-back-to-top-1.png
2.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguR2kEy2qy-1feVHhsN-6Waff7_S4iexBDa5g6tF105z6YPI9R3ZuFpIlQXXnWpQegjjI2sID9J63lGprH7NJWsQYpsVCbMLJuR2hRWji3EueWpuoH5ww2mrNQGTHFjjGnYg0T3gTygjI/s1600/newbloggerwidget-back-to-top2.png
3.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkWz1yoqkJw62aSRSZawn0DZRjGMD-BXOk2UmIdH9I-v5gMeIwZcvmc1GAg3Apc4HCW8aD4BXprtrI-HYeRsj43X6BfDqDqDBFN8hD8Z5e1P5tAif9Z25H1KVwqSZnWwcMSmTlKOuWSHY/s1600/newbloggerwidget-back-to-top3.png
4.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3sFvLsr347Bs-Cf1d3h_IF7TFfN7wviU_fcMzhwFWNYVtpDbP0LPxQep5xZMYWk1J1wJjiyeT6tc7hH99APaGTX0aNSJ1_suXMYyFBe911bZ4ir-7-pvocWUTi3OHB8iGrwf2OUVoAio/s1600/newbloggerwidget-back-to-top4.gif
http://oliagain.com/%D8%B4%D8%B1%D9%83%D8%A9-%D8%AA%D9%86%D8%B8%D9%8A%D9%81-%D8%A8%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6/
ReplyDeletehttp://oliagain.com/%D8%B4%D8%B1%D9%83%D8%A9-%D8%B9%D8%B2%D9%84-%D8%AE%D8%B2%D8%A7%D9%86%D8%A7%D8%AA-%D8%A8%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6/
http://oliagain.com/%D8%B1%D8%B4-%D9%85%D8%A8%D9%8A%D8%AF%D8%A7%D8%AA-%D8%A8%D8%A7%D9%84%D8%AE%D8%B1%D8%AC/
http://oliagain.com/%D8%B4%D8%B1%D9%83%D8%A9-%D8%AA%D9%86%D8%B8%D9%8A%D9%81-%D8%A8%D8%A7%D9%84%D8%AE%D8%B1%D8%AC/
http://oliagain.com/%D8%B4%D8%B1%D9%83%D8%A9-%D8%AA%D9%86%D8%B8%D9%8A%D9%81-%D8%AE%D8%B2%D8%A7%D9%86%D8%A7%D8%AA-%D8%A8%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6/
http://oliagain.com/%D8%AA%D9%86%D8%B8%D9%8A%D9%81-%D9%88%D8%A7%D8%AC%D9%87%D8%A7%D8%AA-%D8%A8%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6/
http://oliagain.com/%D8%AA%D9%86%D8%B8%D9%8A%D9%81-%D9%88%D8%A7%D8%AC%D9%87%D8%A7%D8%AA-%D8%AD%D8%AC%D8%B1-%D8%A8%D8%A7%D9%84%D8%AE%D8%B1%D8%AC/
http://oliagain.com/%D8%AA%D9%86%D8%B8%D9%8A%D9%81-%D9%85%D9%88%D9%83%D9%8A%D8%AA-%D8%A8%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6/
http://oliagain.com/%D8%AA%D9%86%D8%B8%D9%8A%D9%81-%D9%85%D8%B3%D8%A7%D8%A8%D8%AD-%D8%A8%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6/
http://oliagain.com/%D8%B4%D8%B1%D9%83%D8%A9-%D8%AA%D9%86%D8%B8%D9%8A%D9%81-%D9%81%D9%84%D9%84-%D8%A8%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6/
http://oliagain.com/%D8%B4%D8%B1%D9%83%D8%A9-%D8%AA%D9%86%D8%B8%D9%8A%D9%81-%D9%85%D9%86%D8%A7%D8%B2%D9%84-%D8%A8%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6/
http://oliagain.com/%D8%AA%D9%86%D8%B8%D9%8A%D9%81-%D9%81%D9%84%D9%84-%D8%A8%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6/
http://oliagain.com/%D8%B4%D8%B1%D9%83%D8%A9/%D8%AA%D8%B3%D9%84%D9%8A%D9%83-%D9%85%D8%AC%D8%A7%D8%B1%D9%8A-%D8%A8%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6/
Very Nice and Informative Post. Thank admin for sharing such an amazing post.
ReplyDelete--->>Back To Top Button for Blogger (Exclusive!)
Thank you so much! This is the kind of resource I need, that speaks to the less savvy designer. I searched for 20+ minutes to find this info spelled out in terms I can understand. If you're in the mood, check out my video ezine Art Online at artonlineezine.blogspot.com. Presently featuring William Wegman and his Weimaraners (always have to look up spelling), along with Halloween and other crafts..
ReplyDeletethank you, this is what i have been looking for
ReplyDelete
ReplyDeleteLatest Goverment job 2016-17
government Jobs Updates,Employment news,Railway Jobs, Bank Jobs,graduation Jobs,10th pass Jobs 12th pass Jobs,state wise job Updates,Admit Card, application form,Recruitment
https://job4t.blogspot.in/
Thanks for sharing Add Smooth Scroll Effects to Blog
ReplyDeletelooking helpfully for us
ReplyDeleteNice post its helpfull for us thank you so much
ReplyDeletegood content sir
ReplyDeletegoodcontent
ReplyDeleteHi great readiing your blog
ReplyDelete