Customize a template is one of the first challenges for those who start a blog. To do this, nothing can save us of learning the basics of HTML and CSS, but there are some tools that can make this easier, as Firebug, a extension for Firefox and Chrome.

One of the simplest tools, but also more useful, in Firebug is Inspected, as its name implies, lets you navigate through each element of a website and know how it is configured and related to other elements.

This little guide will focus mainly on modifying the CSS code to adapt a design to our needs. CSS in Blogger is within the same template, between the codes <b:skin> and </b:skin>.

Customizing the CSS of a web element with Firebug.

To customize any feature of a web element from a Blogger template you simply:

1. Install Firebug in your browser: Firefox or Chrome. Personally I recommend to use Firefox, is more complete and quick, but applies to both the content of this tutorial.

2. Click the button for Firebug in the toolbar , then click the button to Inspect  and place the cursor right over the element to customize, it can be text, image, video, flash or anything, and click on it.

3. In the right Firebug panel, with the tab “style” active, shows all the styles that affect the element.

Styles are shown as a CSS style sheet, however, Firebug, sort and standardized the properties alphabetically.

It’s easy to recognize the following information: selectors, properties and the CSS rule location (code line and file that contains it).

4. Live tests.
Something very interesting of Firebug is that you can modify any CSS property and see the results directly applied on the page. You only need to click on the property or value to change it and see what happens directly on the page.

For properties that can only take certain values​​, Firebug lets explore them just clicking on the value and use the up and down keys of the keyboard.

And in the same way for numeric values:

Another really useful option is to disable the properties to see how an element behaves without them, simply click on the red circle to the left of each property.

Find the background image of an element is also useful when you are customizing a template, for it is only necessary to be placed on the element, clicking, and the panel of “Style” will appear the selector that contains the image, usually in property background or background-image.

Once you know you’ve come to the desired result in the tests, you need to apply those same changes to the styles in your template. Firebug saves never the changes, you should make this part of your hand.

In other words, if you’ve added a property in Firebug, you should add that same property to your CSS code, if you’ve made ​​a modification, it must be done in the styles of your template.

Screencast

With this introduction, you can see Firebug in action in the official screencast.

Conclusion

Firebug is a very intuitively tool, so some recommendations: Try and try, you will learn a lot about CSS and the tool itself, but without the risk of affecting your design. Read the official guide, where you can learn to take better advantage of the extension. And finally, learn at least basic CSS and HTML, it will make any design task less frustrating.

New editor interface

(Click on each image to enlarge)

New dashboard design

New content discovery feature on navbar

At first glance it looks really great, clear and functional. Goodbye to Blogger almost childlike image.

Step by step:

1. Go to your template code (Desktop → Design → Edit HTML) and expand widget templates.

2. Search the pages widget code, it looks more or less as follows:

<b:widget id='PageList1' locked='true' title='Pages' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

To facilitate the search, can search with your browser: id = ‘PageList

3. Once you locate the code, there are two places where you can put new links:

• Before <ul>. The link will be the first one in the menu.
• After </ul>. The link will be the last one in the menu.

As this is an HTML list, the link will follow this format:

<li><a href='http://mysite.com/mylink/'>My link</a></li>

You can add as many links as the design permits. Always taking care of opening and closing tags correctly.

4. Save the changes.

In this way you can add links to a important label, an external site, the feed url or any other link.