**UPDATE**
If you're using the "new Blogger interface"
an updated version of this tutorial is available here!
With Pinterest gaining popularity (or becoming an obsession?) I wanted to add a Pin It button on all of my posts to make them easier for myself, and others, to Pin to their boards. This took some time. Most of the tutorials I found involved having to add the html code at the bottom of EVERY post I write. Not exactly what I had in mind. I put my (minimal) html skills to the test and after some
1. Copy this code:
2. Once you've logged into your Blogger Account, go to the Design tab and select Edit Html. Be sure to check the "Expand Widget Templates" box.
3. Look for <div class='post-footer'> and paste the code directly after that.
4. Save your Template and you should be good to go!
Note that this coding makes the Pin It button appear on the bottom right side of your posts. If you want the button on the bottom left side of your posts, replace the <div style="float: right; margin: 4px;"> coding with just <div>.
You can also customize your Pin It button. I used the standard Pin It image that Pinterest supplied, but changed its color to match my blog. You can really use any image that you want. Once you create it, host it online, and put its link in place of http://img.photobucket.com/albums/v419/green_tea/pin.jpg in the coding above.
Adding a button to your blog is a great way to help readers keep track of their favorite posts from your blog! They can easily find, or be reminded of, DIY tutorials they want to try or products they want to add to their wishlist! Give this Pin It button tutorial a try!
2. Once you've logged into your Blogger Account, go to the Design tab and select Edit Html. Be sure to check the "Expand Widget Templates" box.
3. Look for <div class='post-footer'> and paste the code directly after that.
4. Save your Template and you should be good to go!
Note that this coding makes the Pin It button appear on the bottom right side of your posts. If you want the button on the bottom left side of your posts, replace the <div style="float: right; margin: 4px;"> coding with just <div>.
You can also customize your Pin It button. I used the standard Pin It image that Pinterest supplied, but changed its color to match my blog. You can really use any image that you want. Once you create it, host it online, and put its link in place of http://img.photobucket.com/albums/v419/green_tea/pin.jpg in the coding above.
Adding a button to your blog is a great way to help readers keep track of their favorite posts from your blog! They can easily find, or be reminded of, DIY tutorials they want to try or products they want to add to their wishlist! Give this Pin It button tutorial a try!
Special thanks to ClickinMoms for getting me started on this post!
Love this - thanks so much for figuring it all out and explaining it. I am pinning it for future reference now :).
ReplyDeleteLove this! Thank you so much for this tutorial! I just added it onto my blog, so easy, and I have no clue what I'm doing when it comes to html.
ReplyDeleteAshley
theinspiredlens.blogspot.com
Genius! Done and done!
ReplyDeleteMaybe you could also tell me how to get the "You might also like:" that everyone always has at the bottom of their posts? Thanks :)
Try linkwithin.com
DeleteThey have a great widget for that!
I use linkwithin and it was very easy to install.
DeleteThanks, I have been wanting to add that option to my blog also.
DeleteWow thanks! I just added it. Great idea!
ReplyDeleteAh! What a clever idea! Thanks for the tut!
ReplyDeleteGreat! I've just added! Thanks for this tutorial. Really useful! :-)
ReplyDeleteYay,I've been wanting to do this! Thanks!
ReplyDeleteHey thyanks for this. I have looked at putting on in before but only ended up with it on the right hand bar and not at the bottom of the post.
ReplyDeletethis is much more useful, and a great colour choice :p
I'm coming back to this post in the future when I have the time to do it. I have the pin it button on my toolbar which works great for me, but I know not everyone has it.
ReplyDeletewhat a good idea!! :] so glad i stumbled upon your blog! too cute! can't wait to catch up on the rest of your posts! ♥
ReplyDelete-kar
Wow! Way to go putting all that info together. You're amazing. That couldn't have been easy. Thank you girl!
ReplyDeletethanks so much for sharing. that was so easy! i appreciate it you taking the time...
ReplyDeleteThank you! I put it on my blog!
ReplyDeleteI have to say...I literally spent hours today with another tutorial. I was so frustrated and stumbled on yours...THANK YOU!!!! In less than a few minutes it WORKS!!!
ReplyDeletegoosebumpfactor.blogspot.com is now easy to pin!
So awesome and so easy! Thank you Thank you Thanks you!!!
ReplyDeleteAwesome! Now if only I can figure this out for Typepad blogs :)
ReplyDeleteSo I just googled how to do this and stumbled on your blog! So glad I did! Thanks for this and looking forward to following your lovely blog!
ReplyDeleteThank you so much!!!!! I couldn't figure this out on my own!
ReplyDeleteThank you so much for sharing this!!
ReplyDeleteLOVE IT!
ReplyDeleteThanks so much, a perfect tutorial.
Thank you so much for an awesome tutorial! I love pinterest and it's great to have this button for people to use on my blog!!! :)
ReplyDeleteI got this to work and I love it. Thanks so much!
ReplyDeleteThank you SO much! This was brilliant and so easy to do!
ReplyDeleteYou are a genius!!! Ever since I joined Pinterest I've been looking at a way to get this embedded in every post. All the tutorials I found were fiercly hard to understand & didn't work. Thank you thank you for this! It worked. I don't suppose there is any other coding to make it be at the top of a post though is there?!
ReplyDeletethank you thank you thank you!!!!!!
ReplyDeletei feel smart and savvy!!!!
Thanks for the tutorial! Really easy to follow. Love it. Just found your blog and I love it already! :)
ReplyDeleteI was able to follow the tutorial, and it's probably that I have done something wrong, BUT it is pinning the image back to the URL of my blog, but not to the specific URL of the blog post itself.
ReplyDeleteI know that this is a HUGE pin-etiquette issue (not having the pin go to the actual blog post.) Have I done something wrong???? Is there a way to specify??
Pinning goes to whatever page you are on. If you are looking at the general blog site, and not a direct post, it will only link to the blog.
DeleteNice step by step tutorial. Easy to follow and done in a second. Cheers :)
ReplyDeleteI've read several tutorials on this topic, and yours is the clearest and simplest fix I've read. Thank you so much for this clear tutorial - my button now works and looks great!
ReplyDeleteSo easy! So simple!
ReplyDeleteThanks so much for sharing!!!
❁Beth Ann❁
Taming My Flock of Firsties
Wow! It really worked....so simple!
ReplyDeleteThanks!
Ms. McBee’s Kinderbugs
i was able to put it on my blog, thanks to you!
ReplyDeleteAh, thanks!! Can't wait to try this!!
ReplyDeleteis there any way this can be done for Wordpress?
ReplyDeleteHi Christina, sorry I'm not familiar with the html coding of Wordpress blogs.
DeleteThank you for the tutorial! I just added this to my blog!!
ReplyDeleteThis tutorial is excellent! Thank you so much. And I've included a link to it in my blog post today ... I hope that's okay ...
ReplyDeletehttp://itallstartedwithpaint.blogspot.com/2012/01/who-are-you-calling-pinterest-dummy.html
Just wanted to give you a heads up!
Linda
Thank you!!!!
ReplyDeleteThis worked...of course, now I have your green button. I will have to work on updating it, but I think the color works okay on my blog!
eeee thanks julie!!!!! you rock! I think I perfected my button with your tips/code help! =) love it!
ReplyDeleteThanks so much! I don't have a clue about HTML and this was very easy to follow!
ReplyDeleteThank you so much! It worked!
ReplyDeleteThank you! This is great!
ReplyDeleteThank you thank you! So simple and helpful :)
ReplyDeleteNew follower!! Found you through Gina of Acute Designs! I just did this!! THANK YOU for the super easy tutorial!! So helpful!! http://jessicandesigns.blogspot.com/
ReplyDeleteYou are awesome, thank you!
ReplyDeleteWhich part of this directs it to Pinterest? I would love to have this for Pinify as well... any advise will be appreciated!
ReplyDeleteDeni
dbreitenbach@ gmail.com
found several tuts online to do this - yours was the easiest and it worked! Thanks!
ReplyDeleteI finally got one to work. Thanks so much!
ReplyDeleteAll I can say is that I feel really silly. I can't even find the page with those tabs to select Design> Edit HTML etc... The new blogger look has me all confused. Help!?
ReplyDeleteHi Mamie, I posted an updated version of this tutorial using the new Blogger interface:
Deletehttp://www.julieannart.com/2012/07/how-to-add-pinterest-button-to-posts-in.html
Of the many tutorials I found and tried to figure our, yours was the one that worked for me and the easiest to follow. Thank you very much for sharing :)
ReplyDeleteThank you thank you- just added it!!
ReplyDeleteIt didn't work at all for me.
ReplyDeletePlease let me know if you have any specific questions.
DeleteThank you so much, this worked perfectly for me, and it's SO much easier than having to add the button to every single post.
ReplyDeleteFab tutorial! Thanks so much! Is there any way to add the button to old posts too?
ReplyDeleteHi Misty! Tthe button should show up on all your posts.
DeleteOh, then I must have done something wrong. Will try again. :) Thank you for your reply!
DeleteOh yay! It worked - fab! I'm so happy - thank you again! :)
DeleteRediscovered this post via Twitter... thanks!!
ReplyDeleteThis is awesome! Thanks so much! xxx
ReplyDeleteThe most convenient thing about all of this is the button this code gives -does- match my layout ;P
ReplyDeletethanks SO much for sharing :)
ReplyDeleteThank you for sharing, I have spent several hours trying to figure out and yours was the easiest. Can you tell me where and what code to add to have the count next to the pin it button. Thanks!!!
ReplyDeleteThank you so much for the tutorial post! I'm barely getting started with my blog and I've been trying to figure out how to post the Tumblr and Instagram "follow me" button and such. The Pinterest is a great add too!! I really appreciate it!! Glad I stumbled on your blog thanks to Janee over at http://yellowbirdyellowbeard.blogspot.com/ Looking forward to reading more of your posts! :D
ReplyDeleteThanks for making this so easy.
ReplyDeleteThank you Thank you!
ReplyDeleteforgot to add... found your tutorial from a link at Yellow Bird, Yellow Beard. again, thank you :)
ReplyDeleteThank you so much! I found this on Pinterest and pinned it myself. I love that my blog posts will be so easy to pin from now on.
ReplyDeletethank you thank you thank you!!!!
ReplyDeleteThank you so much for this!! I have some understanding of html and I've spent quite a bit of time the last couple of days trying to figure out how to add the pin button to every post without actually having to add it to every individual post. However, I either kept find info that wasn't what I needed, or far beyond my understanding of html. You made it so understandable and easy to do. I'm definitely pinning this post, so I can refer to it later to help my friends. Again...THANK YOU!
ReplyDeleteI'm so glad I found your easy tutorial! I have been wanting to add this button to my blog posts, have attempted to pay for someone to do it (got no response from them), and you have saved the day! Huge THANKS!!!!
ReplyDeleteThank you so much!!
ReplyDeleteAwesome! Thank you so much for sharing this easy "how to".
ReplyDeleteBest,
e
Thanks so much for this tutorial! I was trying to do it on my own, but nothing would pin. This was very helpful!!
ReplyDeleteThank you SO MUCH for sharing! I was able to do it no problem!
ReplyDeleteThanks so much for the tutorial. I just did it! I admit I was afraid to hit save- but it worked! I pinned my post and shared it on facebook.. Thank you Thank you.
ReplyDeleteAllice
www.tutulands.blogspot.com
Thank you for such easy directions! The hardest part was finding the section to paste the code after, and that just took a couple minutes. Yay!!
ReplyDeleteThanks!
Annie @ Love.Laugh.Live : http://hildaanniew.blogspot.com/
I need help. LOL I followed the tutorial and I love that you made it so easy and it did put the little pin button on every post! Thanks!! However, when I hit the pin button, it show every image associated with the blog post, my logo, my creative, my other buttons, all kinds of stuff. Is that normal? I thought it would pin the actual blog post, not all the images.
ReplyDeleteYes, the Pinterest button looks for any image on the page that you are on. So you can choose the photo you are trying to pin!
DeleteAwesome. Thanks!
ReplyDeleteLaura from Dishfunctional Designs
http://dishfunctionaldesigns.blogspot.com/
Thanks, it worked great!
ReplyDeleteGreetings from Spain
Thank you, that was so helpful!!!
ReplyDeleteThank you so much! That was so much easier than the other tutorials I've read!
ReplyDeleteYou're amazing!! This is exactly what I've been looking for!!! :)
ReplyDeleteWill this show the counter as well? I added it, pinned something to see if it worked and the count isn't showing. Any thoughts?
ReplyDeleteThanks, I have googled and checked out many others explaining how to add the pin it to each post. This was so easy the way you described it, and just what I wanted, a smal pin it without the counter. Perfect!
ReplyDeleteThis sounds sooo simple! The Pinterest buttons that I have tried don't have any images in the box to select and have yet to successfully add even a blank box to my board. I have right click disabled on my blog. Is that why?
ReplyDeleteWhen I click on a individual post to pin (so it will link back to that particular post & not just the homepage) when it does pin, I can click on the image & it will link me to the correct post. However when I click on the link at the top on the pin (ex: Jenn pinned 1 hour ago from http://www….) that link doesn’t go to the correct post but yet the image does? The link has a “/” at the end of the url which messes it up, but when clicking the image it works perfectly.. Any suggestions?
ReplyDeleteYou are THE best <3
ReplyDeletewww.smithpeas.com
Thank you so much! I had spent hours trying to find directions how to add this to my blog and they were all to confusing or just plain didn't work.
ReplyDeleteThank you so much for your great information!
Thanks! I had tried following someone else's directions, placement and code but couldn't get it. Yours worked great! Thanks so much for sharing.
ReplyDeleteA million thanks to you! I have NEVER done ANY HTML EVER and you're directions were spot on. Thank you so much!
ReplyDeleteThank you so much for the directions!! They're so spot-on!
ReplyDeleteThank You! Amazing tutorial! You were very clear, confident and made it simple. Thank you!!!
ReplyDeleteThank you! I've seen other pin it button tutorials going around, but yours was the one that I could finally understand and was able to use. You're the best!
ReplyDeleteThank you for this tutorial! :)
ReplyDeletePerfect! THANK YOU!
ReplyDeletesweet! this is approximately the 61st tutorial i tried to follow, but definitely the 1st I could wrap my brain around. thanks so much!!
ReplyDeleteCool, this actually worked!!
ReplyDeleteI so want to do this, but I can't find the edit widget tab you're referring to. My blogger account used to look like the screenshot you posted, but now that it's updated I can't find it. Looking forward to your help! :)
ReplyDeleteOkay, I found it and added it. Two things: I don't entirely understand the explanation for how to change the color back to red. And, when I hit the button, it's blank. Thanks in advance for a response. :)
DeleteHi Autumn! You can replace the pin it button with any image you'd like. Just host the image you want to use (using Photobucket, Flickr, etc) and replace the link to it with "http://img.photobucket.com/albums/v419/green_tea/pin.jpg" in the code I provided above.
DeleteThanks! My more pertinent questions is how it's linking to each image on your blog. I can only get it to link to one image since the template is a universal one. Does my question make sense?
DeleteNever mind! I got it! I had to add it into the html of each post. Thanks for all of your help!
DeleteThank you! blessings, marlene
ReplyDeleteThis is the ONLY tutorial I have found that works! You rule!
ReplyDeleteThis was AMAZING!!! Thanks!
ReplyDeleteThank you SO much! This is just fantastic! It worked perfectly on my first try! :]
ReplyDeleteThank you for posting this and I've got it linked to my blogging post as well today!
ReplyDeleteThis is great!! Thank You!!
ReplyDeleteTHANK YOU!!!!
ReplyDeleteI have spent hours trying to work this out to no avail. An Etsy teammate alerted me to your post and I solved it in seconds!!! THANK YOU!
ReplyDeleteJust one teeeny tiny thing! I guess the column on my blog must be narrow and the Pin It button is now pushing the Google + button onto a second line in a kinda messy way. Could you possibly take a peek at my blog and see if you can suggest an html adjustment? Thanks so much!
ReplyDeletehttp://lisa-handmadeinisrael.blogspot.com
Thanks so much for the tutorial! I just added, and it was a breeze!
ReplyDeleteThank you. Just got it to work on my blog. I'm so impressed with myself (and you!!)
ReplyDeletehttp://sewscrumptious.blogspot.co.uk/
Thank you! So simple even I could figure it out with your easy steps!
ReplyDeletehttp://www.dutchgirlsfavoritethings.com
Worked like a charm!! Thanks so much for this awesome tutorial! I've been trying to figure this out for AGES!
ReplyDeleteThank you so much Julie Ann, I've been trying and failing to get the coding onto my blog for ages - I don't know why I couldn't get it to work, but it hasn't! And within two minutes of finding your blog I've got it up and running!
ReplyDeleteThank you!
Em x
I like this blog so much!!!
ReplyDeleteThank you so much! This was the third time I attempted to add a "pin it" button to my blog and yours was the only one that worked :D
ReplyDeleteThanks so much for the great information. It worked the first time! I still can't figure out how to do the same thing with the Follow Me on Pinterest button. Could you provide the code you used for that also?
ReplyDeleteThanks again,
Teresa
dang it, i'm so bummed. i can't find the 'post footer' in mine! it just says, group footer. any tips or thoughts?
ReplyDeleteYay, I'm so excited - just installed mine!!! So happy you provided us with this how-to!
ReplyDeleteLesley (above) - the 'post footer' part is about a quarter of the way down from the top!
THANK YOU, THANK YOU, THANK YOU!!! Your tut was by far the easiest one out there to follow :) Thanks for sharing, YOU ROCK!!
ReplyDeleteJennie {Cinnaberry Suite}
This comment has been removed by the author.
ReplyDeleteThank you so much for sharing this! Blessings, Lori
ReplyDeleteThanks so much for sharing this :) I love pinterest and also use it daily!
ReplyDelete-Tia
sewcalmama.blogspot.com
How were you able to change the color of the pin it button? I want a button that says pin it and have no idea where to get one from and then how to change the color. TY!!
ReplyDeleteIf you google Pin It Button you should get tons of images. I changed mine in Photoshop. Good luck! :]
DeleteYou made it SO easy to do this. I did it in one go! Thank you for adding cuteness to my blog.
ReplyDeleteMiss A's Kindergarten
Thank you so much for this!! Much appreciated!
ReplyDeleteThankyou so much for this. The tutorial is very each to follow :)
ReplyDeleteThanks so much. It works great! www.anainstyle.com
ReplyDeleteOMG!!! THANK YOU! I am completely inept when it comes to blogger. Your tutotial is EXCELLENT! I used it and it worked. Thank you !
ReplyDeleteI am your newest follower.
Awesome! Thanks for sharing this!
ReplyDeleteThanks Julie Ann! You made it so clear and easy :)
ReplyDeleteI just went to do this...but now that blogger has a different layout I cannot seem to figure out what to do. Can you help? Please!!
ReplyDeleteWhen you're in your Blogger dashboard, click "Template" on the left. Then click "edit HTML," and when it asks if you're sure, click "Proceed."
DeleteThen, make sure you check the box toward the top that says "Expand Widget Templates" so you can find the proper "post-footer" div! (Press ctrl + f so you can just type it in and find it!) Then paste the code right after it when you do :)
I hope it helps and works for you! I just added mine.
Hi Sandy, I posted an updated version of this tutorial using the new Blogger interface:
Deletehttp://www.julieannart.com/2012/07/how-to-add-pinterest-button-to-posts-in.html
So helpful... my first time in the HTML code stuff. You made it not scary. Thanks
ReplyDeletehttp://makingthebasicsfun.blogspot.com/
Thanks you so much!!!! I have tried a few tutorials and haven't had any success! You are a genius!
ReplyDeleteThank you!!! I put mine on the left side without problem, very clear tutorial :)
ReplyDeleteThank you so much! So helpful!
ReplyDeleteThank you so much♥
ReplyDeleteThank you very much!! works perfectly and the color combined with my blog, thanks!
ReplyDeleteThank you so much for sharing.
ReplyDeleteThank you sooooo much! I have been searching for code that works. yours is the first to work. Moved it to the left and found a slightly larger image.
ReplyDeleteThis is absolutely wonderful! Thank you so much for sharing! I love it!
ReplyDeleteLaura
TIPS: Teach, Inspire, and Prepare Students
Great tutorial! It worked when I tried : )
ReplyDeletedidnt work for me! i cant see it to show up anywhere. i fail.
ReplyDeleteThank you so much for sharing, worked like a charm! :)
ReplyDeleteHola, me gustaría este botón en mi blog, pero no se como ponerlo en la nueva plantilla HTML de Blogger. Puede ayudarme? Gracias!
ReplyDeleteI still can't get it to work. My format in Blogger looks different from the one you posted. ARGHHHH! I am so frustrated. Any advice?
ReplyDeleteMy question is how do you add the pinterest button of your choice to your website. I mean the button you have under your picture to the left?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteAwesome post! Thank you!
ReplyDelete