How to Create Images That Change on Hover
Previous
RANDOM
Blogger Tutorial - How to Quickly and Easily Add Social Media Icons to Your Header
Next

Create and Add a Custom Pin It Button – Blogger

by FayeNovember 15

Remember how in yesterday’s post I said I’d be teaching you how to achieve some of the custom features that I have on my new blog?

Well today i’ll be showing you how to add the pin it button to your blogs AND add your own custom image rather than Pinterest’s default icon. The benefit of creating your own one is the ability to create an icon that suits your blog design.

This is what I have displaying over at Cloud Nine:

 

So how did I do it.

Instructions to follow.

1. Create your Pin it button using photo editing software or an online editor. Save the image.

2. Upload the image to Photobucket and make a note of the direct link.

3. Log into Blogger and navigate to Dashboard>Template>Edit HTML>Proceed>Tick expand widget template box.

4. Press Ctrl+F and enter the following code into the search box.

data:post.body

5. Press enter.

6. Above data:post.body place the following code

<div id=”pinit”><a href=’javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());’><img src=’link to image‘/></a></div>

Make sure to check that all the single and double speech marks are straight and not curly. WordPress automatically changes them into curly ones.

7. Replace the bolded text with your Photobucket link from step 2.

8. Save template.

Your custom button will now be showing underneath the post titles. But maybe you’d like it to be located to the left or to the right and that’s really easy to do.

Go to Dashboard>Template>Customise>Advanced>Add CSS.

Add the following if you want it to the left.

#pinit {
float: left;
}

Change float: left to float: right to have your button located on the right hand side.

Save and your done. Questions?

 

 

What's your reaction?
I Love It
0%
Cool
0%
It's OK
0%
What?
0%
I'm Sad
0%
I Hate It
0%
2 Comments
Leave a response
  • January 3 at 2:37 am

    Thanks for this help! I didn’t do a custom pin it button so how can I get the pinterest pin it button and how do I install it? Thanks

    • January 12 at 10:29 pm

      You save the icon you want and then upload it to photobucket or whatever image source you’re using and then follow the rest of the instructions.

Leave a Response

Fonts by Google Fonts. Icons by Fontello. Full Credits here »

Never Miss a thing!

Sign Up Below.