Thursday , 24 April 2014
Home / Hacks & Mods / How To Create A 4 x 125 x 125 Sidebar Ad-Block

How To Create A 4 x 125 x 125 Sidebar Ad-Block

Create a 4 x 125 x 125 ad-block for your themes sidebar by following the simple steps laid out below. We really have two options open to us to achieve this, we can use a small 4 x 4 table or we could use div tags & whilst I know there are many out there that will say that this should be done with div tags these days, I have opted to use a table for simplicity sake.

After all this site is aimed mainly at those that are still in the learning process with regard to WordPress, Stylesheets & html code and as the use of div tags would also require further styling in the theme stylesheet, I think the use of a table is an easier option. Perhaps I may do a follow up article using div tags to achieve the same result. How To Create A 4 x 125 x 125 Sidebar Ad Block

As my blog space would only allow for a 270px wide sidebar, then this ad block will require a sidebar with a 270px width, although you could possibly squeeze it into a sidebar of 264px width by reducing the cell padding to “2″ as I will explain later.

The Code Needed

How To Create A 4 x 125 x 125 Sidebar Ad Block

 Download the code sheet by clicking the following link: Ad-Block-Code

Once you have downloaded the code sheet, you will need to extract the file and then right click on the file and select ” edit “, this will more than likely open MS.Frontpage as the editor, but if you have any difficulties a simple html editor such as Notepad or Notepad++ is ideal.

How To Create A 4 x 125 x 125 Sidebar Ad Block

The code above will create the Ad Block to the right, which has the 125 x 125 images & links already embedded as the Ad Block was used on this site, so if you wish to use these images, then download here:- Ad Button

There is a little editing involved here, but it is fairly straight forward if you follow the instructions and also cross refer with the code image above.

Looking at the code sheet above, you can see there are comments in green above all the relevant parts that you will need to edit, but I will explain further below.

Editing The Code

Note: All references are made in regard to the image above & not the actual code sheet.

1. Line 5 in the code sheet “cellspacing=”5″ adjust this figure between 5 & 15 to get a better fit in a wider sidebar. Reducing this figure to 2 would possibly allow you to squeeze the ad block into a 264px wide sidebar as an absolute minimum.

2. Line 9 in the code sheet; title, target & href all shown in red. Title is what people see when they mouse over the ad block. target tells the editor to open the link in a new window when clicked, href is the actual link address. Edit each of these to suit your own requirements, remembering to keep the ” ” quote marks, eg. only edit what is inside the quotes.

3. Line 11 src change this link address to the source address of whatever image you wish to use here..?

Note: You will need to repeat steps 2 & 3 , four times in total as steps 2 & 3 above only affect one 125 x 125 block and this ad block actually creates four  125 x 125px ad spaces.

Placing The Code

 How To Create A 4 x 125 x 125 Sidebar Ad Block

Once you have finished editing the code sheet, save it to your desktop for easy access, then open your admin panel in WordPress and click on widgets. Select your sidebar & add drag & drop the Txt Widget into place. Finally open the code sheet on your desktop and select and copy all the code, then paste this code into your text widget, remembering to save !

That’s it completed, you now have your very own 4 x 4 Ad-Block inserted into your sidebar, so the only thing that remains is to get out surfing the web & start drumming up some business.

About Steve Nickson

Steve is a UK ex-pat currently living in the Philippines, he has been involved with computers for over 24 years, the last 7 years focusing on SEO & Social Media strategies, Web Promotion & Affiliate / Internet Marketing. He is constantly testing new ideas & is always keen to share his knowledge & expertise with fellow bloggers. Connect with Steve using the links below.
Add Comment Register

Leave a Reply


Steve NicksonHey guys,

we know your probably just as busy as we are, but we would really appreciate it if you could spare just a few minutes of your valuable time to like us on
Thank You