HOW TO MAKE AFFILIATE BANNERS AND DISPLAY ADS ALIGN IN CENTER USING HTML CODE


Last Updated on January 13, 2021 by Anjum



User Experience matters the most if you are to make the visitors click on your ads.


Most websites run Affiliate Banners and Display ads to point the visitors in the direction of the brand they want to sell. These Affiliate programs are a major source of income for many if not most websites.

Some successful websites can earn a good amount of money from Affiliate Programs. All you need to do is to make the visitor click on the affiliate ad on your website and then going to the vendor’s website and making a purchase. That way you earn a preset commission from the sale you made. It could be a percentage or it could be fixed amount. It depends on the affiliate program you have signed up for.

AFFILIATE BANNERS AND DISPLAY ADS

When you signup for any affiliate program, you get access to a variety of marketing material to choose from. You can use this marketing material on your website to promote the affiliate brand. One of the most popular ways to market the affiliate brand is to use Affiliate Banners or Display ads on your website.

Banners or Display ads are like images, videos or Gifs etc. that you can use on your website to display the marketing message of the affiliate brand you want to promote. The kind of ad you want to show is up to you to choose from.


Popular Read: How to Submit a Website to Baidu Webmaster Tools

Other Popular Read: Beginner’s Guide on Why and How to Shop from AliExpress


USER EXPERIENCE ON YOUR WEBSITE COUNTS IF YOU WANT TO MAKE THE USER CLICK ON THE ADS

The basic aim for joining any affiliate program and displaying their ads is to make the visitors click on them and then going on to make a purchase.

Nobody likes cluttered websites where you go for some sort of information and all you see are ads and more ads, and the information you went there looking for in the first place is mixed up in the ads. That is going to leave a bad impression on the user and he or she is not likely to come back to your website, let alone click on your ad and going on to make the purchase.

In order to make sure that the users get the best experience on your website you have to make sure the layout is not cluttered. There should be a balance between the information that you are providing and the affiliate banner or display ads that you are promoting. Too much of anything is never going of work.

HOW TO PUT THE AFFILIATE BANNER AND DISPLAY ADS ON YOUR WEBSITE

Basically, in order to put the affiliate banner and display ads on your website, you have two popular options that many publishers use:

1- USING IMAGE

A popular way to show the ads of your affiliate program is to use images and then hyperlinking them with your unique affiliate / referral link.

Just download the affiliate image from your affiliate’s website and upload the image on your website as you normally do. Get your unique referral link from your affiliate program and paste the link on the image you have uploaded on your website by linking it with your referral link. That way whenever somebody will click on the image, they will be redirected to your affiliate’s website.

2- USING HTML CODE

You can also use HTML Code to show the ad of your affiliate program. You can get this code from the affiliate’s website. Copy the code and paste it in your post in “custom html block” in your WordPress Editor. If you want to use it on your sidebar, you can use a widget and add custom html to add the code of your affiliate program.


Other Read: How to watch Videos not available in your Country from anywhere


PROBLEM: BY DEFAULT ADS NOT IN CENTER WHEN USING HTML CODE

You might notice that when you put an ad using html code it is by default aligned to the left which doesn’t look professional at all. Ideally the ad should be aligned center to grab as much attention as possible. For this you will have to alter the html code slightly to make the banners or display ads align center.

HOW TO MAKE AFFILIATE BANNERS AND DISPLAY ADS ALIGN IN CENTER USING HTML CODE

Here’s how to make affiliate banners and display ads align in center using Html Code. All you need to do is add a little bit of code in the html code provided by your affiliate.

Basically this is all you need to add in the right place.

<p style=”text-align: center;”><img src=”your banner/display ad url”></p>

For further clarification, lets do it step by step:

  • Copy the code from your affiliate website.

Copy the code from your affiliate program's website - How to make Affiliate Banners and Display ads align in center using HTML Code
Copy the code from your affiliate program’s website

  • Go to your WordPress Editor and add a new block where you want to put the banner or display ad. Change the block from “Paragraph (Default)” setting to “Custom HTML” and paste the code there.

Go to WordPress Editor and add a new block - custom html
Go to WordPress Editor and add a new block – Custom HTML

  • Preview the ad / post and see the that the default alignment setting of the ad is to the left of the screen (as can be seen below)


  • You can see that the alignment of the ad looks out of place and it doesn’t look professional and neat at all.
  • In order to to make Affiliate Banners and Display ads align in center using HTML Code you need to alter and add a new line of code within the code provided to you by your affiliate. Here’s what line to add in your code.

<p style=”text-align: center;”><img src=”your banner/display ad url”></p>


To see how it looks in the code provided by your affiliate program. Here it is:


Add the highlighted Code to make the alignment center - How to make Affiliate Banners and Display ads align in center using HTML Code
Add the highlighted Code to make the alignment center

  • Add the highlighted text in the code provided to you by your affiliate. After adding the code Preview the Ad / Post and you will see that the banner or display ad is now aligned center (as shown below).


You can see that the ad is now centered and is looking much better. You have just increased the chance of getting a click on this ad. Not only it is looking great but it is also looking professional.

WORD OF CAUTION: Please check with your affiliate program if you are allowed to alter the code provided to you. Although it should not matter because the only thing you are doing is making the ad align center. Your affiliate should not have a problem with that but it is always a good idea to check first.

PUTTING AN AD IN THE SIDEBAR

Similar to the procedure mentioned above, if you want to put the ad in your sidebar, all you need to do is add the same line of code and the ad will be aligned center in your Sidebar.


Popular Read: How to Create a Baidu Account from Outside China without Chinese Phone Number

Other Read: Things to do to get Readers / Visitors after Publishing a Blog Post


ALIGNING THE AD TO THE RIGHT

Due to any reason, you might want to align the ad towards the right side. If that is the case then you only need to replace the word “center” in your code with “right”. That will do the trick. Example can be seen below.



Here’s is the code if you want to see the html code:


How to make the Banners and display ad align right using html code - How to make Affiliate Banners and Display ads align in center using HTML Code
How to make Banners and display ads align right using html code


Also Read: How to Duplicate a Website from One Domain to Another on WordPress


CONCLUSION

Nobody likes to come back to a cluttered website with out of place elements. If you want to be effective in reaching out to your visitors, then your website should show as such. If everything is out of place then the user might get the information from your website but he or she is unlikely to come back for more information.

In order to give the right message to your visitors, you need to look professional in your approach and a neat and clean website with proper layout is the right way to go.

The procedure for How to make Affiliate Banners and Display ads align in center using HTML Code is not difficult at all but because people don’t know how to go about it they just leave the alignment to default “left”.

Let us know if the procedure worked for you or if you encountered any problem by commenting below.

Share the post if it worked for you.

Follow us on Instagram and Twitter to stay updated.


* DISCLAIMER: This procedure is what has worked for. It is not our own. The procedure was found on the internet. Please do it at your own risk. Infinity Folder or anyone at Infinity Folder will not be responsible if the procedure doesn’t work for you or leads to any problem.

**Affiliate Links Disclaimer


This Post was on How to make Affiliate Banners and Display ads align in center using HTML Code.

Happy Reading!


POPULAR READS ON INFINITY FOLDER


0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *