Easily Add ‘Scrolling’ Button to Pages and Posts
I recently had the need to add a button to the right of a window that would remain static when the user scrolled up and down the Page. We often see this type of button particularly for ‘comments’ or ‘sharing’ buttons.
So how do we add this ‘floating’ button to WordPress … here are the instructions:
1. Go to ‘Appearance’ -> ‘Editor’ and select style.css . At the end of style.css add the following then save the update
img, a img { border: 0; }
#badge1
{
position: fixed;
z-index: 1;
right: 0;
top: 200px;
}NOTE: If you want the button on the left then change ‘right’ to ‘left’. Also, ‘top: 200px’ specifies the placement of the button from the top of the screen so you may change this for your needs.
2. Whilst still in ‘Appearance’ -> ‘Editor’ select header.php. Add the following then save the updates.
<div id="badge1"><a href="http://eckstein.id.au/"><img title="WordPress Specialist" src="http://eckstein.id.au/wp-content/uploads/2011/01/click-button.png" alt="WordPress SME Websites and more" /></a></div>
NOTE: Amend the various bits and pieces above to suit your needs.
It really is that simple; we just add a bit of CSS and HTML and the button floats as the Page or Post is scrolled.
Please note that you must have the ‘z-index: 1;’ in order for the hyperlink to work in Firefox, Google Chrome and Safari (the hyperlink will work fine in Internet Explorer without the z-index but the other browsers must have the z-index). Also, WordPress Theme file contents differ and the method described in this Post was created for an Artisteer generated WordPress Theme.
