Tuesday, May 29, 2007

Viewing Blogger XML Coding for Editing

Blogger XML template files cannot be viewed directly in a browser which can make it harder for styling.

However, there are ways you can see the effects of altering your template prior to saving the template in Blogger:

Firefox and other Gecko based browser extensions:

The View Source With Firefox extension - opens the generated html of the page in either the default viewer or a program you specify - eg Dreamweaver, NVU (the latter is a comprehensive open source web page editing program).

View Selection Source in Firefox - highlight the area you want to look at and right click on 'View Selection Source'. This is good for checking on layout and quick editing jobs.

The Web Developer Toolbar browser extension for Firefox, Flock, Mozilla and Seamonkey has so many useful features - I use it a great deal in my web design work.

For Blogger Beta in particular the following features are handy. Load your blog into your browser, and from the Web Developer Toolbar you can:

  • Edit HTML and Edit CSS- both features open a small window at bottom of your screen for you to edit the code while viewing the results in the top window. You could for example change your template layout, add divisions, change font and background colors, add images and see what it looks like. You can also save the resulting coding to your hard disk. When you are happy with the results you can then make changes to your template in Blogger.

  • View generated Source - opens up the html page source code (ie not the xml code) in a new window/tab. This can be copied and pasted into your html editor program for you to tweak and style until you are sure about the changes you want to make.

  • Ruler - A great utility for measuring items on your page. e.g. work out the amount of padding to put to the left of widgets that insist on being left aligned.

  • Images

    • Image Information - displays all the images and image details on a separate page/tab.

    • Outline images with empty alt attributes

    • Display Image File Sizes and image dimensions

  • Other Page information

    • View Color Information

    • Display Element Information - a nifty feature allowing you to highlight parts of the page and find out various information such as ID, class and CSS inheritance, color.

  • Other Utilities

    • Magnifier

    • Display page at various window sizes - eg 800x600, 1024x768 etc


  1. good stuff , Sue.
    (I clicked on an ad for you as well :) )

  2. Thanks Goldcoaster, I often want to click on some of the adsense links myself, when they are geared towards blogging. I resist though.


I have removed 'nofollow' in appreciation for you taking the time to comment.