Adding Pin it Button to images

#1 Add your Image.


#2 Click on your image and select "Add Caption".

Once selected the bottom of your image will show this:

#3 Create Pin It Button by going to http://business.pinterest.com/en/widget-builder#do_pin_it_button.

     a - Select type of button you are making

     b - Button Type should be "One Image", Appearance should remain the same, and switch the Pin count to show "Beside the Button".

c- Fill in URL (Page address, ssbookreviews.blogspot.com/YEAR(2014)/MONTH(05)/yourpostsspecificandaddress(BookReviewToAGodUnknownSteinbeck).HTML), Image address and Description. 

     d - press "Build It". It will show you a preview of what the button will pin, this is not what you will see on your post. Below the preview will be the code for your fancy new button.

#4 Back in your post switch from Compose to HTML and locate the "Add Caption" text in your image code.

Note: The text is going to be black. If you had trouble locating your image code for your button, you can see an example of where to find it in pink below. This is the code for the "To A God Unknown" image.

<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRXCAh8wT_Tm2zIqk5Z4acdDRfQaXVHx2VmgZkSBI89LERNqtxoknmujjNeim9Di1aoySYBwoZyET1aZTJRvMobtiuqGXbFBKLFu_SKgWh-2mwDSGr0NxQOCvitPWwK0L97F2KYjOCf-Bq/s1600/9780140187519M.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRXCAh8wT_Tm2zIqk5Z4acdDRfQaXVHx2VmgZkSBI89LERNqtxoknmujjNeim9Di1aoySYBwoZyET1aZTJRvMobtiuqGXbFBKLFu_SKgWh-2mwDSGr0NxQOCvitPWwK0L97F2KYjOCf-Bq/s1600/9780140187519M.jpg" height="520" width="340" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Add caption</td></tr>
</tbody></table>



#5 Replace "Add caption" with your Pin It Button code from Step 3d. Button code shown in blue below.

<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRXCAh8wT_Tm2zIqk5Z4acdDRfQaXVHx2VmgZkSBI89LERNqtxoknmujjNeim9Di1aoySYBwoZyET1aZTJRvMobtiuqGXbFBKLFu_SKgWh-2mwDSGr0NxQOCvitPWwK0L97F2KYjOCf-Bq/s1600/9780140187519M.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRXCAh8wT_Tm2zIqk5Z4acdDRfQaXVHx2VmgZkSBI89LERNqtxoknmujjNeim9Di1aoySYBwoZyET1aZTJRvMobtiuqGXbFBKLFu_SKgWh-2mwDSGr0NxQOCvitPWwK0L97F2KYjOCf-Bq/s1600/9780140187519M.jpg" height="520" width="340" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fssbookreviews.blogspot.com%2F2014%2F05%2FBookReviewToAGodUnknownSteinbeck.html&media=http%3A%2F%2F1.bp.blogspot.com%2F-_Q40DW2AjvI%2FU3TbgRId9EI%2FAAAAAAAAHgY%2FwZh7NWW3als%2Fs1600%2F9780140187519M.jpg&description=Book%20Review%3A%20To%20a%20God%20Unknown%2C%20by%20John%20Steinbeck" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script></td></tr>
</tbody></table>



#6 Switch back to Compose and admire your new button!