Features

Top 30 online tools

20070713 [Computer Shopper]

In your own words: Hosting Blogger on your own site

Blogger (www.blogger.com) is an undeniably easy way to start blogging. You can use the standard 'blogspot.com' URL if you just want to run a blog. Alternatively, you can integrate Blogger into your own site and use your chosen domain name instead of blogspot.

To add the blog to your site, log in to Blogger and click on the Settings button. Under the Publishing tab, enter your site's address in the first field; for example, 'yoursite.co.uk'. Under this, type in the address your visitors will use to link to your blog; for example, 'http://yoursite.co.uk/blog'.

You'll also need to enter the FTP path - the web-accessible directory where Blogger places blog files on your server. This often begins in the format 'htdocs' or 'public_html'. If you're in doubt, your ISP can advise you. Enter the blog's home page (it's a good idea to use the default 'index.html' as long as its name doesn't conflict with that of another file in the same directory). Then enter the same FTP username and password you use to upload files to your site.

While the blog is now part of your site, it probably bears no visual similarity to it. If your site already uses cascading style sheets (CSS) to format its content, you should be able to tweak Blogger's design to match the rest of your site's pages.

To edit Blogger's content, click on the Template tab or the Template link on your Blogger home page. Click on the Edit HTML tab to see your blog's layout in an editable template window. It's easier to edit this externally, so copy the template's text to a text editor, such as Notepad. Save a copy of the original template first so that you can go back to it if things go awry. Blogger's CSS usually appears between the <style> and </style> tags.

You can either tweak Blogger's CSS settings manually or apply your site's existing style sheets to the template by adding the line:

<STYLE TYPE="text/css">@import url("styles.css")

between the <HEAD></HEAD> tags of the template, where "styles.css" is the path to your site's existing CSS.

There are two caveats. First, the Blogger template uses specific CSS styles for elements that are unlikely to be in your original style sheet, such as 'blog-header'. Second, if styles clash, those embedded in the template have priority. This means you'll probably need to do a bit of tweaking. To test for this, save the file to your desktop with an HTML extension and open it in your browser.

Near the bottom of the template you'll find the page's HTML content. Here you can enter hyperlinks to other pages on your site. It's best to use the Sidebar area for this.

Once you've added your extra HTML, cut and paste the template back into Blogger's template window.