This tutorial is a two parter on how to install the Pin It Hover and block the Pin It Hover. Brace yourselves. It involves HTML code.
PART 1: ADDING THE PIN IT HOVER BUTTONThis is an awesome tutorial from Blogger Sentral.
You have to enter the dark side to do this-your Blog's HTML code. I know, I know. It's scary in there. But, back up your template, and just dive in.
You'll want to find this line of code: </body>
**It's waaaaay down there. Try hitting CMD F when you open your code ( CTRL F on a PC). A little box will pop up in the top right corner of your template. Put in </body> and it will find it for you.
Paste the following code above </body>
**The 5th line of code tells the Pin It Hover button where to "sit". You can change it to one of these if you like:
Save and you're done. If it's not working, visit the original Blogger Sentral tutorial for some trouble shooting help.
Want to get fancy and create your own Pin It Hover button?
•Size matters: About a quarter of an inch or a little bigger is a good size. You don't want it to be so huge that it take over the picture.
•Add it as an image to a blog post. Switch over to HTML in your post and grab the image's "address".
•Replace the URL address in the third line of code with your own.
•Just delete the post where you uploaded the image when you are finished, no need to publish it.
PART 2: BLOCKING THE PIN IT HOVER BUTTON
Sometimes you don't want the Pin It Hover button to show up. Maybe it's a small picture. Maybe it's a linky. Maybe you're just not in the mood.
Hover over my example:
See what I mean?
A little bit of code can fix that.
When you are creating a post and add the image that you want to block the pin it hover from, you will need to:
•Switch over from "Compose" to "HTML" (look at the top right corner of your post)
•Find the image in your post.
•Above this line of code above it: <div class="nopin">
•At the bottom of your your image code, add: </div>
Now look what happens to this image when I add that code to this image:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-V99UxFu8B_4/U6BdLJEnxyI/AAAAAAAAQNo/R67Jwc1bcl0/s1600/Example.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-V99UxFu8B_4/U6BdLJEnxyI/AAAAAAAAQNo/R67Jwc1bcl0/s1600/Example.png" /></a></div>
The top and bottom lines are the code I added.
That's it! No you can Pin It hover. Or not.