Customizing Blogger templates easily with Firebug

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.

Article by :


Ditulis Oleh : Den Triway Hari: 8:41 PM Kategori:

8 komentar:

  1. Thanks for the tips. I didn’t realize you could do this with firebug.

  2. Beautiful code, it seems, industry expert, good writing, keep going.

    1. thnk u very much..
      im also still learning.

  3. kadinlar October 4, 2012

    be not fully understand

  4. Thanks for share the tips, good job!


Alangkah tidak berkesannya jika anda sudah mampir tetapi tidak meninggalkan komentar atau ucapan apa-apa.


Teman Blog


My photo

Mari berlari dengan kekuatan kaki,
Mari bernyanyi dengan kekuatan Hati.

Jualan Online