Today I’m doing something a little different for me – I’m sharing some html/design knowledge. I’m no professional when it comes to this stuff, a lot of html coding I know nothing about. However, when I gave my blog a facelift a few weeks ago, I intentionally did not buy the code for a pin it button, determined to figure out how to do it on my own. See that gold button that pops up when you hover over one of my pictures? Yep, I designed and programmed it into my blog template all by myself. And it wasn’t hard. So today I’m showing you how to create your own pin it button, or if you want to use one I’ve created just scroll to the bottom, I’m sharing the code with you – for free!
First you need to design the image you want you pin it button to be. I wanted a gold glittery circle with the words Pin It! in the middle. Both of these are fairly easy to make. I google searched gold glitter, and found a good image that I saved. I then opened PicMonkey (free version), clicked edit, and opened the gold glitter image. I then clicked resize image, and used the proportions 75×75. Then under the frames tab I clicked round corners, and turned my square into a circle, and clicked the tab that said transparent background (this step is important). I then simply added the text, and saved.
You can use the Pinterest P, write out Pin It, write out Pin, use a circle background, make a cloud background, find a watercolor background, add an arrow, tilt the text, use different colors… take this chance to show off your creativity!Next upload this picture to a photo hosting site, I use TinyPic. Take the image url, and insert into the following template from BloggerSentral.
//
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
This code needs to be installed above the /body tag which will be towards the bottom of your blogs template code. Want the image to pop up in the corner of a picture? Simply change where it says center to say topleft, topright, bottomleft, bottomright.
Have no interest in designing your own but want a free gold glitter pin it button? Well okay I don’t blame you. Paste the code above in your blog template, but use this as the image url: “http://i60.tinypic.com/29dfkhk.png”.
Great post! This is something so easy that everyone can do to increase their blog views!
Thanks for the info, the wonders of PicMonkey never cease!!!!
Thanks for sharing this, Claire! I just pinned it for future reference. Love anything glittery 🙂
Me too!
I love picmonkey! Thanks for sharing!
Pic monkey and Canva are such great tools for novices like myself.
I LOVE them!
Love this. I am going to try this. Thank you.
How cool is this! Love the gold pin it button.
Thanks for sharing! i've been wondering how to do this!
Awesome post! Thanks for sharing this – love this button 🙂
Oh this is an awesome tutorial! I am going to try this out!
Awesome tutorial! It took me so long to figure out how to add the regular hovering pin it button to my site and once I found out you can customize your own I went crazy! Pinterest is the best <3
Awesome! Thanks for sharing your tutorial 🙂
Love PicMonkey too, great way to customize and make your blog truly your own.
I need to figure out how to do this! I've been trying to simply figure out how to make my photos 'pinnacle'!
This is awesome! I really want to customize my blog more. Thank you so much for sharing!
Love these! Thank you for sharing the tutorial!!
What a useful tutorial! Every blog should have a pin-it button 🙂
This is awesome! I've seen a few like this. I love what you've done here. I couldn't live without the PinIt button and it's nice to make it your own for branding.
It's always so much fun to customize your blog! Thank you for sharing!
Awesome! I've always been curious how to do this! Thanks for sharing!
Your blog design is perfect <3 I have a designed that does all mine but when I first started out I did my own pin it button & was surprised that it wasn't too hard! Love this tutorial!
Thank you!!! Doesn't it feel good to figure it out on your own?
I need this! Thanks so much! :). I'm definitely going to be doing this soon! 🙂
Thank you! i've always wondered how everyone does that button on their pictures! So cute!!!
Thank you for sharing! I really want to create something like this for my blog, so again thank you!! <3
I have WordPress, and I tried it out, but I can't figure out where to put it. 🙁
Sorry I'm just now seeing this! Can you edit the HTML of your blogs template? I did this on blogger but did some research and read it should work for other platforms as well. Email me if you want to talk more clairecervino@gmail.com
I am going to try this during my blog break. Thank you!
Good luck, let me know how it goes!
This is a fabulous tutorial!! Thank you for sharing 😀
Great post, this tutorial is so helpful for so many bloggers!