DIY Pinterest Hover Button - Designing and adding a Pinterest Hover button to Blogger images - Tutorial

Most of the blogs have cute social media icons on the side bar or at the bottom of each post as well as Pinterest icon on each image in their blog posts. I am not much into social media but wanted to put the Pinterest icon on my images  for starters. I don't have much experience with web designing, so I tried searching for free Pinterest icon images but all I could find was the pinterest logo in different colors. I assumed most of the bloggers have their icons designed when they get blog designs done. Though I know some bloggers design their blogs themselves, no one provided (at least I couldn't find) any tutorial of sorts on how to DIY these icons. So I attempted to create my own. Not being a Photoshop pro, I had to turn to PicMonkey. After about 20 minutes of trial and error I realized it is easier than I thought to create my own social media icons. Here is what I came up with.

Now for new bloggers like me, here is the step by step tutorial.

Open PicMonkey and click on Design.

At this point you can resize the image or crop it in PicMonkey. Then save it to your computer. I saved it to computer as is and opened the image in Preview on my Mac then resized it.

Now that you have image ready, follow instructions from this link to upload your newly created Pinterest Icon into blogger and add it to your blog images.

That's it. Simple as that. So simple that you can change your icons as your blog design changes or just because.

Hope this tutorial will be useful.





For easy reference, I am copying the instructions from above referred link.

*********************************************************************************
BELOW INFORMATION IS COPIED FROM DIGITALK ONLINE BLOG just incase the link provided above did not work. I do not intend to repost it as my original content.
*********************************************************************************

NOTE: This requires editing your Blogger template. Before proceeding with the instructions below, I recommend that you backup your Blogger template first!

Don’t want to tackle these updates yourself?  I can help!

1. In your Blogger Dashboard click on Template and then Edit HTML.
2. Scroll down to the bottom of the code and find this line:   </body>
3. Copy this code from BloggerSentral and paste it into your template code right above the</body> code.
4. Click the “Save Template” button.
5. Click the “Close” button.

Now view one of your blog posts and you should see a red Pin It button appear on top of your images when you put your mouse pointer over an image. You can call it quits now — or we can customize things a bit…

Use a Custom Pin It Image:

Download a Pinterest Icon to your computer or create your own. (You can get Free Pinterest Buttons for your Blog here!) Then upload your image to an external website such as Photobucket (and skip to step #5 below) – or you can upload it right to your Blogger blog:

1. Create a new post.
2. Add your Pinterest icon to the post.
3. Once you see the image in your post, click the HTML button (top left corner). Now you will see the HTML code of the post. Look for the image code. It will start with <img and will include src= followed by a URL in quotes, similar to the yellow highlighted line shown in the image below. (Click the image to view a larger version of it.) Copy the URL that is in the quotes after src= (see the red underlined text in the image below); this is the URL of your image.
   

   Using a Custom Image for Your Pinterest Hover Image in Blogger
4. Do not publish this post. The sole purpose of this new post is to store your image on Blogger. I recommend saving the post as a draft just in case you forget the URL. However, you can delete this post if you want to, since the image will still stay on Blogger’s web server.
5. Now go back to your template’s HTML code (Template > Edit HTML) and find this code:
   var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzT9AxfXX2C5_oX9tp-m5MVG_N3ey6EJ7enBDo6SlyoTfy3tE8Sl56UcOangqNY7c8pRX0i9UgXH1sD65ove8MpvK-XaFk11O_gXSu7YOomMF4UwCk-FnIa58ldScs6Xn68M1aiTm-_2MT/s1600/pinterestx1_72.png"; 
   and replace the URL in the quotes (in red above) with the URL of your image.
6. Click the “Save Template” button.
7. Click the “Close” button.

 Change the Position of the Pin It Button:

By default the Pin In button will appear in the center of your image. If you prefer that it appears in the corner of your images instead, you can easily do that. Simply find this line of code in your template’s HTML code (Template > Edit HTML):
var bs_pinButtonPos = "center";
and replace “center” with one of these positions:

• topleft
• topright
• bottomleft
• bottomright

If you want to offset the Pinterest Button from the corner of your image so there is a little space between the button and the corner of the image, you can add some CSS code to the <head> section of your template (Template > Edit HTML):
.pinit-wrapper {margin:-10px;}
(The negative value for the margin pushes the button inwards.) For example, see the yellow highlighted code in the image below:

Adding Space Around Your Pinterest Hover Image in the Corner