TUTORIAL : HOW TO PUT A "PIN IT" BUTTON ON YOUR BLOGGER POSTS.

This is for all of you people who are as addicted to pinterest as I am.  I looked everywhere for a tutorial on how to add a pin it button to my post.  I only found one tutorial that had the new format for blogger.  It was a great tutorial but  the HTML coding would not work on my template.  I ended up making my own button  in photoshop and taking bits of coding from different places until I finally came up with something that worked. 

You are welcome to use the coding I used with the pin I made but you may choose to use another pin or create one of your own.  If you decide to create your own, you will need to upload it to a hosting site like photobucket.

First, let me say don't feel insulted by this tutorial.  Many people are intimidated when they get to the box that says " recommended for advanced users only - go to template designer and add CSS under the advanced section."  Don't let that fool you.  You will have the option to preview your blog BEFORE you make any permanent changes.  If it is doesn't work like you wanted it to, just don't save it.  If you save it and decided to move it or delete it later, all you have to do it to go back and take the coding out that you put it.  It's that simple!  Really, it is.

OK....HERE WE GO....

 1) Go to your template > click htmll

2) Click on the "proceed" button

3) Click on the expand widget templates box > click "ctrl + f " which will open the "find" box.  You will need to use this since it will carry you to the correct html coding.

4) You want to copy and past this ......  div class='post-footer'   .......... into the find box.  It should carry you to the correct place in your coding > Copy and past the coding below as shown.

There are three different buttons to choose from.  Choose the one you want and copy and paste that coding.

<div><a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());'><img alt='Pin It' class='aligncenter' src='http://i977.photobucket.com/albums/ae256/salittle_photos/pinitbutton.jpg'/></a></div>

<div><a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());'><img alt='Pin It' class='aligncenter' src='http://i977.photobucket.com/albums/ae256/salittle_photos/pinitbutton.jpg'/></a></div>

<div><a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());'><img alt='Pin It' class='aligncenter' src='http://i977.photobucket.com/albums/ae256/salittle_photos/redpinitbutton.jpg'/></a></div>

Here is the code for the "follow me" button if you would like to add it.
It can be added below your pin it button or you can put it in as one of your widgets.

<a href='http://pinterest.com/salittle/'><img alt='Follow Me on Pinterest' height='26' src='http://i977.photobucket.com/albums/ae256/salittle_photos/follow-on-pinterest-buttoncopy.jpg' width='156'/></a>

(You will need to replace the highlighted area with your own name - you can go to your pinterst account to see how it's listed)

It's time to preview and then save your code.

That's it .....Cross your fingers and hope it works.  If it doesn't work, you can go back and find your code and tweak it or deleat it.