A Pin It Button For Each Photo/Card In Your Post

I have been searching for months for a code that would allow people to pin any of my cards in my posts without my having to code each one individually.  I have tried several codes found while Googling.  I would follow the steps, get the button, but when clicked on it went nowhere.

Yesterday I found this lady's blog, Code It Pretty.  What a name, I kid you not and his coding worked perfectly, with one exception.  The exception is if you use Inlinkz in your post for supplies, it adds a button so those can be pinned too.  :[  At first I was upset about it and then I thought, well maybe people want to pin supplies too.  These are for Blogger templates only as far as I know.  You can follow the instructions on Code It Pretty or follow mine below.  I was more detailed for those not so used to working with their templates, etc.:

1. Go to the Dashboard for your blogs.
2. Click on the blog on which you want to make changes.
3. On the left side click on Template.
4. In the upper right-hand side of the page see the Backup/Restore tab.  Click on it.
5. Click on Download Full Template.  
6. Click next to Save.
7. Clilck on OK. Make a note of the name of the file and where you are saving it.
8. To the right you will see the Customize and EDIT HTML tabs.
9. Click on the EDIT HTML tab.  You will see a caution statement. All I can say at this point is if I can do it, almost anyone can.  :-)
10. Click on Proceed.
11. In the upper left hand corner put a check next to Expand Widget Template:
1. Find <b:skin>. I use my Find feature in the Edit drop down in the tool bar at the top of the browser.
2. Copy the code below and paste it just above the <b:skin>:
   

   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

3. Save and close your template by clicking on the x in the upper right-hand corner
12. In the left-hand column click on the Layout.
13. Copy the following code below:  
    

    	<script type="text/javascript">
    	$(document).ready(function() {
    	$('.entry-content img').each(function(){
    	$permalink = $(this).parents('.post-outer').find('.timestamp-link').attr('href') || $(location).attr('href');
    	$title = $(this).parents('.post-outer').find('.entry-title').text();
    	$(this).addClass('pinme').after('<a href="http://pinterest.com/pin/create/button/?url=' + $permalink + '&media=' + $(this).attr('src') + '&description=' + $title + '" class="pin-it-button" count-layout="horizontal"></a>');
    	});
    	});
    	(function() {
    	window.PinIt = window.PinIt || { loaded:false };
    	if (window.PinIt.loaded) return;
    	window.PinIt.loaded = true;
    	function async_load(){
    	var s = document.createElement("script");
    	s.type = "text/javascript";
    	s.async = true;
    	s.src = "http://assets.pinterest.com/js/pinit.js";
    	var x = document.getElementsByTagName("script")[0];
    	x.parentNode.insertBefore(s, x);
    	}
    	if (window.attachEvent)
    	window.attachEvent("onload", async_load);
    	else
    	window.addEventListener("load", async_load, false);
    	})();
    	</script>

    view raw pinterest.js hosted with ❤ by GitHub
14. On the Layout page click on Add A Gadget.  Go down the list to HTML/Javascript and click on it.  In the Content Area right click and paste the code you copied from above. You can decide if you want to give it a title or not.  I didn't.  I pulled to the bottom of my gadgets row.  If I can't remember what it is, I can click on the Edit and see the code with Pin-it in it and that tells me.
15. Click on the Save in the lower left hand corner.  Click on Save Arrangement in the upper right side of your Layout page.
16. View your blog and you should see the Pin It button next to any photos in your posts.

If you have any problems, email me, and I will try to help.  Hope I helped someone and if you here how to stop the Inlinkz pin it buttons, let me know.  :-)  Happy pinning.  Off to stamp. Thanks for stopping by to look and share.

 Shirley