Blogger's new post editor

As I was working on a new chapter for my upcoming second edition of Publishing a blog with Blogger: Visual QuickStart Guide I happened to be wandering about the Settings area of my example blog (Go to your Dashboard, choose Settings | Basic and scroll down almost to the bottom.) And there was this option I'd never seen before: "Updated editor: Check out the latest features".



I checked the radio button, saved my settings, and went directly to write this post. The thing I like best is the little resize box in the bottom

Cross posting from Pigs, Gourds, and Wikis

So, I've decided to cross post my technical articles from Pigs, Gourds, and Wikis here as well. You can use the labels cloud to find them (click on Tech or Tips). They have the same dates as when they were originally published on my other blog.

Labels in Blogger blogs viewed as a Cloud

If you viewed my other blog last week, you would have seen a rather unwieldy, definitely endless list of labels like the one shown at left. Labels are Blogger's way of helping you categorize your blog posts so that readers can jump to an entire set of posts of interest. However, as the list gets longer, and disappears off the bottom of the screen, it also gets a lot less useful.

Of course, the first problem is that it's not easy to label your posts effectively in the heat of the moment. For example, I have a number of labels for the individual animals on our farm, where really it would probably be a lot more useful to have a single "animals" label. You can go back and edit your labels either at the Dashboard or by editing individual posts. I'll leave that up to you.

Blogger, for its 10th anniversary, has been rolling out some lovely new features, including the ability to display a cloud of labels. This means that your labels will be shown in various sizes, depending on how often you've used them. It gives your readers a clear, visual way to see which topics you visit most often on your blog--and which topics you visit only occasionally.

And since the label cloud is formatted not as a list but as a short

How to create a Flickr slideshow (on Blogger) of any set of photos you want

Or, how to customize Blogger's Slideshow gadget...

Or, how to add an RSS Feed to a Blogger Slideshow...

Oh you say, you can do that really easily by going to Flickr, setting up a set of photos and then choosing Slideshow, and then clicking Share. Poof, there's your embed code, no problem.

Hmm. But that doesn't fit in a Blogger sidebar. Nor does it start automatically. It's not nearly as nice as Blogger's Slideshow gadget.

So how do you get Blogger's Slideshow gadget to show only the photos from a particular Flickr set? Maybe you have several different blogs and you want each one to feature photos from a different set on Flickr.

If you choose Flickr in Blogger's Slideshow gadget, you can then choose a Flickr username or a keyword, but not both.

The answer lies in Flickr RSS feeds.

An RSS feed is way of subscribing to an often-changing Web site, like a blog, or a frequently updated Flickr set. It's a text file, and generally you link to it by referencing its URL.

Flickr automatically creates RSS feeds for your entire photostream, for each of your photo sets and groups, for your contacts' photos, even for each tag. You can also customize an RSS feed to include only those photos from a particular person with a particular tag.

Once you find (or customize) the Flickr RSS feed that includes the photos you want, you'll add it to the Blogger Slideshow gadget. You'll also need a bit of extra code, which I'll explain shortly.

Let's begin by using the RSS feed from a particular photo set. Go to Flickr and display the desired set. It can be a set that you created, or a set that someone else created. The RSS feed will only include public photos.

When you display a set, you'll see the index photo for the set to the left, and thumbnails of each photo in the set in a group to the right.



Scroll down to the bottom of the page until you see the RSS feed icon:



Right-click (on Windows) or Control-click (on a Mac) the Feed link and choose Copy Link Location (or whatever your browser calls it). You've now got most of the RSS feed. It'll look something like this:

http://api.flickr.com/services/feeds/photoset.gne?set=72157594145848803&nsid=97352149@N00&lang=en-us

In a perfect world, you should be able to open Blogger's Slideshow gadget, choose Other for Source, and then paste in the RSS Feed code in the Feed box. Unfortunately, it doesn't work.

Fortunately, Rick Klau at Blogger sent me the solution (provided to him by Brett Wiltshire, a Blogger engineer): append &format=rss_200 to the end of the feed code.

The RSS feed URL will then look like this:

