ShareTweet

These are some buttons I designed for a Western themed sites I did recently (email me if you are interested in seeing the working site), and I wanted to make the buttons available to you for FREE for all 4 button images. I offer more free buttons (and will continue to add to this collection) at Reflecting the Designer on Blogger. These, however, are a very special design with a rustic wooden feel and are perfect for a Western Themed or Rustic Themed blog or site design. The image on the right depicts all of the buttons as they are displayed on a site that features a wood background. These images were designed to be scrolling images on the side of the screen, but they can be incorporated anywhere you desire to put them on your site.

How to Download these Buttons:

Simply click on the picture to the right, and you’ll be directed to a zip folder containing the buttons that you can download to your computer.

How to add these as scrolling buttons to your WordPress Site:

• Upload each individual image to your ftp or to a free image hosting server and copy the url of each image location.
• Add the following code to the footer.php of your WordPress Site by clicking on the Editor button under Appearance on your Dashboard and then clicking on the Footer.php in the right hand column. I would put it toward the bottom, and make sure that you don’t accidentally add it inside of another div.

<div>
<a style="display:scroll;position:fixed;top:10px;right:10px;" title="RSS" href="YOUR RSS FEED URL HERE"><img src="YOUR RSS IMAGE URL HERE"/></a>
<a style="display:scroll;position:fixed;top:80px;right:11px;" title="Twitter" href="YOUR TWITTER PAGE URL HERE"><img src="YOUR TWITTER IMAGE URL HERE /></a>
<a style="display:scroll;position:fixed;top:147px;right:9px;" title="Contact" href="YOUR EMAIL ADDRESS"><img src="YOUR CONTACT IMAGE URL HERE" /></a>
<a style="display:scroll;position:fixed;top:212px;right:8px;" title="Facebook" href="YOUR FACEBOOK PAGE URL HERE"><img src="YOUR FACEBOOK IMAGE URL HERE" /></a>
</div>

• Switch out the “Your Image Urls” with the urls that you just saved, and of course make sure to switch out the link urls to your actual contact links. Also, make sure that each titles matches each image. (This is very important, so that when someone scrolls over your facebook button, the words Facebook appear – or whatever text you put there.)
• The code I’ve given above has the display dimensions that you see in the image above. You can change how they appear, however, by editing the pixel numbers and choosing whether you want them to appear on the left or right hand of the screen, and whether you want them to appear on the top or bottom of the screen.
• NEVER, EVER copy and paste directly from here or anywhere on the web. Put the code into a text editor first, and ensure that all of the quotation marks are facing the proper direction and that there are no extra spaces.

Please let me know if you have any trouble downloading the images or adding them to your site. Also, feel free to contact me if you are interested in customized button design to match your current theme, or if you are interested in a complete theme design which always include customized buttons and graphics.

© 2009 – 2011, Sarah. All rights reserved.

ShareTweet