Design

Create and Add a Custom Pin It Button – Blogger

Posted on

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?

 

 

23 thoughts

  1. Leanne Author

    Thanks for the tip! I’ve added it to mine and it looks a lot cleaner! Loving this blog! x

  2. Katy Scarlett Author

    Just done this little tip. My blog will get better! One Faye tip at a time! haha xx

  3. Chloe Author

    Hi, I just tried to follow this tutorial to remove the drop shadows. I copied and pasted the above code into the Add CSS box as instructed and applied to my blog, but the drop shadow is still appearing. Just wondering if there’s anything else I needed to do?

    • admin Author

      I’ve no idea what happened as many others have used the tutorial without any problems.

      • Chloe Author

        I don’t know if you’ve added to the code, or if I was doing something wrong- the code looks much longer than it did when I first tried it, but it’s now working.

        Thanks for helping me remove my most hated thing about the blogger template!

    • jennifer Author

      I can’t get mine to work either. I wonder if I can’t get it b/c I tried to remove my borders awhile back but not the shadows? I’m frustrated with blogger.

  4. sissy Author

    Thank you so much, it worked for me. I took off the first 3 items:
    .post-body img, .post-body .tr-caption-container,
    because I just wanted the image border and shadows gone for my sidebar images I was adding.

    Thanks!

  5. jillian Author

    Thank you so much, this really helped !
    Ive tried so many other methods from other websites and this was the only one that worked :)

    thefashioncyclist.blogspot.com

  6. Emily Author

    Just what I was looking for! Thank you so much!

  7. Lauren Author

    Thanks so much! Exactly what I was after and the images look so much better :)

  8. Suzanne Author

    Ty, very useful:)

  9. peter Author

    THANK YOU.

    automatic drop shadow. who thought of that?

  10. Sonia Author

    Perfect!!! THANK YOU SO MUCH!! So useful. That was driving me crazy.

  11. Nin Author

    Oh phew! That was so annoying having a drop shadow around all the buttons on my sidebar – thanks so much!

  12. Thanks! It worked perfectly on my website. =)

  13. You are a saint for posting this! I was in blogger fooling around with my template and all of a sudden those pesky drop shadows showed up and this was a quick and painless fix. Thank you!

  14. MaJoBV Author

    awesome!!! Thank you so much!!! I’ve always hated that drop shadow and this was actually pretty simple!!! THANK YOUUUUUUUU!!!!

  15. shelbi owen Author

    you ROCK! thank yoU!

  16. emily Author

    THankyou sooo much. this has been bugging me for ages and now in about 2 seconds with your help i’ve fixed it! hooray!!! :-)

  17. Thank You! This helped so much!

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>