http://api.flickr.com/services/feeds/photoset.gne?set=72157594145848803&nsid=97352149@N00&lang=en-us&format=rss_200

Go to Blogger, click Layout under the desired blog, and then click "Add a Gadget".



Choose Slideshow from the list that appears.



In the Blogger Slideshow box, choose Other from the Source box. (You'd think you'd want to choose Flickr, but you'd be wrong.)



Next, paste the RSS feed into the Feed URL box. Make sure you append &format=rss_200 to the end of what you copied from Flickr.



Note: A couple of my photo set feeds didn't work. When I wrote Rick and Brett again, they told me that sometimes you have to append &format=rss2 instead. And indeed, that solved the problem.

You'll know if the feed is working because Blogger will show a preview of the slideshow right in the dialog box.

And you're done. Now you can create a Blogger Slideshow from any photo set from any Flickr user!

Next, I'll explain how to customize the Flickr RSS feeds to use tags, usernames, and sets.

(Thanks Rick and Brett!)

Using new fonts from Kernest on Blogger

Are you sick of Times and Helvetica? Not to mention Trebuchet, Gadget, Arial, and Courier? It seems crazy in this day and age where you can output a gorgeous print document with beautiful fonts that the Web still be limited to a very short list of fonts. Especially since CSS has been capable of handling many more fonts for more than 10 years. But font foundries were wary of setting their fonts free and browser companies like Microsoft, Netscape, and Apple couldn't quite agree on what font format to support.

Thankfully, not everyone has been waiting around to see what shakes out, and have taken matters into their own hands. One of these guys is Garrick Van Buren, a developer in Minneapolis. He's gotten permission to make a big collection of fonts available on his server, for free, and figured out how to serve the appropriately formatted font to each browser as it requires. He told me there will be upwards of 400 new fonts by this weekend.

I've been itching to experiment with some new fonts... so I thought I'd give it a whirl. You can see the results right here in my blog. The title of my blog, Pigs, Gourds, and Wikis as well as the sidebar headers, date header, and post headers are all set in Taggeschrift, a sort of steampunk style font that matches the retro-newness of the topics I talk about here.

Here's how I did it. (Note, I haven't posted all the screenshots to this article, some are linked so they don't distract so much from the text. If they're particularly big but necessary, I insert a smaller version. Click on it to see the full version.)

First, go to Kernest.com and log in. Make sure you write down your password because there's not an easy way to recover one yet if you forget it (like I did :) though Garrick is working on it.

Maybe it's me, but once I logged in I wasn't quite sure what to do.



So I'll tell you... go looking for fonts. See if you like any. Click on the Find more fonts by... link to see all the fonts in Kernest's collection sorted by style, license, foundry, designer, or family.



Once you're within a category, you'll see samples of the fonts themselves. If you're curious about a font, click it's sample text.



