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

An example of the hover button on my website:

 Once you click on the Pin It button it goes directly to 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.

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,

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

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

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:

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcbw8lNzXUEhUS6ywY55IyibtuDsCCh4KYQPXSyjmNACpd9vP_iUC1cHEfy3RwSyF7-LWqt4uILemdVqE4eyU1SKzLU8ZQ8PC3dxwRaKBF-mGGenk3vk1hwujyMMAM2TIPCzDLiGXsOmow/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!