I was having the same problem with this plugin, when I used the HTML shortcode in a post, there was a bunch of empty space before and after the donate button, and it looked terrible. When you look at the HTML code the shortcode places in your post, this is what comes up:
<pre><code><!-- Begin PayPal Donations by https://www.tipsandtricks-hq.com/paypal-donations-widgets-plugin -->
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div class="paypal-donations">
<input type="hidden" name="cmd" value="_donations" />
<input type="hidden" name="bn" value="TipsandTricks_SP" />
<input type="hidden" name="business" value="youremail@email.com" />
<input type="hidden" name="amount" value="9.00" />
<input type="hidden" name="rm" value="0" />
<input type="hidden" name="currency_code" value="USD" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online." />
<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
</div>
</form>
<!-- End PayPal Donations -->
</code></pre>
What is happening I think is that each of the “hidden” inputs are taking up a certain amount of space based on the CSS of your theme. To fix this, remove the <pre> tags, and a new <div style="display: none;">.
Obviously, any time you want this button in your post, you now can’t use the shortcode, and instead, after typing your post in the visual section of the editor, switch to the text tab and add the following code:
<code><!-- Begin PayPal Donations by https://www.tipsandtricks-hq.com/paypal-donations-widgets-plugin --></code>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div class="paypal-donations">
<div style="display: none;">
<input name="cmd" type="hidden" value="_donations" />
<input name="bn" type="hidden" value="TipsandTricks_SP" />
<input name="business" type="hidden" value="wesborland1234@aol.com" />
<input name="amount" type="hidden" value="9.00" /> <input name="rm" type="hidden" value="0" />
<input name="currency_code" type="hidden" value="USD" />
</div>
<input alt="PayPal - The safer, easier way to pay online." name="submit" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" type="image" /> <img src="https://www.paypal.com/en_US/i/scr/pixel.gif" alt="" width="1" height="1" />
</div>
</form><!-- End PayPal Donations -->
Disclaimer: This should fix the problem visually, but I have not actually tested to make sure the button is still functional, although I see no reason why it wouldn’t be. Hope this helps!
