Adding vertical fixed feedback button

update: 06.09.2010
Wana use as wordpress or joomla plugin ? then buy from my official website

Downloads

For Joomla
For WordPress

The Story

If you still didn’t notice, please check again there is a vertical feedback button in my blog , right side. So, sometimes people asks me how to do that ,,, any one can read the source code or having debug tool like firebug for firefox can see the source code and add in his own site. But max time, it’s true that we don’t want to learn by reading or google about any problem, we just ask other to get ready made solution. Even we don’t write in forums about our problems …. grr…

So here is answer of the those question, “How I added the vertical feedback button?”

I know how html works and how css works , I know where to edit in wordpress theme. So many days ago I saw that in a site and copied the source code and image and added in my site 😛
I am showing for default wordpress theme tweentyten and all paths shown bellow are windows style as windows is my primary os.

Step1: Copy this image to your wp-contentthemestwentytenimages folder first.

Step2: Open style.css file from wp-contentthemestwentyten dir and ready to add some css code 🙂
Step3: In the file style.css file at last line add the following css codes

[code language=”css”]
body > a#feedbackright {
background:url("images/feedback_tab_white.png") no-repeat scroll 50% 50% #0066CC;
display:block;
height:90px;
line-height:0;
padding:5px;
position:fixed;
right:0;
/*left:0;*/
text-indent:-99999px;
top:50%;
width:22px;
}
body > a#feedbackright:hover {
background-color:#FF8B00;
}
[/code]

Here if you want to show in left side then comment the right:0; line and uncomment the line left:0; Also if you want to up down the position of the feedback button then edit the value for top:50%

Step3.: Open footer.php from the same dir of style.css file and go to bottom of that file to add the following lines after the end of wrapper div(here I have added the end tag of wrapper div so that you get easily)

[code language=”html”]</div><!– #wrapper –>
<a href="<?php echo get_permalink(here will be your contact page id); ?>" id="feedbackright">feedback</a>[/code]

look in the above code there is something “here will be your contact page id” you have to replace this text with your contact page id. if you don’t know how to get page id then you can install this wordpress plugin and activate, then go to any menu from left column for listing like posts, pages, categories, tags etc you will see an extra line at right col for id. Ok let your contact page id is 2 then the line will be like

note: here I am writing the last tag of wrapper div

[code language=”html”]<a href="<?php echo get_permalink(2); ?>" id="feedbackright">feedback</a>[/code]

Step4: now it’s time you do it and let me know.

Wana use as wordpress or joomla plugin ? then buy from my official website

Downloads

For Joomla
For WordPress