Tutorials, tips and tricks about Blogger

08 Sep

Customizing Blogger templates easily with Firebug

17 Comments | by in Design, Tips and Tricks, Tools, Tutorials | 2011

Español Português

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.


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


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.


17 Comments, leave a reply · Feed
  1. My blog template you lost with the background images this morning. What happened?? You’re bringing me a nuisance!

  2. ayah arya February 6, 2012

    thank’s for you information,i need this for my tamplate

  3. thanks info firebug, ,

  4. that is just client side only right,,..?

    i prefer use inspect element in google chrome.
    thanks for share this great post. 😀

  5. Tate Mcgee July 5, 2012

    Hooray for the Firebug. This appears to be a great tool.

  6. AryKame July 22, 2012

    Please accept my template ^_^

  7. kadinlar October 4, 2012

    be not fully understand

  8. Multi Info November 13, 2012

    i’m a little bit confused o.O

  9. KUSEN PINTU JATI December 25, 2012

    there’s always an interesting work that makes people amazed to use. I like. and i’ll try it.

  10. nagababu May 8, 2013

    Yes firebug is really useful tool.I use this tool to find the source code of template and do some modifications to my template.From now on wards its easy to me.Thank you

  11. Adhitya June 22, 2013

    Easily tools, but what is the difference to Inspect element?

  12. Osfir Insan Bersahaja July 2, 2013

    Really… i will try
    I think this tool Is easy but Useful An interesting work

  13. mian umair ahmad July 8, 2013


  14. mian umair ahmad July 8, 2013

    Blending Headers into the Background With Artisteer (Blogger)
    Create Unique And Custom Designed Website Templates With A Click Of A Button
    Design quality WordPress themes in a minute with Artisteer
    Review of Artisteer software for automatically generating Drupal themes
    Generate your own Drupal themes — too good to be true?
    ArtISteer Review: An Absolute Must for Drupal and WordPress Design

  15. Tricajus July 29, 2013

    I’ve tried using firebug, good results can be seen once before use

  16. Thats a nice and useful information to be appreciated. Thanks

  17. demolek from Poland October 5, 2013

    Why not instalation btemplates on blogger?
    “Zapisanie szablonu nie powiodło się.
    Nie można przetworzyć szablonu, ponieważ nie jest on poprawnie sformułowany. Sprawdź, czy wszystkie elementy XML zostały prawidłowo zamknięte. Komunikat o błędzie XML:
    (SyntaxError) stack: SyntaxError: Unexpected token < at Pfc (:179:28) at Object.W$b [as th] (:393:5010) at Object.Gpe [as Hf] (:994:43571) at Aod (com.google.blogger.b2.gwt.app.BloggerModule-0.js:2663:190) at qod (com.google.blogger.b2.gwt.app.BloggerModule-0.js:2460:60) at ql (com.google.blogger.b2.gwt.app.BloggerModule-0.js:890:26) at Object.Cpe [as Vc] (:994:43492) at L3c (com.google.blogger.b2.gwt.app.BloggerModule-0.js:2446:104) at C3c (com.google.blogger.b2.gwt.app.BloggerModule-0.js:2032:61) at Object.P3c [as Oh] (com.google.blogger.b2.gwt.app.BloggerModule-0.js:2821:1524) __gwt$exception: : Unexpected token <"



You must be logged in to post a comment.

Tutorials, tips and tricks about Blogger