You'll get to the font's page on Kernest (notice the URL is http://kernest.com/font-name). You can type new sample text in the box at the top, perhaps to see how a particular header might look. And you can also just view the font at various standard sizes.



To use a font on your site, you need to add it to a project. A project is just another name for the web site where you're going to use the font. You add a project to your profile by adding its URL to the New website? box. If you've already created the project, it will appear in the USE '[THIS FONT]' ON YOUR WEBSITE box, and all you have to do is check it's name or URL. Otherwise, type its name in the New Website? box. Either way, you'll then click the Add to Selected Websites button.



A message will momentarily flash at the top of your screen saying the font was added to your project, but I didn't find it particularly obvious how to use that information. The key is in the second sentence: Click project name's for embed code. (It means Click the project's name to get the embed code.)

So that's what we'll do. In that little beige box where you just clicked "Add to Selected Websites" you should now see the title of your project turned into a link. Click it.



This will bring you to your project page, found at http://kernest.com/projects/[your project name], where your project name may have the dots replaced by dashes. And it's where you'll find the needed code.



You basically need two chunks of code, as my 3rd edition HTML book explained more than 10 years ago. First, you need to import the font using the @font-face rule. Kernest makes it relatively easy by creating a CSS style sheet on its server that contains the rule that you'll need for your site. To use it all you have to do is click in the PROJECT EMBED CODE box, and copy everything that's there. If you want, click the Show Raw CSS link to see exactly what the style sheet looks like. It's pretty straightforward. The link will look something like this:

<link href="http://www.kernest.com/www-pigsgourdsandwikis-com.css" media="screen" rel="stylesheet" type="text/css" />

(You can get more information about linking stylesheets on page 129 of my HTML, XHTML, amd CSS, Visual Quickstart Guide, Sixth Edition.)

If you like, you can copy the @font-face rule out of the style sheet and paste it directly into your own CSS style sheet. It's up to you. The advantage to leaving it on Kernest is that if you add a font later, the style sheet and rule will be automatically updated.

Now, where do you put that "embed code" or link element, which is nothing more than a link to the CSS stylesheet on Kernest? Anywhere in the <head> area of your Web site, preferably up near the top.

In this example, we're going to use it for a blog, so we have to dive into Blogger's innards. Go to your Dashboard on Blogger, and click Layout under your desired Blog.



Then choose Edit HTML from the Layout tab.



Now you'll see the HTMLly underbelly of your blog. Right there at the top, you should see the <head> section where you can stick in the link to your new Kernest stylesheet. Paste it right in.



OK, now Blogger can import the font, but it doesn't know where you want to use it. In a simple Web site, you'd just need to set up some font-family CSS rules and apply them to different selectors, perhaps you want the h1 elements to use one font and the body to use another.

Blogger however, has another layer of information that goes on between its database and the output, namely a number of variables. Currently, Blogger has five text variables. In the Minima template that I'm using as a base, they're defined right up at the top of the stylesheet, just below the <head>. Scroll down a bit and you'll see them. The first chunk of them are variables that affect the color of objects, and the last five have to do with fonts. (It's set up this way so that you can change them by using the Fonts and Colors tab, but we're going to bypass that simpler but very limited system.)



The first of the five text variables is called "bodyfont". It affects every bit of text on the page, including, but not limited to the body text, the sidebars, the headers, everything. Think of it as the base style for your entire body.

The second variable is "headerfont" but it really only applies to the Sidebar headers and the Date Header (which appears above blog posts). This is a good place to use your new font. In Blogger's Minima style, there is a list of fonts that will be used, in order of preference. Replace the first font on the list with your new font from Kernest. You should probably use quotes if you've got a multi-word font name, otherwise, don't.

Variable number 3 is "pagetitlefont" and is only used in the Header area for the title of your blog. I used Tagesschrift here too.

The fourth text variable is called "descriptionfont" and is used exclusively for the description text that appears below the title of your font in the header. My steampunk font is a bit wobbly for that little text, so I left it in Trebuchet.

The last text variable is "postfooterfont" and as expected, affects the text that appears in the footers below a blog post that contain the name of the blogger, the time the blog was posted, whether or not there are comments, etc. Strangely enough, it also is used for some bits and pieces of the sidebars (though not the sidebar headers).

Of course, all this is all specific to Blogger's Minima template. You may need to dig in and experiment with your own template to see what each variable applies to.

Even when you've figured out the variables in a given Blogger template, you'll realize that some of the variables are way too broad (like bodyfont) and some are way too specific (like descriptionfont), or at the least, there aren't enough of them. That's when you dive into the CSS rules themselves. Scroll down a little further and you'll see the CSS rules that are applied to each and every element on your Blog.

Don't know what kind of element something on your blog is? View your blog and View source. Search for the text in the element and then sleuth out what kind of element it is. Then go back to Blogger's Edit HTML page and find the offending element. Then change the font-family, (or the size, style, or color) as you like.

For example, to change the font of the Blog post titles, I had to scroll down until I found the .post h3 selector which controls them. Then I added the font-family: 'Tagesschrift'; rule.



Use Blogger's Preview button copiously to view the changes to your blog before you publish them and make them live. Be sure and test it in as many browsers as you can. As far as I can tell, Kernest's font serving system works great at least in Firefox, Safari, and Internet Explorer, which covers the vast majority of my visitors. And it looks cool!

Here's what this site looked before Kernest:



And here's what it looks like now: (course you can see it right here as well):