Blogger I.Q.

Blogger and WordPress Tips

DIY

How to resize PayPal button?

by 1 Comment

PayPal usually allows you to customize the look and text on their buttons. Once done, it gives you the HTML code that you can copy and paste on to your website. But your PayPal button might sometimes look huge or abnormally big which covers your website’s entire page, which calls for us to resize PayPal button.

Here, sometimes the default settings for the CSS of your buttons in your website’s theme settings is usually the cause for the PayPal button to show abnormally big.

However, we can customize the button’s HTML code individually to make it appear normal.

Editing HTML to resize PayPal button is the answer.

Don’t worry it’s not difficult. Anyone without HTML knowledge can also easily make this change.

Here’s how:

<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_cart_SM.gif"  name="submit"
alt="PayPal - The safer, easier way to pay online!" 
style="border: 0px none ; padding: 0px; width: 96px; height: 21px;"/>

The code shown in Red font above is what we need to add. The ‘style’ attribute ensures that the PayPal button shows normally on your blog or website. Feel free to adjust the width and height dimensions as needed.

This way we can resize PayPal custom button that shows normally.

How To Add A Clickable Image in WordPress Sidebar Widget (Manually)

by Leave a Comment

Last Updated: Feb 5, 2017 @ 7:52 am

There comes a time when you may want to:

  1. Add a custom image to your WordPress sidebar as a clickable image that can lead to a downloadable document or a web page destination or
  2. Have an image on your sidebar to display your profile picture or
  3. You might want to promote some product and give a hyperlink to the image which can take your visitors to the product download page.

Did any of the above points express your current situation? If yes, you will have your answer in this post.

How to add an image in WordPress sidebar widget

Though you have to work with a little bit of HTML tags here, don’t worry we’ll try and make it as simple as possible.

What are the HTML tags and attributes used to show an image on the WordPress sidebar?

  • “a” tag,
  • “href” attribute,
  • “target” attribute,
  • “img” tag,
  • “src” and “alt” attributes.

These are the 6 HTML nuts and bolts required for our setup.

The ‘img’ tag has 2 attributes: ‘src’ and ‘alt’. ‘src’ will take in the hyperlink to your image and ‘alt’ takes care of the alternate name for the image. And, the ‘a’ tag takes care of the hyperlinking (clicking on image) part wherein ‘href’ will handle the hyperlink part and the ‘target’ attribute will ensure that the destination link is opened in a new or separate tab or window.

Before we begin, get the image you want, uploaded and ensure you have a direct hyperlink to it. If you don’t know how to do that, here is a post I have written on how to use Dropbox to host your images. Else, see the blue box below on how to add media to your WordPress blog. I prefer the Dropbox way as it is more effective in terms of page speed and also I need not fill my hosting service provider with images and keep filling my hosting space.

How to add pictures to your WordPress blog manually

Go to Media > Add New to upload your image. After uploading, click on ‘Edit’ – then you can give your file name, alt and caption attributes. Now, copy the hyperlink to your uploaded image from the right side of the screen.

On your WordPress widget area, click on the widget you want to use to display your image – it could be your sidebar, header or footer area. For this post, we will use the sidebar area.

Use the below code: Just insert the hyperlinks as applicable to you. Only change text that are given in bold. Leave the rest as is.

<a href=”insert your hyperlink here” target=”_blank”><img src=”insert your image URL here” alt=”sample image”/></a>

We hope this article helped you in solving your problem on adding an image to your WordPress sidebar. If you liked it, please share it with your colleagues and friends using ‘sharing’ options given in this page.