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

07 February 2015

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. 



9 comments

  1. Thank you so much! Yours was the best tutorial and help out there on this. I found you on you tube and so thankful for your blog!!

    ReplyDelete
  2. Hi Louise, I'm glad I found your tutorial on Youtube. Yours is the shortest and the most straightforward one. Thanks for the free button!

    Rave + View

    ReplyDelete
  3. OH MY GOD!!! You are a lifesaver!!! Thank you SO much for this easy video and description!

    ReplyDelete
  4. Thank you sooooo much. your code and video instruction has really helped me. I've successfully added this on my site. again thnx. :)

    ReplyDelete
  5. Thank you so much for a great video tutorial and easy to follow code instructions! These adorable Pin It hearts are the icing on the cake for my whimsical blog. Thanks again!

    http://thebrightgirl247.blogspot.com/

    ReplyDelete
  6. Perfection! Thank you so much!! I designed my own hover button, but none of the other codes I found were working. This one did!! Thanks again!

    ReplyDelete
    Replies
    1. Bummer. My Pin It Hover Buttons are gone. They've been working for over two months and all of the sudden their gone. I went back through your tutorial and tried again, but it's not working.

      Any idea if there was a change or how I can fix it?

      Delete
  7. While all over the place feathered creature spotting, there is nothing more baffling than not having an unmistakable sharp picture of the winged animal you are taking a gander at. It might have required some investment for you to find the winged creature or creature you were searching for just to have the minute demolished by not having a reasonable picture of your subject. Sharp, as an image

    ReplyDelete
  8. yes mine too ! They worked so nice and then all the sudden they disappear , I try to get it again but doesn't work anymore :(

    ReplyDelete