Adding "Pin It" buttons to images + FREE Pin buttons

Have you ever hovered over an image on a website, and found that a Pintrest logo/image popped up? Well, this tutorial will show you how to implement that same thing on your blog. Pinterest is an up and coming social sharing site that is already gaining huge popularity over the web, so it's smart to start using it now to help gain new readers and views on your posts. At the end, I have included free buttons that you may use if you do not want to make or find your own.

Tutorial:
After changing the highlighted URL   to your own URL, insert the below script just above the </body> tags in your template. You do this by going to template>>edit HTML. Then save the template. You can change the position of where the button shows up by editing the "center" tag with the following positions:

• topleft
• topright
• bottomleft
• bottomright

Script-

<script>
//<![CDATA[
var custom_pinit_button = "http://i.imgur.com/e4dnY6O.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script id='pinit-img-button' src='http://helplogger.googlecode.com/svn/trunk/pinterest-button1.js' type='text/javascript'>
// Visit helplogger.blogspot.com for more widgets and tricks.
</script>

Here's what the code looks like in your template:

Thanks to http://www.helplogger.blogspot.com for coding the script.

 

 Here are some free Pin buttons you can use to get started:

To download the buttons: Right click them>> click "save as",>>save them to your computer>> and then upload them to a photo sharing service such as Imgur. Note: These are larger than they actually are for display purposes, they are a normal size when downloaded.