Friday, October 19, 2012

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:  
  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

5 comments:

Shannon White said...

Oh you are soo Clever Miss Shirley!! 8-) I have been wondering how to do this! Hope you have been doing Wonderfully my Sweet friend! ANd thanks so much for your Wonderful comments on m blog! Sure made my day to hear from you! 8-)

Hugs
Shannon

Benzi said...

You are always so full of good tips and advice. Thanks, Shirley!

Colleen Dietrich said...

You are SO helpful, Shirley! I want to do this. I'm going to try it later today.

Anonymous said...
This comment has been removed by a blog administrator.
Unknown said...

great nice post and card is awesome......
scrapbooking

Related Posts Plugin for WordPress, Blogger...