Adding a Custom "Pin It" Button

This is a step-by-step tutorial for adding a “Pin It” button to your blog on Blogger. I used this on the simple template. Before starting this process make sure you backup your Blogger template first.

Backup your template
1. In the dashboard, select Template.
2. Select to Backup/Restore.
3. Select the Download Full Template button.
4. Choose your location to save the file, then select Save.
Adding the “Pin It” button
1. In the dashboard, select Template.
2. Select Edit HTML.
3. Scroll down, close to the bottom, and find this: 
Copy this code provided by BloggerSentral and paste into the template code right below the  code. It should look something like this:



//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>

http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js
This code is set to automatically place the button in the center of your image. To reposition the button, just replace the text center with toplefttoprightbottomleft, or bottomright.
4. Select the Save Template button.
5. Select to Close.
6. Select View Blog and hover over a picture in your post. The button should appear.
If you like this, you can keep the original button. If you’re anything like me, you may want to customize it to match the theme of your blog!
Find the image you want to use, or create your own. You’ll need to have an HTML link to your image. Now, I am by no means an HTML expert. So…this was how I found a way around that.
Go to your Blogger dashboard and select New Post. It will automatically be in the Compose mode (top left). Leave it like this for now. Select to Insert Image into the post. Pretty, right? Ok…now select HTML. It should jumble your image into a code like this:
It makes no sense to me; however, there is a source for the image (highlighted above). That’s really all you’ll need. Just copy that string of text, and save the post as a draft in case you need it in the future. I chose to title my post with “DO NOT PUBLISH” so I wouldn’t accidentally publish it to my blog.
Adding the custom button
1. Select Template in your dashboard.
2. Select the Edit HTML button.
3. Find this code: var bs_pinButtonURL = “http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png“; and replace it with your new image code.
6. Select to Save Template.
7. Select Close.
Now you’ll want to view your blog and make sure it worked! *Fingers crossed
I know this looks like a lot of steps, but it’s really pretty simple. It’s just making sure that you have the codes pasted in the right spot. For me, it took some time to find the text and I had to play with inserting the code a few times. Once I got that figured out, it didn’t take any time at all to get the custom image in place. For anyone that doesn’t have much experience wiht HTML (um, can we say confusing?), my suggestion is to just take your time. It’s easy to get overwhelmed, but trust me, if I can figure it out so can you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s