How To Create HTML Banner for Free for Blog or Business?

To create HTML banner for free is not that difficult.You will be able to make it by yourself online.But you need to know the real tips and you need to do it in a proper way.I was also in need of a HTML banner and i was searching online to know how to make it online for free.After searching for a long time i have discovered the way through which i am now able to create HTML banner and i am showing my banner in different website for my blog advertisement.I have also added one HTML banner to sell my advertisement space in my blog today.

Steps to Create HTML Banner for Free:

1. To create one HTML banner, at first you need to have one image file of your banner.You can make one banner using the “Microsoft MS Paint”.Previously i have described in my blog post about “How to create one banner in ms paint“.You can read that post and i am sure you will be able to create one banner.You can see below that i have also created one banner image file like below:

2. Now you need to save that banner image file to your computer.

3. Now you will have to go to this address image HTML code generator to create the HTML code.

4. After clicking that link you will go to an window where you will see two options.

a.Enter the URL and b.Upload Image

As you want to upload image from your computer so you are interested about the second option.So,at first click on the “Browse” option and select the path of your image.Then upload your image.The window will be like below:

5. After clicking on “Upload” your image will get uploaded in one free image host which is “ImageShack” and the HTML code will appear in a new window like below:

Now you need to copy the HTML code and you will get one code like below:

<a target=’_blank’ title=’ImageShack – Image And Video Hosting’ href=’http://imageshack.us/photo/my-images/11/techntechieadbanner.jpg/’><img src=’http://img11.imageshack.us/img11/2918/techntechieadbanner.jpg’ border=’0’/></a><br>Uploaded with <a target=’_blank’ href=’http://imageshack.us’>ImageShack.us</a>

6. But you are not interested about the whole part of the code.You need only the code which are red in color in the above code.So, your code will be like below:

<img src=’http://img11.imageshack.us/img11/2918/techntechieadbanner.jpg’ border=’0’/></a>

The above one is my code.For your case the image name will be different but the main thing is that you need to copy from <img src= and the closing tag is </a>

7. The above code is the HTML code for your image.You can use this code in any website to show the image that you have created.

8. Now if you want to link this image with any specific page then you need to add the below line to your code:

<a href=”the page url that you want to link”><img src=’http://img11.imageshack.us/img11/2918/techntechieadbanner.jpg’ border=’0’/></a></a>

You can see from the above code that the extra code that i have added are in green.You just need to put your desired url in the place “the page url that you want to link“.

General format:

<a href=”the page url that you want to link”><img src=’Your image source address’ border=’0’/></a></a>

8. Now this is your final HTML code for your image and you can use it in any website.

9. If you want to use it in a WordPress blog then go to widget section and then add one “TEXT” widget and copy and paste the above code in that widget and you are done.

Hope the above instruction will help your to make an wonderful HTML banner which you can integrate in any blog or website.

If you think that this is helpful then do not forget to share this in social media for your friends.Leave your comments in the comment field.Your comment is what i want in return.

Himadri Subrah Saha

Himadri is an ICT Professional who writes for his technology tips & tricks related blog TechnTechie. Though it is hard to balance time in between professional life and blogging, he still manages time to work for his own blog and writes almost regularly. The dashboard of this WordPress is the only place where he does not feel tired! Read my other blogs @ PetCare and Teleinfo