How To: Add Pin It Hover Button To Blogger Photos

I don't typically write computer how-to's because, well, I'm not very knowledgeable.  I have, however, received many emails requesting the instructions on adding a hovering "pin it" button to photos so I'm sharing here rather than answering each individual email.  There seems to be confusion as to where you add the code. 

I do not know if the directions are the same for Wordpress - I have no experience with that platform.  This works on all blogger templates except Dynamic Views {you can't customize it}, and doesn't work on photos smaller than 200px X 100px.

Here we go.

For those who are not currently using the Pinterest Board or Profile Widget, here are the instructions {if you are currently using it, you have most of the code}:

    1.  While looking at the main page of your blog, click on the "design" tab on the top right.
     
    2.  First, you'll want to back up your template.  ALWAYS back up your template before you alter any of it's code.  This way, if you make a mistake, you have the original template saved.  Go to "template" and click on "backup/restore" {on the top right of the screen} and save somewhere on your computer where you can find it again if needed.
     
    3.  Next, while looking at the same screen you should see a "Live On Blog" on the left side of your screen.  This shows a screenshot of your blog.  Click on the "edit html" button below this.
     
    4.  When your template is open, hover your cursor over any of the code, click once {to set your cursor in the code} and press Control + F at the same time {Command + F for a Mac} to open a search box in your template.  It will make it much easier to search via search box then going through all the coding.
     
    5.  Into the search box, enter
      and press Enter.  You will now be brought to the portion of your code where this exists.  Mine was right around line 188. 



    6.  Make a line immediately above the

    and insert the following line of code: 


    

    7.  Press the orange "save template" button at the top to save.

    8.  Go to your blog, hover over the photos and make sure the "pin it" button appears.
    

    8 comments:

    Creatively Country said...

    Thank you so much for posting this! I've wondering about this for a while! :)

    Dani said...

    That sounds excellent - thank you very much. I'll check mine out tomorrow when I'm on the laptop.

    Our Neck of the Woods said...

    Thank you for this! I've always been confused by where to add the code. It scares the daylights out of me to mess with the html settings but I might give this one a go. Normally I just add the button under my photo in each post, but I would like to have the button hover over the image.

    Mary Woollard said...

    Thank you for posting this!! I've been wondering how to do it! Yay! :)

    Mary said...

    Good to know. Thanks!!

    Sandra Morris said...

    Thank you for passing on the information!

    The Little Acre that Could said...

    Pinned! :-D

    Dani said...

    It works. It works. Thank you so much :)