How to Use the Official Pin It Hover Buttons on Blogger

To get your own button code, go to the Pinterest Widget Builder. Make sure that the "Button Type" option is set to "Image Hover", then choose your favorite button style.

You get a choice of small, and large rectangle buttons in Grey, White or Red or a Circle button.

You can Preview each button to choose the right one for you!
Once you've chosen your button, copy the code in the grey box below the preview image.

Back up your Template!

From your Blogger dasboard, go to template and click on Backup/Restore in the top right corner.  Save the .xml file

Open the Template Search

Next, open your template by clicking the Edit HTML button below your Love on Blog Screenshot.

We're going to use the template search feature to search your code. 

1. Place your cursor on the template code.

2. Click Once.

3. Press CTRL F at the same time (PC) or Command and F (Mac)

The search box will open up in the top right corner of the template editor.

Enter </body> in the search box, then press enter.  The code will jump to the </body> tag in your template and highlight it in yellow.

Add the Code

Immediately above the </body> tag enter the code you got from Pinterest. Before you save your template, remove the word 'async' from the code.

THIS IS IMPORTANT - your template will not save unless you remove the word 'async'

Press the orange Save Template button up top to save your template. Then go look at your blog.  You should see the Pin It buttons you chose in the upper left corner of your images when you hover your cursor over each image.

Enjoy!

The information in this blog post, were taken from: CodeitPretty - thank you so much for such an amazing, informative blog.