May 10, 2009

Widgets

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. See my feed back page to get an idea, Click here!

  • 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 »

47 comments : Post Yours! Read Comment Policy ▼
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. This comment has been removed by a blog administrator.

    ReplyDelete
  4. hello Mohammad Mustafa Ahmedzai

    i am new to ur blog
    and i luv ur blog too

    but dude i try this trick in my blog but it is not working

    u can c my blog

    http://soft-tricks-by-arham.blogspot.com/

    dude
    i hve used this code

    <a style="display:scroll;position:fixed;bottom:5px;left:0px;" href="http://www.123contactform.com/contact-form-arham_ali60-20309.html" title="Your Feedback is always welcomed!"> <img onmouseover="http://lh6.ggpht.com/_7wsQzULWIwo/SgXYBEuYoWI/AAAAAAAABC4/ASbEK0N1DUg/large-feedback-button%5B4%5D.jpg?imgmax=800" src="URL Of Your Smaller Feedback button"
    onmouseout="this.src=�http://lh3.ggpht.com/_7wsQzULWIwo/SgXYAOstTYI/AAAAAAAABC0/YymzN1RPJFM/small-feedback-button%5B4%5D.jpg?imgmax=800"/></a>

    ReplyDelete
  5. 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
  6. 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
  7. @Nidhal
    Simply change bottom:5px; to bottom:210px;

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

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

    ReplyDelete
  9. @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
  10. thanks brother it works perfectly now..

    ReplyDelete
  11. 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
  12. @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
  13. @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
  14. 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
  15. @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
  16. 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
  17. sir ,
    i am subhrajyoti , i have a blog

    http://krazzycollections.blogspot.com


    I want to use floating follow(google friend connect) button using html. please reply

    ReplyDelete
  18. 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
  19. 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
  20. Here is a back to top script that will get larger on hover for your blog as a gift for your awesome tutorials:

    https://sites.google.com/site/anims101/downloads/go_to_top.html?attredirects=0&d=1

    ReplyDelete
  21. 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
  22. THis doesn't seem to work on ie 8. COuld you help?

    ReplyDelete
  23. @Anonymous

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

    ReplyDelete
  24. back to top doesn't work on one of my blogs...
    I put in this code:

    Arrows do not change size and a my widget box opens not my top of page.
    Can you explain to me what I have done wrong or will this now work in blogger widgets but must be places in html body?
    www.fhbhinseason.blogspot.com

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

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

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

    ReplyDelete
  28. 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
  29. Thanks a lot man..... its work great.....

    ReplyDelete
  30. 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
  31. your site really helps me a lot on my blogger ill stick with you.
    your an angel.. such a genius.:-) thanks

    ReplyDelete
  32. nice tutorial..

    this very useful..

    ReplyDelete
  33. Very nice..
    http://www.geekstrack.com

    ReplyDelete
  34. This comment has been removed by the author.

    ReplyDelete
  35. 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
  36. nice one thanks bro am gonna make use of it on my blog http://www.cashdove.com/ thanks again

    ReplyDelete
  37. Thank you very much for this useful article. I am truly grateful to you for this article.

    Regards,
    Admin of SEO Service Provider

    ReplyDelete
  38. 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
  39. nice widget,I used in my truebloggertricks.blogspot.com

    ReplyDelete
  40. Great Tips Thanks
    from http://erforfree.blogspot.com

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |