September 9, 2013

Adding and Customizing the Pin It Hover Button

In case you aren’t familiar with the Pin It Hover Button, it is a Pinterest icon that appears when you hover over an image on a website allowing you to click on it and pin.  Why is it fantastic?  Well, for one thing, it’s very convenient for your visitors.  It prevents them from having to go directly to Pinterest and click on the add a pin option and past the URL of the content they want to pin.  Secondly, it’s customizable which means you can create the icon yourself to keep it consistent with the design of your website.  Are you sold yet?

ADDING AND CUSTOMIZING THE PIN IT HOVER BUTTON


PIN IT HOVER BUTTON GRAPHIC

An example of the hover button on my website:

example of the Pin it hover button on website

 Once you click on the Pin It button it goes directly to Pinterest:

Pin it on Pinterest
 

SO, HOW DO I ADD THE PIN IT HOVER BUTTON TO MY WEBSITE?

I’m so glad you asked.  It’s simple as adding some code, courtesy of BloggerSentral, to your template.  Before you can add the code, you’ll need to know how to access your template to edit the HTML.  To access your template on Blogger, click on the drop down arrow icon next to the tiny image that looks like 2 pieces of paper.  From there, go to Template / Edit HTML.

Blogger Dashboard

Before making any changes to your template, save it first!  Once opened, click anywhere in the template box using control A (on a PC) or command A (on a MAC) to select the entire code.  Then right click on your mouse to copy it.  Once copied, open a Word document or something equivalent to paste (control V or command V) and save.

To enter the code into your template, search for the </body> tag.  Insert eye roll here.  Why?  Because for some reason, my template did not include a </body> tag.  Or, so I thought.  After speaking with a very helpful gentleman over at BloggerSentral, he said it was possible I had mistakenly removed it.  Supposedly all templates have a </body> tag, and the code should be inserted directly above it.

Even more frustrating than not being able to locate it in my template was that I couldn’t find any information about what to do in the event your template didn’t contain the tag.  So, what did I do?  According to BloggerSentral, I knew it had to be inserted somewhere near the bottom of the template, so I experimented a little lot.  If your template doesn’t contain one either, you can add it right above the <macro tag which is usually located towards the bottom of your template.  To do a search on either tag, click somewhere outside of your template box using control F (on a PC) or command F (on a MAC) to open a search box.  Type in the tag of choice and hit enter to run your search.

Please refer to screenshot 1 to see where my <macro tag is located,

macro tag location in blogger template

screenshot 2 to see where I added the </body> tag, and

body tag location in blogger template

screenshot 3 to see where I added the pin it hover button code.

pin it hover button code in blogger template


NOW FOR THE FUN STUFF: CUSTOMIZATION OF YOUR PIN IT HOVER BUTTON

To create your button, you’ll need a graphic creation or photo editing software.  Something like Adobe Illustrator, Photoshop, Elements, or, a more user friendly and free program like, PicMonkey are all great programs for this!  You’ll want your button to be small, so I recommend using a canvas somewhere around 150px x 150px wide.  As an example, my button is only 130px x 120px wide.  Once you’ve settled on a design, save it as a .png.  The .png file extension maintains the translucency of your background.

Now that you’ve created your masterpiece, you’ll want to upload it to a program like Flickr to have it generate code for your image.  Refer to the screenshot below:

Flickr Screenshot

Here is a closer look at the HTML for my customized pin it image.  The portion in red font is the part you’ll want to update your pin it hover button code with.

<a href="http://www.flickr.com/photos/80364895@N04/9593833483/" title="Pin it hover button 2 by croppedstories, on Flickr"><img src="http://farm4.staticflickr.com/3777/9593833483_d1a26fcf5a_o.png" width="131" height="122" alt="Pin it hover button 2"></a>

Replace the portion of code, from BloggerSentral, highlighted in yellow below with the HTML in red font above, and you should be good to go!  They will also provide you additional information on how to update the code so that your hover button appears where you want it to on your images (e.g. top right, bottom left, center, etc.). 

