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

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!

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

32 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Wow, how did you know I was looking for a way for people to give me feed back. I also am trying to find a way to put something on my blog so people can subscribe to it. You have looked at my blog, that crazy b2evolution thing. Do you have some kind of code I can put on there to get people to follow me??? I do know how to put codes on there now. LOL

    ReplyDelete
  2. Well Marg, there are many ways people can follow you. the most successful ways are,
    1. Adding a Feedburner Link to your blog, just as I did for my blog (Those orange RSS icons)

    2. Add Social bookmarking icons to each of your post. For that you will need to add a code to your Template.
    I will write a post on it soon till then enjoy this one :D
    Take care

    ReplyDelete
  3. hi Arham,
    I am extremely sorry for the wrong code. When I inspected the code I found that it was broken. I have updated the code and now its perfectly fixed and working just fine.
    Few things to note,
    1. Replace the text with the required image URLS (Plz upload the image to your own image hosting service or account, don't steal mine from source :) )
    2. Remmeber to add the URL Of Your Smaller Feedback button twice not just once. The code that you provided me above shows that you haven't replace the text URL Of Your Smaller Feedback button with the required URL

    I hope this will help. Feel free to ask if you troubleshooted yourself

    ReplyDelete
  4. Hi,
    How would I make the floating button float in the middle rather than the bottom? I tried using position:middle and position:center with no success. Any help would be appreciated. :)

    ReplyDelete
  5. @Nidhal
    Simply change bottom:5px; to bottom:210px;

    You can change the value 210px to shift the Icon up or down

    ReplyDelete
  6. mine doesnt change to bigger one, tried several times

    ReplyDelete
  7. @last soul

    I am sorry for the inconvenience. Sometimes HTML Editors really make mess of the code. There was only a mistake in the orientation of a single quote i.e ''

    I have corrected the code. It will work just fine now :>

    ReplyDelete
  8. thanks brother it works perfectly now..

    ReplyDelete
  9. Can you mention how to make the borders that you use?

    The feedback and to the top buttons overlap to the blog posts themselves. If not the borders I guess you would change the size of the widgets, posts, etc areas so that the feedback and to the top tabs don't overlap to cover information already on the blog.

    I hope that makes sense. You can see a visual on my test blog: www.nopey-h.blogspot.com

    Thank you again.

    ReplyDelete
  10. @hannah

    Sorry for late reply dear. Well you can surely reduce the side padding of the over all layout by adjusting the wrap {} width property and by replacing it with this

    #wrap {
    background: #fff;
    width: 960px;
    margin: 0px auto 10px;
    padding: 0;
    position: relative;

    }
    but then a mess up will occur and further alignment settings will be needed which will be difficult for your to implement unless you are well aware of CSS padding and margin property.

    A short way would be that create a small feedback button of 12 pixels in width. That will look better and will not overlap the content.


    I hope that was clear.

    ReplyDelete
  11. @Hannah

    Since I have never left a reader without a solution so I was forced to find an easy way for you. Do the following

    Search for,
    #outer-wrapper {
    width: 980px;
    margin: 0px auto 0;
    padding: 10px;
    line-height: 18px;
    }
    #main-wrapper {
    float: left;
    width: 600px;
    margin: 0;
    padding: 0;
    }

    And replace this code with this,

    #outer-wrapper {
    width: 950px;
    margin: 0px auto 0;
    padding: 10px 20px 10px 20px;
    line-height: 18px;
    }
    #main-wrapper {
    float: left;
    width: 550px;
    margin: 0;
    padding: 0;
    }



    I hope things will look far better now :D

    ReplyDelete
  12. Hi! Thank you very much for this informative article - worked like a charm.

    Now!

    I played around with this in order to have the same thing happen for a changing image on mouseover in my post.

    I changed the image style to:

    1. img style="display: block; float: none; margin-left: auto; margin-right: auto"

    2. Removed the link to the contact page.

    It worked like a charm as well on IE8, Firefox, Opera, Google Chrome and Safari.

    Do you see any problem with doing this?

    Take Care,
    Peter

    ReplyDelete
  13. @peter
    Bro Glad it worked for you!
    The code is well compatible and correct. Good to see you are learning fast. Keep it up! :>

    ReplyDelete
  14. Hi,

    Great and simple - many thanks.

    However, "display:scroll" is not valid CSS. What is it used for, as the "position:fixed" seems to be enough?

    Thanks!

    ReplyDelete
  15. hi... i'm using the classic template and perhaps it's the reason why the code isn't working on my blog. jpenuliar.blogspot.com can you teach me how to put this code using the classic template? thanks.

    ReplyDelete
  16. Assalamu Alaikum Wa Rahmatullahi Wa Barakatuh,
    dear brother ,
    I have added "Back to top Button" in my Blog.
    its simple,
    anyway Very Thanks to your guides.
    Keep it up.
    Allah Bless you.

    ReplyDelete
  17. This doesn't seem to be working.
    Here is a link to my website: http://environment.ucoz.com/
    It works on firefox but on IE7 it doesn't. COuld you help me please and thank you in advance

    ReplyDelete
  18. THis doesn't seem to work on ie 8. COuld you help?

    ReplyDelete
  19. @Anonymous

    The link works on all browsers. Kindly follow the steps again. I have rechecked the code.

    ReplyDelete
  20. back to top widget is working great,thanks a lot.

    ReplyDelete
  21. Uhmm. Where do I place the code when I'll place it on HTML?

    ReplyDelete
  22. Kindly paste it in HTML/Javascript widget and place it anywhere you like. Position of the widget doesn't matter.

    ReplyDelete
  23. thanks for the great tips, simple and clean, easily understood by average blogger like me :D (managed to get those buttons up with just a bit of a modification to the codes).

    ReplyDelete
  24. Thanks a lot man..... its work great.....

    ReplyDelete
  25. Thanks A lot !
    Loved the buttons.. !

    ReplyDelete
  26. Hi,
    I love your blog, its so helpful!!!
    I tried using this code for my blog and everything worked except for the picture of the arrow I used. Im a little confused, then I tried using an arrow I have hosted on photobucket and it showed a box on my blog where the arrow should have been that said "this link doesn't work".
    I put down my email address to receive the buttons but never got them. I will wait for your help before trying it again.

    Thank you very much!!!
    Kelly

    ReplyDelete
  27. your site really helps me a lot on my blogger ill stick with you.
    your an angel.. such a genius.:-) thanks

    ReplyDelete
  28. nice tutorial..

    this very useful..

    ReplyDelete
  29. Thanks for This Mohammad!
    I also used this for my weebly website i just did a lil change and it works. I owe you this one Mohammad. You are Brilliant! Keep sharing great ideas!

    http://messyblog.weebly.com/index.

    Regards,
    Debbie Navarro

    ReplyDelete
  30. The problem with this trick is that with different screen resolutions the button appears in different places. So, if your resolution is big (let's say 1920x1080) and you adjust the position of your button according to your resolution, the button may overlap your blog's content for visitors with smaller resolution (let's say 1024x768 (my resolution)). And the opposite, if you adjust the button for small resolution it will go far away from your content for visitors with higher resolutions, which doesn’t look aesthetic.

    Is it possible to make a fixed button which position is determined according to the blog’s content and not the screen sides, so that it remains in the same proportions according to the blog, with the different resolutions?

    ReplyDelete