Components are blocks which can appear in the right or left columns or sidebars of your weblog. Standard components include a search engine, calendar, lists of recent articles or recent comments, among others. This article will explain how to create a custom component.

Many of the Standard components can be customized; see this article for information on modifying the standard Blog Name component which displays the name of your weblog in the header of each page.

In addition to modifying a Standard component, it is also possible to create a Custom Component which can be added to your weblog. You can use a Custom Component to add any kind of content to your weblog. Add a picture of yourself, an ad banner, or a short message to your readers.

Here's how to add a Custom Component:

  1. Log into the BlogHarbor Control Panel, and click on the Look and Feel tab at the top navigation bar. On the following page, you'll see a row containing Options at the bottom of the navigation tabs. Click on Layout.
  2. Now you are in the Layout Manager; Click on the Components tab. The first thing you will see at the top of the page is the Custom Component tool.

    Layout_Manager_AddCustComp.gif

  3. The Name box is used to identify Components within the Layout Manager, it will not be output into your weblog. Enter a Name that you will find easy to associate with the contents of your component. Enter text or HTML into the content area. After you have input your text or HTML, click Add Component.
  4. Now that you have created a Custom Component, it's time to add it into your layout. Click on the Columns tab in the Layout Manager tool, and scroll down to the Component Layout area. In the Inactive column, you should see the name of the Custom Component you just created (it will have a name like Custom: Your Component's Name). Drag the component into the Left or Right Column, and click on the Save button at the bottom of the page. Your Custom Component will now appear on your weblog!

Customizing the look of your Custom Component

If you want the Custom Component to match the look and feel of the rest of the component blocks on your weblog, you will need to add a bit of CSS (Cascading Style Sheet) code to the Content of the custom component. You'll use a title for your content. 
<div class="component">
	<div class="componentHead">Put a title here</div>
	<div class="componentContent">
	And put your content here.
	</div>
</div>

By using code as shown above inside your Component Content, your Custom Component will match the look of the rest of your weblog no matter which template you choose!

Questions on the process? Feel free to ask them below!