Create and Add a Custom Pin It Button – Blogger

posted on November 15th 2012 in Design with 2 Comments


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.


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;;+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?



(Visited 6 times, 1 visits today)

Faye Kent - blogger and blog designer.

currently there's 2 comment(s)

  • Leah Inspired

    commented on January 3, 2013 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

    • Kwonzie

      commented on January 12, 2013 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.


We would love to hear your comments