August 19, 2011

Styling Technorati Tags with CSS

Users at the Pro Unlimited plan and above can use Advanced Templates or the Custom CSS feature to add style to the Technorati tags displayed with their posts.

As with any other part of your blog, Technorati tags use CSS for styling. If you take a look at your blog's source code, you will find this tag:

<p class="entry-footer-tags">

To style the Technorati tags, you'd just reference the class in your stylesheet or on the Custom CSS page.

Let's say that you wanted to display the Technorati icon along with your tags. Start by editing your stylesheet or accessing your Custom CSS feature and add the following CSS code:

The third line of code adds padding to the tags, pushing the tags to the right of the Technorati icon. The fourth line of adds the icon in as a background image.

Now let's say that you wanted to add a box around your tags with a border and a different background color. You can achieve this by adding code similar to this:

The third line of code formats the border; specifying its size, type and color. The fourth line of code adds padding, pushing the tags to the right of the Technorati icon. Then the fifth line adds the icon as a background image as well as adding a background color to the box just created. The end result looks like this:

With the help of CSS, there are quite a few possibilities for styling your Technorati tags. You can find a CSS reference guide here.


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services