--> Create a Floating Feedback and Back-To-Top Button For Your Blogs | Experience Lab - Online business creation and development guide for bloggers and startups

Create a Floating Feedback and Back-To-Top Button For Your Blogs

Asking your visitors to leave you suggestions or feedbacks can be pretty easy only if you provide them with an easy access to your feedback...

feedback and back to top button Asking your visitors to leave you suggestions or feedbacks can be pretty easy only if you provide them with an easy access to your feedback page. Readers are often lazy and getting them to leave a feedback is often tough. However you can let them comment willingly if you add a floating feedback button to your blog, that floats as a reader scrolls down or up. This floating button can be made more user friendly and eye-catching if you add a roll over effect to it. Hover your mouse over my feedback button at the bottom-left corner of this page and observe how the button magnifies when you hover your cursor over it. Liked it? Lets now learn the TNT of adding a Feedback Button to your blogs, along with a Floating Back-To-Top Button, which I will discuss later.

For a feedback button you will need two images, one small (30 by 145 pixels) and one large (35 by 170 pixels) You can also use my feedback button if you wish,

Small Image : small-feedback-button                               Large Image :  large-feedback-button

You will then need to upload these images to an image hosting web service like Photobucket or other services like Google sites and sigmirror

Get URLs for both these images and then follow the steps below

 

  • Sign in your blogger account
  • Go To Layout > Page Elements

Layout

  • Click on add a Gadget

add-a-gadget

 

  • Click on HTML/JavaScript

html-javascript

 

  • Now Copy paste the code below into the HTML/JavaScript widget,

<!--TNT-by-STC-FEEDBACK-IMAGE-STARTS-->

<a style="display:scroll;position:fixed;bottom:5px;left:0px;" href="URL Of Feedback Page" title="Your Feedback is always welcomed!"><img onmouseover="this.src='URL of your Larger Feedback button'" src="URL Of Your Smaller Feedback button" onmouseout="this.src='URL Of Your Smaller Feedback button'"/></a>

<!--TNT-by-STC-FEEDBACK-IMAGE-STOPS-->

 

Note:- Remember to replace the Colored text with the required detailed specified. You can change the text “ Your Feedback is always welcomed! “ with any message you like. You must have a Contact page, where users could fill up an Email form to send you their Suggestions.

  • Finally save your widget and view your blog with a floating Feedback button at the bottom-left corner of your homepage.

Add a Floating Back–To-Top button to your blog

If your blog’s homepage is really long or if you write lengthy posts then you must add a Back-To-Top button to your blog, by clicking which, users blog will be taken straight to the top (Header) of your blog. You can see my floating back-to-top button at the bottom-right corner of this page.

To add this button to your blog you will again need two identical images, one small and one large. May be you would like some of these buttons,

 back to top -large back-to-top-small-1                  hodge_podge-hodge_podge_icons-hodge_podge-left_arrow.ico-48x48  hodge_podge-hodge_podge_icons-hodge_podge-left_arrow.ico-32x32                 Up1Blue Up1Blue

Now lets learn on how to plant the TNT of adding a floating back-to-top button to your blog.

Follow the same steps as you did for adding the floating Feedback Button. Just paste the code below In your HTML/JavaScript widget,

<!--BACK-TO-TOP-STARTS-->

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='URL Of Your Larger Button Image'" src="URL Of Your Smaller Button Image" onmouseout="this.src='URL Of Your Smaller Button Image'"/></a>

<!--BACK-TO-TOP-STOPS-->

Note:- Remember to replace the required detail with specific URLs of your Back-to-top buttons

Just save your widget and view your blog with a floating Back-To-Top button at the bottom-right corner of your homepage.

That’s All!

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Create a Floating Feedback and Back-To-Top Button For Your Blogs
Create a Floating Feedback and Back-To-Top Button For Your Blogs
https://lh6.ggpht.com/_7wsQzULWIwo/SgXX_TJfMzI/AAAAAAAABCw/byPN_z4wL6k/BACK-TO-TOP-AND-FEEDBACK-BU%5B5%5D.jpg?imgmax=800
https://lh6.ggpht.com/_7wsQzULWIwo/SgXX_TJfMzI/AAAAAAAABCw/byPN_z4wL6k/s72-c/BACK-TO-TOP-AND-FEEDBACK-BU%5B5%5D.jpg?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2009/05/create-floating-feedback-and-back-to.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2009/05/create-floating-feedback-and-back-to.html
true
2959477579779989044
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 PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared 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