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”.