New designs made easy

Love this new template designer, just released by Google.

Creating a blog and using it for an on-line portfolio

Ads and things

So that I can find out a bit more about how a variety of things that can be added to web logs work you may see all sorts of odd extra panels appear in the sidebar. Can't really advise people on these sort of things until I've tried them out myself. One will be Google's AdSense programme which will include ads., hopefully not plastered across the page or flashing annoyingly at visitors. I need to see what sort of content appears and how the adminstration works. Obviously, as I have no idea what products or services will appear, I cannot endorse any of them. To be honest, the similar stuff I've seen on other blogs or sites always looks a bit sad and I can't imagine how anyone makes any money out of this but I get so many questions about this I can't answer I need to collect some facts myself.

putting an image in a web log header

The new version of Blogger provides lots of fairly user-friendly ways to change the way a template looks (more about that in my Q4 notes) but getting an image, or replacing one, in the header area is a bit trickier. Because it involves putting one of your own images on a web site this may prevent many people attempting it but for those who think they can manage that bit, here's what to do:

1 Find out the size of the existing image. Firefox browser users with the Web Developer toolbar will find this easy. IE users could try right clicking on the image and looking at its properties. These notes are based on the Rounders3 template used for Q2 News and others and the image size is 740x150.
2 Choose an image that contains a section of this size that you'd like to use. You might get away with re-sizing a smaller image but it's better to start with something larger.
3 In an image editing program crop a section 740x150 out of the image. In many applications you can set the size of the area to be cropped and then drag the rectangle around to see what the extracted part will look like - useful as it's an unusual size that you're working with an large images may offer all sorts of unexpected possibilities.
4 Save the extracted bit as a separate file in any of gif, jpg or png formats, whichever is the most suitable combination of quality and file size. Avoid exceeding 30 or 40KB if you don't wish to annoy visitors on slower connections. Most image editors will have an 'Export' facility to help here.
5 Upload that image to the web somewhere. It doesn't need to be on a web page but if that's the only way you can do it that's OK. Although I haven't tried it, I guess putting it on a Flickr or Google-Picasa album page might work too.
6 Note the url of the image on-line. I put mine on my andrewx.com site so the address is something like http://andrewx.com/leaves5.jpg which is quite simple but you may have to go to the web site and right click on the image to get its url, then copy that to the clipboard.
7 From your Blogger Dashboard, go to settings and in the Template tab click Edit HTML.
8 Even I find some of the code pretty impenetrable but somewhere in there will be the instructions for where the page is to get its header. In one of my web logs it looks like this:
#header {
background:url("http://andrewx.com/butterfly5.jpg") no-repeat left bottom;
padding:0 15px 8px;
}
9 Well, it looked a bit different becuase it had a different url in the brackets! You'll get the idea, though - that url is what you should paste or type in (don't put any extra spaces or pubctuation).
10 Save the changes and see if it's worked.

I hope it did. I haven't got round to changing the header on this blog, which uses a different screen wide layout. It may be that some extra instructions will be necessary which I'll publish if I ever get time to try this one.

Links to free images

OK, so you've probably seen these before because I tell everyone I know about them. The point of including this is to try out something that I need to present at a forthcoming workshop. This new version of Blogger has some cool features that make customising the template - that's the bit that controls how everything appears on your screen - very simple. I guess I ought to do some instructions for that - maybe in the next few entries. Anyway, for now, you'll see a bundle of links to free image resources included in the panel to the left. If I've got them right, you can just click on them to go to the various galleries and, provided you don't do silly things with the images that offend the pretty generous usage terms, and you tell visitors or readers where you got them, you should find some brilliant images to meet even the most odd requirements.

For the workshop, my idea is that people can slide one of the LSN Q Project DVDs into their computer, find something they want to use and copy the links into a web log like this. This addition and posting took about 10 minutes and it could be a nice addition to any lesson concerning something like where to find images.

Obviously, for other subjects, you might not have as many links immediately to hand in the materials but even a couple of useful links in a place like this can be useful. Especially when you remember that your web log has an RSS feed that can create an automatic addition of headlines or 'news' to a course page in Moodle or Pageflakes (and no doubt several other sites you can edit yourself).

All I need to do now is add a picture to this entry to make it look a bit more interesting and, 12 minutes later, we're there.