Thursday, October 20, 2011

How to Make a Link Button

    In this post, I will show you how to make a link button for your Blog. It is really easy!
I use the same HTML when I make ads to link to friends' pages and/or business sites. I just omit the HTML box.

Here's what you do:


    First select your picture, make your own button, or find the image that you want to use. Upload it to a photosharing site. I use Photobucket. 
TIP:  Make sure you size your button before you are ready to use it. I find that images of about 150x150px are best, as they will usually fit easily in most sidebars.


Example Button


Once your image is sized, uploaded, and ready to go, you can proceed as follows:


Go to your Blogger dashboard and click design to go to the layout page.

Click on Add a Gadget and select HTML/Javascript.

If you choose to add a title, such as: Grab My Button, or whatever you wish, add it in the title space.

Paste the following HTML, replacing the words your URL with the URL to your site, and the words direct link to your image with the direct link copied from your photobucket (or other) web-hosted image. 
Make sure you leave the quotation marks in there.


<a border="0" href="your URL" target="_blank"><img src="direct link to your image"/></a>


It's as easy as that!

Now, if you want to make an HTML box under your button, so that others can grab it, just do this:

Copy the HTML that you just created and paste it into the following HTML in place of  your HTML.


<textarea rows="4" cols="20">yourHTML</textarea>


Go to your Blogger dashboard and click design to go to the layout page.

Click on Add a Gadget and select HTML/Javascript.

Paste the HTML into the box, and save it. Do not title this box.

Still in layout, Drag your new gadget box under the gadget box of your button and preview it and save it.

Your done! Easy, right? Now go create your own! :-)