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 blood, sweat and tears, figured it out! I wanted to share this tutorial because Pinterest is a huge promotional tool that I use every day.
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 :)
Wow 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!
ReplyDeleteExcellent! Thank you!
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!?
ReplyDeleteOf 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!
ReplyDeleteThank you!!! So easy!!!
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!
ReplyDelete