Venus Trapped in Mars Sports and Lifestyle Blog Dallas

12 October 2013

Saturday Sessions: How To Install a Pin It Button On Your Blogger Blog

How to Install A Pin It Button On Your Blogger Blog



I'm super pumped because I'm starting to have lots of requests for Saturday Sessions tutorials! If I haven't done a request you submitted, just be patient with me, there are only so many Saturdays in a week........... as in one. It sure would be nice if there were more though. I'd allow it. 

This week's Saturday Sessions tutorial comes to us from Dog Hair Lover Adriana, requesting a "Pin-It Button" tutorial. Most tutorials I do, I think are pretty easy. This one is much more difficult, so be sure to follow the directions precisely. 

Remember, be sure to backup your blog first before operating heavy HTML machinery.









Step One: Design Your Button. 
Although I always design in Photoshop, PicMonkey is just as good for designing a "Pin-It" button. I want my button to be pretty small so it doesn't overshadow the entire picture. I'm going to make mine 50x50px. I'm not going to go in detail about designing in PicMonkey, if you want more help with designing the button, use this tutorial here

Step Two: Upload Your Button to Photo Bucket.
Or another image hosting website. 








Step Three: WARNING, HTML AHEAD! 
Go to your blog's dashboard, find and click template on the left side, then edit HTML.
Right ABOVE that tag, you will copy and paste this code:


Where it says YOUR_URL_HERE
Replace that with the direct link provided in Photo Bucket. 
You can also replace center in that 4th line if you want your pin it button to be located in a different place. You can replace center with:

topleft
topright
bottomleft
bottomright

I opted for topright. 

Here is what my finished HTML script looks like:




Did you do all this? Then click "Save Template"
Did it work, did it work??

23 comments :

  1. Thank you so much for this tutorial! Now I just need to figure out how to make a pin it button I like ha ha.

    ReplyDelete
  2. I just stumbled upon your blog last night, and am like a kid in a candy store with your Saturday Sessions! I just started a blog about 6 months ago, and am not at all tech savvy, so I absolutely love these tutorials! You have a great sense of humor as well--Love your blog!

    Thanks!
    Al

    www.herbearings.weebly.com

    ReplyDelete
  3. Love the Saturday Sessions! Such a great idea - thanks for helping all of us smaller blogs figure out how to navigate this crazy blog world! Looking forward to more of these =)
    Have a great weekend!

    ReplyDelete
  4. Thank you I have often wondered how to do it and now I know, so thank you heaps

    ReplyDelete
  5. Awesome! I don't know why I never thought to ask you about this because I was trying to figure it out after I started my pinterest account. Thanks Sarah!!

    ReplyDelete
  6. this is the best!! can't wait to try it!! thanks for being amazing.

    ReplyDelete
  7. It worked! It worked! Hip hip hooray!

    ReplyDelete
  8. I absolutely love your Saturday sessions! Not sure if it's a common problem, or if I just screwed up somewhere along the way, but how do you fix broken image-map links (aka social media icons and pages bar images have gone missing!)

    ReplyDelete
  9. I just did this and it worked perfectly! Thank you!

    ReplyDelete
  10. I am loving your Saturday Sessions! Such a helpful guide to customizing my blog, thank you so much! Fantastic tutorials!

    -Lacey

    ReplyDelete
  11. It worked! Thank you!

    ReplyDelete
  12. Ahh thank you SO much for this Sarah! Your tutorials are the best! I always link everyone to your no-reply Google Plus tutorial

    ReplyDelete
  13. so i did this tutorial a couple weeks ago and it totally worked and i love how my custom pin it button looks but then today i found a tutorial on how to automatically resize all my pictures to fit the width of my blog so i do not have to mess with it every time and when i do that, then my pin it button becomes HUGE! i think it is blowing up both the regular post image and the pin it image. is there any way to lock the code of the pin it button so that it stays small?

    if you happen to know i would really appreciate if you shared with me!! thank you!!

    xo mk

    ReplyDelete
  14. I have to admit -- I thought I had a pretty good grasp on my design basics + discovered they were a little more than rusty! I never would have been able to get my act together without all of your tutorials! So -- thanks for being a lifesaver!

    ReplyDelete
  15. Thanks so much for sharing this fantastic tutorial - love your saturday sessions!

    ReplyDelete
  16. OK, so I have scrolled through my HTML for an hour and do not see body in red, only in green... help!

    ReplyDelete
  17. This worked INCREDIBLY well! You are amazing. I now have a Pin It hover! And you introduced me to PicMonkey! I feel like I can rule the world now with my blog. I think I saw you post something on making Category buttons, which is my next task! Thanks so much! And if you have a chance, check out my blog and tell me what you think of the button! carolinejaysnowden.blogspot.com

    ReplyDelete
  18. I just did this and it worked great but I noticed in addition to my custom button there was also a generic "Pin It" button showing up on every picture. I removed the following two lines of code and it fixed it for me:
    var bs_pinPrefix = "";
    var bs_pinSuffix = "";

    Thanks for all your help!

    ReplyDelete
  19. One of my favorite Saturday Sessions yet! Thank you for the amazing post!

    -Eva
    www.thepreppyballerina.blogspot.com

    ReplyDelete
  20. Oh my golly day I love your pin it button. Here's to becoming Pinterest famous! :D

    Chloe | Curious Ramblings

    ReplyDelete
  21. Fab tutorial and super clear! Thanks for the HTML share <3

    Emma | www.mypetiteye.com

    ReplyDelete
  22. IT WORKED!! This was so exciting for me haha. I got a little (really) scared when I saw all the html, but it was actually super easy since all I had to do was copy and paste. Thanks so much for this tutorial!

    - Courtney
    courtneylthings.blogspot.com

    ReplyDelete

Comments make my heart go boom boom.

I respond to all comments, if you are leaving me comments and not getting a reply, you may be a no-reply blogger. Fix it HERE!