Wednesday, May 30, 2007

Beautiful Beta: BlogToC Widget Released

Another fine offering from Hans at Beautiful Beta BlogToC Widget. Display a table of contents of your blog posts inline.
You can see the code in action on my blog. Just click on the 'Show Table of Contents' link in the left sidebar. The TOC will be displayed at the top of the page, above the first post.

Full instructions can be found on the Beautiful Beta blog at BlogToC Widget.

There are 3 stages involved in implementing this code. The first is to change the line in the template that starts with <b:section class='main' to:

<b:section class='main' id='main'
maxwidgets='2' showaddelement='yes'>

This allows you to add extra elements to the area of your blog above your posts. PLEASE NOTE - if you have altered this already to accomodate 2 elements in this position already, you will need to increase the maxwidgets figure. As I had my top navigation menu and the Google Blog Bar in this position, I had to enter maxwidgets='3'.

The other two changes to be made are the addition of two page elements, one in the sidebar to provide a clickable link to trigger the TOC widget, and one above the posts where the TOC appears. For the coding please visit

Footnote - In a later posting a method of allowing the display over 100 posts is explained, getting round the 100 post default limit. You can find the instructions at Beyond the 100 posts limit.


Tuesday, May 29, 2007

Blogger now automatically saves your drafts

If you are composing a new post, Blogger now automatically saves it for you once a minute. This goes on in the background so does not interrupt what you are doing.

This autosave feature does not take place when you are editing posts that have previously been published to your blog.


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


Blogger XML Template Sites

Templates for the new Blogger are available at the following sites. You can also access them from my 'Blogger XML Templates' links menu

Take care that you download the correct files as some of these sites also provide classic Blogger themes.

I will add to this list as I find more sites. If you know of any Blogger xml template sites, please let me know.


Friday, May 25, 2007

Picasa Web Albums for Blogger Images

I use Google's Picasa Web Albums for personal photos and blog images (I can choose to make albums private or public.) and I think it is a good option for Bloggers too. You can see my public galleries here.

Although the new Blogger allows for uploading of images for posts and for its add picture element, there are times you may want more control over your images. For example, you may want to edit the image, display a higher quality image, or add your own custom html coding, including images, to your sidebar.

To do this you will need to link to an image on a different server. Unless you have your own domain you will need to use an online storage site.

There are various options but for me Picasa Web Albums is the most convenient and easy to use. An added advantage is that Blogger uses Picasa Web Albums to store your blog images. If you log into Picasa Web Albums using your Blogger gmail address you will see an album with the same title as your blog. At this point in time there is no way for you to upload images to this particular album but you can create others and upload to these.

Why I think Picasa Web Albums has advantages over other online storage systems:

  • I am assuming that if you are using the same site as Blogger then the upload time will be quicker than using outside servers. If anyone thinks differently please let me know as I will stand to be corrected.

  • It is convenient to have all your images in one place.

  • If you want to include an image twice you don't need to upload it again in Blogger, just link to the Picasa album image.

  • The interface is clear and easy to navigate.

  • You can create different albums to hold distinct categories of images, e.g. one for sidebar icons, one for post images, one for template images.

  • The code for you to add to your blog is created for you and you just have to copy and post it into your post or template.
  • As with the Blogger interface, you can choose what size of image you want to create the link code for - thumbnail, small, medium, large.

  • Creation of slideshows that you can integrate into your blog.
  • If you use Picasa2 to organize images on your computer, you can upload images directly from there to your Picasa Web Album and navigate to your albums from a link at the top of the Picasa window.

Some Features:

  • You can store up to 1gb of images free with the option to pay for extra storage space.

  • Each image can be up to 20mb in size.

  • You can upload videos

It would be good to have the ability to upload directly to your Blogger created album to update photos in your blog but maybe that feature will come later.

You can of course upload all of your blog images to an album you create in Picasa Web Albums, bypassing the Blogger 'insert picture' options, and link to all images in your blog.

(I am not sure I really want to be plugging Google programs at the moment. I was elated when Google page rank for my other blog jumped to 4 the other day (I thought it was because I had included Adsense), only to have my bubble burst by it going back to 3 the next.)

Thanks to willow for reminding me that Picasa does not allow the uploading of .gif images.


Wednesday, May 23, 2007

New Blogger features added

As you can see I have added new page elements to this site.

  • Video Bar - where you can display clips from YouTube and Google Video for your readers to watch without leaving the page. I have placed the element above the posts but it can be put in the sidebar and below all of your posts too.
  • Newsreel - Automatically add current headlines from Google News to your blog.
The content of both of these elements can be customized by entering search terms.
  • AdSense - earn revenue by displaying relevant ads on your blog. You can chose from various layouts for the display and customize the style to fit in with the look of your blog. You can learn about and sign up for AdSense here and read the AdSense blog to find out more.


Wednesday, May 02, 2007

Add to Favorites/Digg This Hack

Ramani at Hackosphere suggests a hack for adding links to and DiggIt to the bottom of your posts.

I have altered this slightly to float a 'DiggIt' link to the right, separating it from the post labels which are left aligned. You can see this in place at the bottom of this post. You could add any link you like, replacing the digg url "" with one of your choice as well as replacing the "DiggIt!" text with an image.

The text in normal font is the original blogger code, the text in bold is the Hackosphere code and the text in red is my additional code.

<span class='post-labels' style='float:left;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
</a><b:if cond='data:label.isLast != "true"'>,</b:if>
<span class='post-labels' style='float:right;'>
<a expr:href='";url=" +
data:post.url + "&amp;title=" + data:post.title'

I will not repeat the full instructions for implementing this, as it is explained well on the the Hackosphere post, but refer you to the post itself: Hackosphere: and Digg hotlinks for your Beta blog.