This guide will walk you through the steps of creating a custom component. I'll go into the general idea behind components in a later entry; the idea behind this particular guide is to show you how to include a Google search component in your weblog!
1. Log into your Blogware Control Panel and go to the Layout Manager, located in the Look and Feel section.
Click the Look and Feel tab in the Navigation Bar. Since Layout Manager is the first item in the submenu, it will be selected by default.
2. Go to the Advanced section of the Layout Manager.
The Layout Manager has its own set of tabs. Click the Advanced tab.
3. In the Add Custom Component area, enter the name and the code for the component to be created.
Enter Google into the Name textbox.
Copy the code below and paste it into the Content text area.
<div class="component">
<div class="componentHead">Search Google</div>
<div class="componentContent">
<div class="componentSearch">
<form method=get action="http://www.google.com/search">
<INPUT TYPE=text name=q size=20 maxlength=255 value="">
<table border="0" cellpadding="0" cellspacing="0" class="componentSearch">
<tr>
<td nowrap>
</tr>
<tr>
<td nowrap>
<div style="margin-top:2px;">
<input type="submit" name=vpop class="buttonWhite" Value="Submit"></div></td>
</tr>
</table>
</form>
</div> <!-- componentSearch -->
</div> <!-- componentContent -->
</div> <!-- component -->
<div class="componentHead">Search Google</div>
<div class="componentContent">
<div class="componentSearch">
<form method=get action="http://www.google.com/search">
<INPUT TYPE=text name=q size=20 maxlength=255 value="">
<table border="0" cellpadding="0" cellspacing="0" class="componentSearch">
<tr>
<td nowrap>
</tr>
<tr>
<td nowrap>
<div style="margin-top:2px;">
<input type="submit" name=vpop class="buttonWhite" Value="Submit"></div></td>
</tr>
</table>
</form>
</div> <!-- componentSearch -->
</div> <!-- componentContent -->
</div> <!-- component -->
Once you have filled both the Name and Content fields, click the Add Component button.
Your new component will be created and will appear in the Custom Components list.
Now that you've created the component, it's time to put it into the layout of your blog. Let's suppose you want to include it in one of the sidebars of your blog.
4. Go to the Columns section of the Layout Manager.
You do this by clicking on the Columns tab.
5. Move the component you've just created from the Inactive column to one of your sidebar columns.
All custom components appear in the Layout Manager as "Custom: xxx", where xxx is the name you gave the component. The component you just created is called "Custom: Google".
In this example, we'll put "Custom: Google" at the bottom of the left column. Click and drag the "Custom: Google" component out of the Inactive column...
...drag it over to the bottom of the left column...
...and drop it.
6. Check your handiwork.
The Preview button lets you check the results of your rearrangements in the Layout Manager. It will open a window showing you what you blog will look like. The changes will not take effect until you click the Save button.
Click the Preview button to see a preview of your new layout.
Just as a reminder, here's what the left column looks like in the Layout Manager...
And here's what it looks like in the blog. It'll look slightly different if the reader is logged in, but in either case, you'll notice the Google search component is now in the layout.
Try it on your own blog!