Blog Baby Blog Summer Series: Pin It Hover {or Not}

Hey there everybody! I'm here with the fifth post of my summer series on blogging.  Summer is a great time for teachers to dive into blogging.  It's about the only time we have to try something new and take time to learn about it.  I hope these series will be helpful to new and not so new bloggers.  Miss one?  Catch up here:

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.


This 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>

var bs_pinButtonURL = "";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
<script src='' type='text/javascript'></script>
<script id='bs_pinOnHover' src='' type='text/javascript'>
// This Pinterest Hover Button is brought to you by
// Visit for details.
// Feel free to use and share, but please keep this notice intact.

**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.

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:
Here is the dirty side (HTML)  of what that second image looks like:

<div class='nopin'>
<div class="separator" style="clear: both; text-align: center;">
<a href="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="" /></a></div>

The top and bottom lines are the code I added.

That's it! No you can Pin It hover.  Or not.

your photo name


  1. Oh my goodness, Megan, you are a genius! I absolutely adore you and your Blog, Baby, Blog posts!!! I followed your directions, played around with a button that "fit" my blog's personality, and created a "Pin It" button THAT WORKS! in less than an hour!! You are awesome, girl! Totally blogging about this tonight!!!! THANK YOU SO MUCH! (sorry for all the caps and !, but if you can't tell, I'm super excited!)

  2. I have been wanting to do this, but I'm too tired right now to concentrate on all of the directions. :P I will give it a try tomorrow. I really appreciate all of these posts!
    I'm Not Your Grandpa, I'm Your Teacher

  3. I'm amazed at your talent and knowledge! How do you learn all this? Experience? HTML is like reading another language, and I only know a few hello and goodbye!


  4. I always look forward to your blog posts! It's amazing how knowledgeable you are in this area! I have wanted this on my blog, but had no idea how to do it. Your directions were easy as pie to follow and I've already added the hover Pin button to my blog! Thank you!

    Brandy w
    Firstie Kidoodles

  5. The personalized Pin It button s a really nice feature, adding in that personal touch.

    I'm not sure if you've seen this but Pinterest just created (another) feature for quick pinning (that I just installed on my computer) and it's a tin little pin-it button that shows up in the top left of each each when you hover over it.

    I love this series though--I've bookmarked all of them. Thanks

  6. Thanks for the tip on how to turn it off. I didn't know you could do that!

    Angela :)
    Hippo Hooray for Second Grade!

  7. Thank you thank you thank you! I pinned this post and I look forward to all your secrets and tidbits because you make it look so EASY when I struggle so much with it...
    Thank you!
    Fifth Grade Ramblings

  8. Thank you so much for sharing this! I'd really been wanting to add a pin it button, but wanted to choose a particular image. Your tutorials are easy to follow. Loved this series.

    The Super Sparkly Teacher

  9. Is there a tutorial on exactly what a blog button and grab code does (for both a follower and a blogger)? I would really like to know. To me, it has always been a "cute" mini version of your header, I would think of it as a "sticker" if I had to make an analogy. But .... what is it for??? A LoveLi Class

  10. Ok, I've had this post saved for weeks because I was so scared to actually try it (thinking I would ruin things and then have to run to you crying that I messed up your beautiful design), but you're instructions were so easy and now I have a Pin it button! Maybe I'll eventually be brave enough to create my own, but I'll stick to the traditional one for now. Thanks!

    Don't Let the Teacher Stay Up Late

  11. I so wish you were on Wordpress. I'm trying to take your tips and apply them there. They're truly helpful. Thanks for the tutorial.

  12. I swear, I have tried several times for hours each to make my pin it button work. I seriously read like 30 tutorials today and tried each. NONE worked. I did yours ONCE and BOOM! YOU ROCK!


Thanks for stopping by! Leave a comment-I'd love to hear what you think!