Redesign Your Blog Series >> Mouseover Pinterest Button Tutorial

Have you ever wanted to tweak your blog a bit, perhaps add a feature or two that would make your blog not only look better but also be easy for readers to navigate?

Part of my redesign project this past week was to not only change the look and feel of my blog, but to also make my blog user friendly. I wanted to make it simple for readers to "pin" my photos to Pinterest, but was really annoyed with adding that blasted button code to every post. 

I had seen a few other blogs that had what's called a "mouseover" feature to their photos, which I instantly fell in love with. A "mouseover" is just what it sounds like, when you move your cursor over a photo the Pinterest button appears over the picture, giving you the option to easily pin a post to your own Pinterest board.

The great thing is that you only have to post a code to your HTML code one time and that's it! Now ALL of your photos past and present show the Pinterest button.

**I wanted to preface this post by stating that if you're attempting any of the codes in this redesign series you should always back up your template and preview your changes before you "save template". Better safe than sorry.
*The original tutorial can be found here.
If you have a Wordpress blog the tutorial can be found here.

There are two simple steps to this code (for Blogger):
1. Go into your HTML code and hit "Expand Widget Templates".

Now scroll down about 3\4th of your code until you see </body>.
2. Right above </body> paste this code:

<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'></script>
<!-- please do not alter or remove the following code -->
<div id='bs_pinOnHover'><a href="http://www.bloggersentral.com/">Blogging tips</a></div>

That's it!
If you want to change the position of the button (I moved mine to the upper right hand corner, just replace the word "center" in the code with either
topright
topleft
bottomright
bottomleft
Press "save template" and your all ready for your readers to start "pinning" away.
If for any reason you want to remove the mouseover buttons just go back and erase that code from your HTML.
If you have any questions feel free to email me and I will try to help.

Look for more tutorials from this series, and if you have anything you would like to see a tutorial for leave those suggestions in a comment below.