Blog platforms are the stuff of awesome because they allow any computer-competent person to publish professional-looking sites without programming chops. A critical, early step in all this is selecting a look and feel apt for your topic. So dig into Blogger's chocolate-box of designs and see what suits.
A template controls the look of your blog via cascading style sheets (css): its width, number of columns, header style, and so forth. Some aspects – like colors and fonts – can be adjusted further via Blogger's control panels. But the first step is deciding what, roughly, your site should look like.
Under Layout is the link "pick a new template". Experiment here, if you're not committed to the design you chose when it launched.
You'll notice that Blogger, lamely, offers only two-column styles. Three-column ones exist, but you need to source the code from a reliable third-party, then customize your template. We'll talk about how to do this – and manage it safely – later in the course.
Once you've chosen a template, you can start modifying it. Click on Layout>Page Elements. A boxy schematic of your site will appear (a "wireframe" in jargonese).
Here you can "Add a Gadget," such as a sidebar text box, blogroll and widgets (which we discuss below in depth). You can also drag and drop items to rearrange them. The "Edit" buttons are pretty self-explanatory. The header one allows you to change the title and tagline, drop an image behind the text or upload a custom header (more on that later).
Make sure you hit the orange "save" button on the top right!
The next element to play with is Fonts and Colors, also in blue on the beige bar under Layout.
Scroll down that left-hand control panel. Weirdly, it has different options for items' color and their font, which can be hard for DTP-savvy people to grasp. But Blogger is a basic, free platform, so things are clunky on occasion.
OK, there's loads of fun stuff to goof around with here. A few tips:
- Reversed-out text – light on a dark background – is considerably harder to read, especially on-screen. If you take that route, consider making the text larger and bolder.
- Don't go crazy with the paintbox. A palette of five to six should suit all your needs, from background hue to sidebar text. Use color to direct the eye, not distract it. Ditto fonts.
- Sans serif fonts – without the little "feet" – work best on-screen for body text. The class blog employs Arial, which is a little more narrow (and sophisticated) than the common Verdana. To maintain a consistent, not-distracting style, stick with 2-3 fonts and 2-3 font sizes.
- Settle onto a template before you tinker here exhaustively. Color and font details will be lost if you switch. But it's easy to note the palette and recreate it... Each color has a hex code a six-character mix of numbers and letters.
- Remember to save changes. Big ole orange button again.
The final Layout element is "Edit html". Here you can peek at the code and, if you're really brave, wade in and edit the css, after backing it up. That's pretty advanced stuff, so Mike will address it later in class – and coach ambitious folks on issues.
Posts
