Create and Add a Custom Pin It Button – Blogger

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?

 

 

SHARE
Tweet about this on TwitterPin on PinterestGoogle+Share on Facebook

Comments

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

SHARE
Tweet about this on TwitterPin on PinterestGoogle+Share on Facebook