How to add go to top and go to bottom 30+more buttons Using jQuery in Blogger alphause

Po ... How to add go to top and go to bottom buttons Using jQuery in Blogger 33 comments The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page are many articles or when an article has too many comments. These buttons have a fadeIn and fadeOut effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog. Demo You can see a live demo on my blog, the buttons are located on the right side. How to put Go Up and Go Down buttons usingthejQuery slide effect Step 1.Go to Template, click on the Edit HTML button Step 2.Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box Step 3.Copy and paste the following piece of code inside the search box in order to find it: ]]>Step 4.Just above ]]> paste this one: /* Up and Down Buttons with jQuery ----------------------------------------------- */ .button_up{ padding:7px;/* Distance between the border and the icon */ background-color:white; border:1px solid #CCC;/* Border Color */ position:fixed; background:whiteurl( http://4.bp.blogspot.com /-7zE5N9GdDUk/T6rH17KE6II /AAAAAAAACeQ/aEcKRyEhxsE /s16/arrow_up.png) no-repeat top left; background-position:50% 50%; width:20px;/* Button's width */ height:20px;/* Button's height */ bottom:280px;/* Distance from the bottom */ right:5px;/* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } .button_down{ padding:7px;/* Distance between the border and the icon */ background-color:white; border:1px solid #CCC;/* Border Color */ position:fixed; background:whiteurl( http://3.bp.blogspot.com /-sukwuViZaYY/T6rH15A8niI /AAAAAAAACeM/YErd0S8lPGA /s16/arrow_down.png) no-repeat top left; background-position:50% 50%; width:20px;/* Button's width */ height:20px;/* Button's height */ bottom:242px;/* Distance from the bottom */ right:5px;/* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }Note:- ingreenare some annotations that explains what styles you can modify on their left side. - You can change the arrows by changing the URLs inblue. - To change the buttons background color of buttons, change thewhitetext with your color Step 5.Now search (CTRL + F) for the following tag: Step 6.And just above it, paste the code below: Note:In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one. Step 7.Finally, Save your changes by clicking on theSave templatebutton. Enjoy! Like 4 Random Posts Awesome Slide Open Heart Bookmarking Gadget For Blogger09/03/2012 - 7 Comments Add a Popular Posts Gallery just above your Blogger posts08/04/2012 - 26 Comments Google Translate Widget with Flags For Blogger28/04/2012 - 22 Comments Related Posts: Add A CSS Animated Share Button on ... Orbit - jQuery Image Slider Plugin ... How to Add Numbered Page Navigation... Add a Custom jQuery Lightbox To Blo... How to Add CSS code To Blogger usin... 33 comments: vikram 3/07/2013 Thanks alot i was searching for this since long for my blog genuinecontent.blogspot. com. Also can i get just go to top widget,that i can place at the footer of my blog. Reply Replies Admin 3/07/2013 Hi vikram, To remove the Go to Bottom button, delete the 2nd bolded code from step 6. To change its position, modify the "bottom" value from step 4 (first code) to 0. I hope this will help! Muhammad Anas 3/13/2013 thanx Reply Pingal Singh 3/14/2013 It's not working in my site: www.gameguidist.com Please help Reply Vinod Reddy 3/16/2013 thanks Reply nandu sr 3/18/2013 i was searching for this since long for my blog http://askapk.blogsp ot.com Reply Smk Al-Furqan 3/18/2013 I wonder adding this will slowdown site loading? Our site is on http://www.smkalfur qan.com/ Reply S Gupta 3/27/2013 jhatu hai be bakwas Reply ayoub behate 3/29/2013 go UP button doesn't appear :::::::::: Reply Anonymous 4/09/2013 Thanks again; you rock! Reply GamingTracks 4/18/2013 See my blog: http://stealthenet.blogsp ot.in/ When I add this widget the big slider stops working! Why? Reply ain~sya~anas 4/20/2013 really help! thanks Reply Robert 5/04/2013 Wow, nice, thanks! Reply Diky Arga 5/06/2013 Thanks! Reply Melian 5/06/2013 thanks Reply Rob Howes 5/14/2013 Awesome Thanks!! Reply Nandika Sirinuwan 5/23/2013 Nice... Thanks Reply Anonymous 5/24/2013 Thanks!! worked really well. visit: www.amazinglysuper.blog spot.com Reply Ic Creem 6/06/2013 Nice post, very informative. A great trick to use on blogs. Thanks... Reply pishang ujeniya 7/02/2013 Not working in new blogger dashboard just make a new tutorail. http://techinforu.blog spot.in/ Reply Angel Siththaravi 8/24/2013 thanks Reply Maja Milovanović 9/01/2013 How do you change the arrow colour? :) Reply Maja Milovanović 9/02/2013 No worries, I figured it was in the instruction all along. Thank you btw. You can see how I made my buttons if you'd like on my blog. :) Reply Mc Dewey 9/29/2013 Thanks for this.. will this slowdown the page loading? Reply Francesco 10/08/2013 I'm sorry I can't see any "Expand Widget Templates" box :( Reply Piyush Jadav 10/23/2013 Thanks brother, very useful, i have done success in my blog, thanks very much Reply Sameer Raj 11/09/2013 very nice button bro...... Reply Shah Rishabh 1/11/2014 Works like a charm on my technology blog ' www.techntuts.com' :) Thnx a lot bro :) Reply Mostafijur Rahman 1/12/2014 nice Reply Hamza Riffat 1/14/2014 Thanks :) Good Yar Reply Informasi Kesehatan Terlengkap 1/18/2014 Waw... its cool... :) Reply Muh Yusuf Natsir 2/01/2014 Thanks. THis widget make easy to navigate.. Reply Nguyet Dinh 3/09/2014 How can I change the distance from the top. I mean, I want the arrow stop at 1/3 of post when it move up? Thanks Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,784 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments irsah imihar Customizing will always be easy with jquery and javascript. Even... Missy G Yay! Thank you for making this so easy! This is just what I... divakar sivashankar admin i have a problem even if i add the tag the ad is showing up... Anonymous I don't understand the instructions you have given :( Nanette Benablo your site is very helpful and easy to follow tutorials. thank you... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 4 Like