http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png

And speaking of pinning it, EVER WONDER IF YOU’RE PINNING IT RIGHT?

A great post, over at My Personal Accent, I recommend reading is: Pinterest - Are you Pinning it Right? Learn things like how to pin from your blog, browser, and blog hop posts.  It’s a wealth of helpful information!


If you missed my previous post, Looking for Blog Help or Design Services, feel free to check it out!

Do you like to party? If so, don’t forget to link up to our PINcentive Blog Hop!  Winners will get their content pinned a minimum of 31 times!  It goes live tonight at 11:00PM EST!

Need $500?  I can definitely help you out!  Stop by and celebrate the 1 year blogiversary of A Peek into my Paradise and enter our GIVEAWAY!

LOOKING FOR A BLOGGER OPPORTUNITY?

I’m currently looking for contributors to write for Cropped Stories.  As a contributor, you would be entitled to page or sidebar exposure which would include an image of you, some general information about yourself and, most importantly, a link back to your website.  Feel free to visit my ADVERTISE page for my most current blog and social media statistics.

Additionally, I’m looking for giveaway cohosts.  For more details, visit my Co-host a Giveaway page!

Okay kids, that’s all I have for you today!  Hope you had a wonderful weekend and happy Monday!

15 comments :

  1. Wonderful tutorial and I too had shared for both Blogger and Wordpress on J9 Designs how to do this. And it really is pretty easy and you did a great job here explaining!!! :)

    ReplyDelete
  2. Thanks for this. I didn't realize that people had moved to this and missed out on pinning a loy of things. Will it work in conjunction with the Pin bar at the bottom of your post?

    ReplyDelete
  3. This is so helpful! Thanks for linking up with The Collective!!!

    ReplyDelete
  4. Thanks for this! When I started my blog I added a pin it button (and them promptly forgot how I did it) and have been looking for a way to customize it! This is perfect!

    xx Kait | ChickadeeSays | ChickadeeSays Bloglovin

    ReplyDelete
  5. I love this tutorial and will be adding this soon to my blogs. Thanks for sharing Elena. :)

    ReplyDelete
  6. Wow thank you for explain how to create the hover button. I am gong to have to try it. I just will need some time because it sounds like you need a lot of concentration.
    Thank you agian

    ReplyDelete
  7. I've been looking for a tutorial for this, thank you!

    ReplyDelete
  8. Hello Elena! Thank you for the awesome information and for hosting this cool Blog Hop.

    All the best,

    Vashti

    ReplyDelete
  9. excellent tutorial!! I tried this once and it didn't work haha, maybe with your excellent tutorial I can get it fixed! :) thanks so much for linking with us for wine'd down Wednesday!

    ReplyDelete
  10. Thank you so much for this amazing post. I've seen PinIt button around and had no idea you could make one and customize it. It's a fantastic idea. Thanks so much for linking up with Wine'd Down Wednesday. Pinning!

    ReplyDelete
  11. I was just telling someone I need to figure out how to do this. I must say it looks a little scary, but I will give it a try. thanks for sharing this info. visiting via 'wine'd down wednesday, blog hop.

    ReplyDelete
  12. I'm pinning (correctly I might add) for future reference if I change my blog design. Thanks for linking up at My Favorite Posts Show Off Weekend Party! Hope to see you again tomorrow.

    Michelle @ On A Wing And A Prayer

    ReplyDelete
  13. Thanks for sharing this helpful "Pin It" information at Throwback Thursday! So glad you stopped by!

    ReplyDelete
  14. I love love love your pinning button. I so wish I could do this. Thanks for sharing at Throwback Thursday.

    xoxo
    Denyse

    ReplyDelete
  15. With blogs like this around I don't even need website anymore.I can just visit here and see all the latest happenings in the world.
    website design

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...