Add a Pit It Hover Button | Cute Hearts in Stampin' Colours

How to Add a Hover Pin It Button to your blog in Blogger.

Geeky Stuff....I've thought for a long time about sharing not only my creative side, but also the little bits of geeky/techie stuff I've learnt along the way too. 

First up, putting a pretty 'Pin It' button on your images. 

I created these cute little hearts in Stampin' Up! colours a while ago for Pinterest and thought why not share not them to those who enjoy blogging!' 

1. Go to Templates > Edit HTML

2. Locate the </body> near the bottom of your template

3. Copy the code below and paste it ABOVE the </body> tag

4. Return back here and right click on the image Pin It button you would like and copy the URL.

5. Replace the RED with the copied URL. 

6. To reposition where you would like your pin it hover button located on your image change the GREEN word to either 

topleft

topright

bottomleft

bottomright

{This is from Blogger Sentral. If you are having troubles coping the code please visit their site and grab the code.}

<script>

//<![CDATA[

var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB1fJo1CX7wrXS9eWtP9emfE_Y-7LVfiMIXGlGHzLvdrynMBxpblZPoOSYWzXQU7cRz9kdo0-Z0X7WZ_7m0m_uYCIoHICCtf2JtLvL0FCqxDcpeeu2yGIXnEiHFnf7WE5uCnScuqRPIHsU/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>

I have also created a video on how to add your custom pin-it button, or if you have a pin-it button already, you may like to change it to these cute hearts! :)

Removing the Pit-It Button on an Image
Sometimes you may want to remove the pin-it button from an certain images in your blog post.
Here's how you do it.

1. Go to HTML when editing your blog post.

2. Find the last word you used before the image you want the pin removed by pressing Ctrl F

3. Put this code in directly ABOVE your image.
<div class="nopin">



Happy Pinning! 

Note: I'm not a whiz at everything, if you are having problems you may need to investigate further with other websites or YouTube.