February 28, 2013

Redesign Your Blog Series >> Mouseover Pinterest Button Tutorial

Have you ever wanted to tweak your blog a bit, perhaps add a feature or two that would make your blog not only look better but also be easy for readers to navigate?
Part of my redesign project this past week was to not only change the look and feel of my blog, but to also make my blog user friendly. I wanted to make it simple for readers to "pin" my photos to Pinterest, but was really annoyed with adding that blasted button code to every post. 
I had seen a few other blogs that had what's called a "mouseover" feature to their photos, which I instantly fell in love with. A "mouseover" is just what it sounds like, when you move your cursor over a photo the Pinterest button appears over the picture, giving you the option to easily pin a post to your own Pinterest board.
The great thing is that you only have to post a code to your HTML code one time and that's it! Now ALL of your photos past and present show the Pinterest button.

**I wanted to preface this post by stating that if you're attempting any of the codes in this redesign series you should always back up your template and preview your changes before you "save template". Better safe than sorry.
*The original tutorial can be found here.
If you have a Wordpress blog the tutorial can be found here.

There are two simple steps to this code (for Blogger):
1. Go into your HTML code and hit "Expand Widget Templates".
Now scroll down about 3\4th of your code until you see </body>.
2. Right above </body> paste this code:


<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/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 src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'></script>
<!-- please do not alter or remove the following code -->
<div id='bs_pinOnHover'><a href="http://www.bloggersentral.com/">Blogging tips</a></div>


That's it!
If you want to change the position of the button (I moved mine to the upper right hand corner, just replace the word "center" in the code with either
topright
topleft
bottomright
bottomleft
Press "save template" and your all ready for your readers to start "pinning" away.
If for any reason you want to remove the mouseover buttons just go back and erase that code from your HTML.
If you have any questions feel free to email me and I will try to help.

Look for more tutorials from this series, and if you have anything you would like to see a tutorial for leave those suggestions in a comment below.

18 comments:

Melissa at My Fabric Relish said...

thank you thank you....I just did it to my blog!

Donna Wilkes said...

I wondered how to do that! Thanks!

motheronamission said...

I had no idea this even existed! Thanks for sharing!

Linda@With A Blast said...

Thank you so much! I have tried other suggested how-to's but it never worked. I have installed, using your tutorial within 3 minutes :-)

Beja {Howdy-Honey.com} said...

Thanks so much! Easy peasy!

Diane | An Extraordinary Day said...

Hi April!
I was just wanting to do add this feature. I have a little pin it button on the side of the blog...but is the berries. I hope that it will work just as well in WordPress...I think I might need to do a little homework.
Blessings!

Kara @ Petals to Picots said...

Thanks so much for sharing! I want yo try this :)

Kara @ Petals to Picots said...

Thanks so much for sharing! I want to try this :)

Sarah Schultz said...

Thank you for this. I just added to my page. I had seen the original tutorial but was in the middle of something and forgot to go back and do it.
I found you through Ladybird Ln.
Have a great weekend!
Sarah
http://sarahmschultz.blogspot.com

Emily said...

you rock sister! keep 'em coming!

Trista said...

Great turtorial, thanks for sharing!!

Sarah said...

Found you on Sugar and Dot's what i whipped up Wed. This is awesome. I was just thinking about how i needed to figure the pinterest button thing out. Thanks!!!

{Steph} said...

Sweet! I just did this & it works great! Thanks so much!

~Steph @ Silver Boxes

Shannon {Cozy Country Living} said...

Thank you so much for sharing! I love these great tips:)

Jamie -Better With Age said...

Thanks for sharing this! I'm your newest follower ;)
Jamie www.somuchbetterwithage.com

Julia Forshee said...

What GREAT practical tips!! Thank you so much for sharing. We are starting a link up party on Thursdays (today:), and we would love for you to join us with this post and/or any others you would like to include. We are at allthingswithpurpose.com. Hope to see you there!!

bonniegetchell said...

Thank you for sharing this! I've been wanting to do this for so long! I'm visiting from Monday Funday:)

-Bonnie @ Revolutionaries
www.revolutionariesblog.com

Abigail Cappel said...

These are great tips and I'm just now catching up on your Redesigning your blog series! I myself have a Growing Your Blog series for beginners. I was hoping that you could share this post on my Sunday Link Party!! I'll host it every week, and welcome you!

Abbi @ Seasons of a Homemaker