Customize Your Blog

You can customize your blog's look and feel as well as insert additional content and code into your blog. Here's how.

Customized Look and Feel with CSS

The blog app gets many of its styles from an external CSS stylesheet stored in the page BlogCSS. To use a custom stylesheet for your blog, follow these steps:

1. Edit BlogCSS in XML mode and copy the entire contents of the page
2. Create your own stylesheet page, e.g. MyBlogCSS.
3. Edit your custom stylesheet page in XML mode and paste in the contents from BlogCSS
4. Edit your blog's home page and enter the name of your custom stylesheet in the Custom CSS Page field (e.g. MyBlogCSS)

You'll of course want to change many of the CSS styles in your custom stylesheet. Here are some of the commonly customized elements:

See the screenshot at the bottom of the page for an example of a blog with custom blog and post title colors.

Technorati Tags

Technorati is a blog search engine that offers a free tagging search service for public blogs. By turning the Show Technorati Tags option on for your blog, your tags will display in a an additional format that can be discovered by Technorati's search engine. Once discovered, your blog posts are associated with other posts sharing those tags. See http://www.technorati.com/help/tags.html for more info on how this works. Note this only applies to JotSpots that have been made guest accessible.

For example, here's Technorati's main tag cloud page showing some of the popular tags used by blogs around the world: http://www.technorati.com/tag/.

To enable or disable Technorati tags, edit your blog's home page and toggle the Technorati Tags option.
See the screenshot at the bottom of the page for an example of where Technorati tags are placed in each post.

Blog App Extensions

The Blog app can also be customized by inserting your own content and/or code into blog's main page. This is accomplished by creating your own blog app extension page and wrapping your content and code in specific the extension points defined by the app.

You can put content at the top and bottom of the blog, as well as the top and bottom of the blog sidebar. The table and screenshot below illustrate both the names of the extension points as well as their location on the screen.

To create your own blog app extension, follow these instructions:

1. Create a new Jot page that act as your new blog app extension page (e.g. MyBlogAppExtension)
2. Enter content and/or code using one or more of the blog app's extension points from the table above
3. Edit your blog's home page and enter the name of your blog app extension page in the extension field (e.g. MyBlogAppExtension)

Example

This Blog App Extension Page

<jot:extension target="BlogHeaderTop">
<div style="background-color: #eee; border: 1px solid #999; margin: 5px;">
!!HEY THIS IS MY TOP HEADER (`\BlogHeaderTop`)
</div>
</jot:extension>

<jot:extension target="BlogHeaderBottom" dupKey="DefaultBlogExtension">
<div style="background-color: #eee; border: 1px solid #999; margin: 5px;">
!!HEY THIS IS MY BOTTOM HEADER (`\BlogHeaderBottom`)
</div>
</jot:extension>

<jot:extension target="BlogFooter">
<div style="background-color: #eee; border: 1px solid #999; margin: 5px;">
!!HEY THIS IS MY FOOTER (`\BlogFooter`)
</div>
</jot:extension>

<jot:extension target="BlogLinkbarTop">
<div style="background-color: #eee; border: 1px solid #999; margin: 5px;">
!!TOP LINKS (`\BlogLinkbarTop`)
</div>
</jot:extension>

<jot:extension target="BlogLinkbarBottom">
<div style="background-color: #eee; border: 1px solid #999; margin: 5px;">
!!BOTTOM LINKS (`\BlogLinkbarBottom`)
</div>
</jot:extension>

Produced this blog page: