how to: make a 'pin it' button appear on hover over images on your blog

hover over this image and pin it to see it in action & spread the word!

I just recently discovered the trend going around the internet of bloggers having a 'pin it' button appear when you hover over their images. How cool!! I loved it so much I made my own custom Pin button to add my to images that matches my blog design.

Today I am going to share with y'all in real girl (non-techie) terms how to add this glorious site traffic boosting button to your Blogger site!















Step 1 / / Click 'Template' --- Back up your template. Always. (click the button in the top right corner to download the entire template)

Step 2 / / Choose "edit HTML" --- click anywhere within the HTML, then and press Command+F (mac) or CTRL+F (PC) to bring up the search bar!

So handy! Now in the search bar type </body> and find that pretty little chunk of code. The finder should highlight it automatically for you :)

Step 3 / / Now ABOVE THAT (above the highlighted </body>) copy and paste the following code:

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

BOOM! And there is your Pin It button! Now, before you save it you will probably want to tweak it a little and here are your ONLY options for changing the code (if you change anything else it wont work):

/ / Option 1 : If you want to change the location of the button on your image, change where it says "center" to one of the following options:
topright
topleft
bottomright
bottomleft

/ / Option 2 : If you want to change the image that pops up, you can just substitute in your own image link where it says pinButtonURL = "

Pinterest provides a image few options here. But I just chose to make my own and upload the image to photobucket to get a link :)


Step 4 / / Click Preview. You wont be able to see anything (aka the pin it button) but if everything looks normal then you put the coding in the right place and it isnt affecting any of the other coding in your template!

Step 5 / / SAVE THAT BAD BOY!

Step 6 / / View your blog, admire your work, and pin this blog post to help spread the word!

TIP: To block the icon from certain images, add the "nopin" class to the image.
For example:
<img class="nopin" src="www.whit.com/imagehere">


/ / / / If you used this code on your blog please link up in the comments section so we can see it in action!
/ / / / Confused? Feel free to comment your question so I or another reader can help you out!

Happy blogging!

Code found here.