4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Where and how to add "floating" button to a wordpress blog?

by Ashley Gable
2 replies
Hi

I am trying to add a floating button to one of my blogs, it is a corner one just like the war room button here at the warriorforum.com

I have done it before on a normal php page, so I know how to do it, I just dont know where to add it to a wordpress theme so that it shows up.

Also do I need to add the css code to the wordpress style sheet, or just link to my current one?

I appreciate any help

Here is the code I am using: (dont know if you need to see it in order to know where it needs to go, but figured it couldnt hurt)

Code:
<div id="button-one">
    <a href="http://www.linkedsite.com"><img src="button.jpg" alt="Click Here" /></a>
</div>
And here is the css:

Code:
img, a img { border: 0; }
#button-one
{
    position: fixed;
    left: 0;
    top: 200px;
}
Thanks again
Ashley
#add #blog #button #floating #wordpress
  • Profile picture of the author Leslie B
    I haven't used it yet, but I would think that, once you have added the css to the stylesheet file, you could put the code in your footer or header, that way it appears on all pages.

    Leslie
    Signature
    Taking it one day at a time!
    {{ DiscussionBoard.errors[2325698].message }}
  • Profile picture of the author Marketing Profits Software
    Add the following CSS code to the "style.css" file to make your button appear on the bottom left of the screen:

    Code:
    img, a img { border: 0; }
#button-one
{
    position: fixed;
    left: 0;
    bottom: 0;
}
    Use this code to make the button appear on the bottom right of the screen:

    Code:
    img, a img { border: 0; }
#button-one
{
    position: fixed;
    right: 0;
    bottom: 0;
}
    If you want the button to appear on every page/post, like Leslie said, put the following code in the bottom of the "header.php" file or right before the closing body tag (</body) in the "footer.php" file:

    Code:
    <div id="button-one">
    <a href="http://www.linkedsite.com"><img src="button.jpg" alt="Click Here" /></a>
</div>
    {{ DiscussionBoard.errors[2326101].message }}

Trending Topics