Sunday, September 16, 2012

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!

3 comments:

  1. Thanks, this is helpful! I just started craft blogging and am scared to touch the HTML...

    ReplyDelete
    Replies
    1. I'd suggest making a backup of your blog HTML just in case something does go wrong, then you just have to upload that and it will be back to where you were when you first started. OR create a test blog where you can play with and learn HTML and then when you get it figured out do it to your live blog.

      Delete

Thanks for stopping and leaving a comment! I LOVE reading comments! {They also help me know what you are interested in reading on my blog!}

Comments on posts older than 14 days are moderated. Other comments may be removed if they are inappropriate or spam. I do read all comments but can't always respond to each one because I don't get online very often.

My email can be found on my 'about me' page if you would like to contact me or you have a question.