The standard templates available for your blog are classy and stylish, but you may want to modify your blog to include a banner image for example, instead of having your blog's name in text.

Once you have created a banner image for your blog, read this article to learn how to upload it to your blog using the File Manager.

First Login to your Blog Control Panel. Next, 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. The Layout Manager enables you to modify the style of your blog in various ways. You can change the template of the blog, and you can also arrange Components on the page.

Components are the building blocks of your weblog: you can add or remove a Calendar Component, a Search Component, a Login component, etc. In this tutorial, we will customize the Blog Name component to display the banner image we uploaded in the How to Upload Images to your Weblog article.

Click the Components Tab in your Layout Manager: the Components section is where we can customize the Components of the weblog. We are going to customize the Blog Name component, so click on Customize in the Blog Name row. A window like this will appear:

Now we will modify the component so that it displays a banner image instead of the Blog Name in plain text. Replace the text that reads {{blog.name}} with the HTML code we learned from the Upload Images to your Weblog tutorial.

In that tutorial, we created a directory called Banners and uploaded an image named Banner1.gif into that directory, so the HTML code we would use to replace the {{blog.name}} text would be <img src="/Banners/Banner1.gif">.

The Content of your Custom Blog Name component will now like this:

<div class="component">
<div class="componentBlogname">
<a href="{{blog.url}}"><img src="/Banners/Banner1.gif"></a></div>
</div>


Don't change the {{blog.url}} part, that is a macro which will be automatically converted to the value of your Blog URL when your page is loaded. By using this macro, if you change your blog address later on by adding a custom domain name for example, you don't have to come back and modify your component.

Now click the Add Component button. Now you will see there is a new custom component called Custom: Blog Name.

Sometimes the name of a component is too long to fit in the box, place your mouse over a compoment and the full name will appear.

Finally, we need to modify your blog to use your Custom Component instead of the System Component: Click on the Header tab. Now we will use Drag and Drop to modify the components used in your blog. You will see something like this:

Drag the Blog Name component from its current location to the Inactive column. Now drag your Custom: Blog Name component out of the Inactive column and drop it where the previous Blog Name component existed. Click the Save button.

Now your blog will display the image you uploaded as the banner of your weblog:

You can modify any of the Components of your blog, so feel free to experiment!