Add a Hover Pin It Button on Blogger

No need to over complicate things, adding a hovering Pin It button to your images it easy and it classes things up a few levels. There are actually 2 ways I know of to do this, and I will show you both. One requires a little html wrangling (like most things) and the other uses your html widget. Let's get down to business....(you totally sang "to defeat the huns" in your head didn't you?)

Check out the live button on my cotton candy clouds by hovering over the image =)

Method 1 (How I did it on my blog)

1. Open the "Template" tab on the right of your screen

Then select "Edit HTML" (fear not!)

2. Click anywhere in the box of colored code and hit "ctrl + F" on your keyboard

A little search box like this will pop up. Be sure to click first in the box of code, or it will be a search bar for your internet browser, not the code!

3. Copy and Paste or type in the code below in the search box

 </body>  

4. Copy the text below and paste it right above < / body  >
Borrowed from bloggersentral...because they are great coders!

 <script>  
 //<![CDATA[  
 var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ_BJYXxvdRBVffhkIjHpDAwhxANuqHhpL2TCyTl38qgKKN5vHCKT5xMmBy_JBKgv5NnqEpLKOIHwOdM6SJUmQKKOne-9WBk1kyesbFnfbMQpqAReVJTJZYwQV_v8ps87DV-UBGr3PlhlC/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 id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>  
 // This Pinterest Hover Button is brought to you by bloggersentral.com.  
 // Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.  
 // Feel free to use and share, but please keep this notice intact.  
 </script>  

It should look something like this

Yay! You can stop here....or continue for a little more detail.

5. If you have your own Pin It button....
You can replace the URL highlighted below with a link to your own button.

Recommended: For bandwidth purposes, if you are using the Pinterest button provided in the code, open this link and save the image to your computer. Then, re-upload the image to your own "server" such as photobucket, or picasa webs (now part of G+) and use that image link to replace the link highlighted below. Again, you don't have to do this, but just so the whole interwebz are not using the same Pin It link, make your own.

6. If you want to reposition your button...
Change "center" to:
Top Left
Top Right
Bottom Left
Bottom Right

7. If you don't want all of your images to have a button...
I usually only have a Pin It button on photos that make sense to be pinned. While I am composing a post, I switch to HTML instead of Compose and find the code for the image I do not want a button on. I add...

 class='nopin'  

after

 <img  

Done! That is all for method 1! Pop over to this post for a slightly less HTML intensive tutorial through Pinterest.