Blogging Tips | Add The "Pin It" Button

If you are like me, the thought of editing the HTML code to your blog is quite terrifying. But let me reassure you...this is perfectly safe and easy AND there is a "preview" button to make sure you like where the button goes. If not, you can always click "clear edits" and the code you entered will be gone and you blog will be back to the way it was before you started playing with the code.

For NO reason at all should you push the "close" or "save template" buttons UNLESS you have the code exactly where you want it and have already PREVIEWED it!!!! This is super important!

Now...let's see if I can get this all written down for you!

Step 1

You will be on the homepage of your blog. Click on "Design".

Step 2

Now you are on the "Template" page. Click on "Edit HTML."

Step 3

All of the text in the yellow box is pretty much to discourage people from messing with the code so they won't screw up their blogs...but if you are following a tutorial or you know what you are doing (or if you are adding a Pin It! Button!!!) click "Proceed".

Step 4

At the very top of all the HTML (not inside the box, just at the top) there will be a little spot to check. Check the box next to "expand widget templates". Why? I have no clue...it just seems to be what makes this thing work.

Step 5

Notice I have TWO areas surrounded with the red circle. The first one you need to notice is the one on the right of the screen surrounding the scroll bar thingy. About halfway down this massive amount of text there will be a little line you need to look for...that is what is highlighted in the second red circle. But in case you can't read it...this is what it says: <!-- quickedit pencil -->. Do you know about the quick edit pencil on Blogger posts? In you don't: you can click it to immediately be taking to the edit-friendly version where you can update or delete something from the post. ...back to the topic. Now that you've found this little line of HTML proceed to step 6.

Step 6

The next thing you need to look for is FIVE rows of text below the last piece you found (remember: <!-- quickedit pencil --> ). This new part of code is really short: </b:if>.

Step 7

Click next to the code and push "enter" on the keyboard. (Notice the empty space after the small code.)

Step 8

We're almost done! Now you need to copy this code:

<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</a>

<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>

<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

<script type='text/javascript'>

function run_pinmarklet() {

var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);

e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);

e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);

document.body.appendChild(e);

}

</script>

Step 9

And paste the code in the empty line you created in step 7.

Step 10

Preview the code!! When you click on "preview" it will open a new window and it will be a preview of your homepage. Scroll down to the bottom of the first post. There on the right will be your button! (I tried everything I could to get it before the Google button, but alas, it is off by itself. It really doesn't look bad though.)

Step 11

Go back to the page where you were editing the code (you will have to click on the tab at the top of your screen). Click orange "Save template".

Congratulations for being brave and navigating through this very difficult task!

P.S. This is my very first tutorial using photos from my computer screen (I had to hop over to Youtube to figure out how to do this by the way! But the video linked is super helpful, although silent.) It is a TON of work to put together a tutorial like this. I had NO clue! I have a lot more respect for people who take the time to put these together! And I know I won't be making these very often!!!

P.S.S. If you have a suggestion for another type of tutorial for blogging let me know and I'll see what I can do! Even though it was hard it was a GREAT learning experience!

Special thanks to MaryBeth over at SecondHand Couture for the only DECENT tutorial I saw on how to do this!