How to customize WordPress Theme Twenty-Ten for Blogger - I

We already know one of the most positive competencies of WordPress as a CMS is the elegance and number of their themes. But since now many third party web designers in the process of linking pros of WordPress with cons of Blogger, there are many WordPress themes that are converted into Blogger version. People in blogger can use them.

One of such WordPress themes is Twenty-Ten. I am also big fan of its later developed versions. It's simple to use yet elegantly professional. If you also want to use it in your blog (blogger), you can download from HERE.

Read: 5 disadvantages of opening a blog at WordPress

  

But I don't you to simply download and use it immediately in your blog. I want you to make some customizations so that it's better in appearances and suits your requirements. I will guide you through customizing it in 5 areas. They will be in:

1. blog description statement
2. navigation tabs
3. header banner/blog banner
4. blog post title
5. footer/copyright statement

Let us first start with customization of a blog description font. If you have observed, by default, the blog description statement is in italic font. If you love in italic, it's fine. If not, let us change into normal font. Find the given CSS:

#site-description {
clear: right;
float: right;
font-style: italic;
margin: 14px 0 18px 0;
padding: 0;
width: 220px;
}

In above, change blue font italic into NORMAL. If you want to stretch equal to right-hand side border of blog banner, you can reduce width by few points. Don't forget to Save Template.

Read: How to download a Blogger Template and save in a Computer

          

We'll then customize the navigation tabs. It's actually page-lists of a blog. This template has inbuilt navigation tab. We just have to link them to our already-created pages. It has got given tabs:

1. Home
2. About
3. Contact
4. Menu

We are fine with other three. We don't like the fourth one that has got sliding/drop-down navigation tab. We want to remove it and make all the tabs click-able in one level. Let us change one by one. Find the given CSS:

<li class='page_item'><a href='http://litethemes-twentyten.blogspot.com/p/about.html' title='About'>About</a></li>

The above CSS is for 'About' tab. The RED font is a default link to the About page of this template. Replace it with your own 'About' page URL link.

   

<li class='page_item'><a href='http://litethemes-twentyten.blogspot.com/p/contact.html' title='Contact'>Contact</a></li>

You also have to replace RED font with your own Contact page URL link. It's a default link of the template. Now let us break navigation tabs into fixed and drop-down. Home, About and Contact are fixed. Now in Menu, there are drop-down features.

<!-- begin example drop down menu -->
<li class='page_item'><a href='#' title='Menu'>Menu</a>
<ul class='children'>
<li class='page_item'><a href='#' title='Sub Menu #1'>Sub Menu #1</a></li>
<li class='page_item'><a href='#' title='Sub Menu #2'>Sub Menu #2</a></li>
</ul>
</li>
<!-- end example drop down menu -->

If you want to remove just the sub-menu, delete the BLUE font in above CSS. If you don't want it either in fixed tab either, delete the whole of above CSS. In above please note that # are respective default navigation tab links.