It’s been quite some time since I’ve talked about how to create a custom Craig’s List Ad so I wanted to revisit this topic. Firstly, CL Ads often do very well in the searches, and they are a popular option for many for both getting jobs and finding employees. The problem with CL is that the default posting environment doesn’t allow you to do more than add your title, your text, and your images (which are featured at the bottom of the posting). The end result is something that looks unprofessional, and lackluster. The web savvy of you will note that once an Ad is posted, there is an edit code option. This is where you can make the necessary stylistic changes, though I should note that there are few styling options available as compared to current coding conventions.
One option that few do is to create a graphical ad and embed it into the CL Ad by applying a direct link. To do this you would create the Ad and then upload it to your server, and then link to it. For example, if your site is www.widgets.com, you could create a folder called “CL” and title your Ad CL.jpg. The link would then be <img src=”https://www.widgets.com/CL/CL.jpg”>. This is in effect what a designer does when they create a custom email or newsletter. Of course you would want to add a height/width dimension as well. Also note that in the code editor view, you are simply placing content within the body tags, so you don’t include a doctype, title tag, metatags, body tags etc., only the content that goes between the <body> … </body> tags.
Ok, while the graphical Ad option option works well enough, you still need to have indexable text (text that can be read) on the page. This is important since the search engines won’t read text on a graphic, and the goal of using CL is to improve your SEO ranking as well as bringing traffic to your website.
My suggestion is to use a combination of text and images. As I noted initially, CL is rather limited on the code that you can use, but if you have a bit of experience with basic HTML (before XHTML), then you have what you need to layout your content effectively.
The first thing you need to know is what the allowed CL HTML tags are. These are: <b>, <i>, <big>, <small>, <blockquote>, <p>, <font color=””> (supported colors are black, blue, fuchia, green, maroon, navy, olive, purple, red, teal), <br>, <hr>, <h1> to <h6>, <ul>, <ol>, <dl>, <dt>, <dd>, <a href=””>…</a>, <img src=””>, <pre>, <table>, <tr>, <th>, <td>.
Note that I didn’t include the closing tags in the above list, but assuming you know your “old school” HTML tags, then these should be self explanatory. If not, visit the following CL tags page link for explanation of their use with examples.
Craig’s List Tags:
https://www.craigslist.org/about/help/html_in_craigslist_postings/
Ok, so assuming you are up to speed on how to use the CL approved HTML tags, then you will need to know a few more things. Firstly, CL uses a fluid (adjustable) width, not fixed Pixels as is typical. This will result in the page content being resized based upon the resolution of the visitors monitor. Secondly, CL will resize the photos you upload, and in many cases the end result is not effective. The solutions:
Firstly for images, size your images yourself, and don’t add them in the CL picture upload option. Since CL does allow tables, use it for the layout. In the following example I’ve set the width to 780px (fixed width), no border, with cell padding and spacing set to 10px. This will provide a bit of room between the table objects. Of course I could have set the table’s width to 100%, or 90% (to add 10% of padding at the right), etc. if I wanted a percentage layout. This table has 5 rows and two columns, yet I’ve added a “colspan” of “2” on the top and bottom rows for full text across. The “rowspan” of “3” is used on the second column, which in effect joins the three columns together to add room for an image or graphical banner.
As I noted above, I would add the direct link to my image, and then size it so that it would fit well within the given width dimensions of the table. Since the table is only 780px, an image of 300px in width or smaller would be best. Note that a fixed pixel width will ensure that the layout looks consistent in all resolutions of 800/600 px or larger (a percentage based layout would not work well here since the content would not have consistent spacing between objects). Of course one could remove the table, and just set the image inline with the text. To do this you simply add your image, and set align-left as in the following: <img src=”https://www.widgets.com/CL/CL.jpg” alt=”Widget Photo” width=”300″ height=”400″ hspace=”10″ border=”0″ align=”left”> The problem with using this approach is that the text will butt-up against the image, so I’ve added (hspace=”10″) to provide 10 pixels of horizontal space. Ok, great, but this will add horizontal text on both the left and right of the image, and with a left aligned image you won’t want it indented more than the text (in most cases). The best option is to either use a table to separate the content as I’ve noted, or instead of having the image aligned at the left, align it at the right. <img src=”https://www.widgets.com/CL/CL.jpg” alt=”Widget Photo” width=”300″ height=”400″ hspace=”10″ vspace=”10″ border=”0″ align=”right”> In this example, I’ve added vertical space as well, and now that it is at the right of the text content, the text will wrap around it well, and always leave 10 pixels of margin on all four image sides.
click to view
Ok, so I wanted to provide you a working sample to give you an idea of how the different tags can be used. As you will see from the screenshot, and the code below, I’ve edited cell padding and cell spacing to provide a look that I was happy with. In addition I added a background tile, and I’ve used the following approved tags: heading, paragraph, table, italic, bold, href, and font color. As for the other tags I used, not sure if all are supported or not … such as target=”_blank” (opens target in a new window) and title=”” (provides mouse-over description for ADA accessibility), if not, CL will likely just ignore them.
<table width=”780″ border=”1″ cellspacing=”2″ cellpadding=”5″ background=”https://www.widgets.com/CL/beige045.jpg”>
<tr valign=”top”>
<td colspan=”2″><h1>Our CL Introduction Title</h1></td>
</tr>
<tr valign=”top”>
<td width=”410″><h3>Why Choose Us?</h3>
<p>We are the #1 Widget dealer in the USA.</p></td>
<td width=”300″ rowspan=”3″><i><img src=”https://www.widgets.com/CL/flower.jpg” alt=”Widget Photo” width=”300″ height=”450″ border=”5″></i></td>
</tr>
<tr valign=”top”>
<td><h3>Why Our Widgets?</h3>
<p>Our widgets are made with care, and are unconditionally guaranteed! If you buy today, you’ll be wealthy in one year or less.</p></td>
</tr>
<tr valign=”top”>
<td><p><b>Here is some information about our widgets. <font color=”red”>Did you know?</font></b></p>
<ul>
<li><i>Widgets come in all colors</i></li>
<li><i>Widgets are environmentall friendsly</i></li>
<li><i>Widgets are made from other widgets</i></li>
<li><i>Widgets are fun</i></li>
<li><i>Widgets will make you smile</i></li>
</ul>
<p><a href=”https://www.widgets.com” title=”Visit the Widget Site” target=”_blank”>[+] Learn More About Widgets</a></p>
<hr>
<p><b>The Story behind Widgets: </b><br>
Widgets have an amazing history. They were initially designed for industrial uses, but have become popularized in American society as the catch all tool of choice. </p>
<table width=”440″ border=”0″ cellspacing=”2″ cellpadding=”0″>
<tr>
<td width=”107″><img src=”https://www.widgets.com/CL/flowersm.jpg” width=”105″ height=”158″></td>
<td width=”107″><img src=”https://www.widgets.com/CL/flowersm.jpg” width=”105″ height=”158″></td>
<td width=”107″><img src=”https://www.widgets.com/CL/flowersm.jpg” width=”105″ height=”158″></td>
<td width=”107″><img src=”https://www.widgets.com/CL/flowersm.jpg” width=”105″ height=”158″></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan=”2″>Thank you for viewing our CL Ad. Please <a href=”mailto:info@widgets.com” title=”contact us”>contact us</a> to learn more about our widgets. </td>
</tr>
</table>
As you can see, I’ve added thumbnail images at the bottom (sized 2 px smaller than the table width to provide a bit of room with 2 px of padding between them). Of course these should be four unique images. And if you wanted to get really fancy, you would apply a background image to your table’s header and footer graphic to create a beveled effect, a gradient, etc. This would make the layout really snap. The goal of course with a CL Ad, graphical Ad, or Web Page, is to add the content in such a way that someone who views your content is engaged to not only read more, but to click the links and learn more. What I provided is a decent starting point, but if you are serious about creating a great CL Ad, it’s going to take some thoughtful consideration, and a bit of trial and error. As always, if you need help feel free to contact me.
