Formatting Blogger's Read More

As part of Blogger's 10th anniversary celebration, they announced last week that they had added an easy Read More feature to their popular blogging software. The Read More feature (also called a jump break) lets you limit the amount of a long post that will appear on your main page, and offers a link to the rest of your post for those who want to, well, read more. The Read More feature lets your visitors see the beginnings of several different posts at once instead of having to scroll through very long posts to see what else there is.

Using the Read More feature is really easy. First, make sure you're using the new Compose tab, as I described in Blogger's new post editor last month. Then, place your cursor in your 

Monetizing my blog

Or not. It's mostly an experiment. I'm working on the second edition of my Blogger book, and I'm trying to figure out how to help people make their blogs a money-making proposition. Of course, Google/Blogger have this AdSense program that places supposedly-relevant ads on a blog, but every time I see a page filled with those ads, I automatically think they're trying to scam me. So, I'm wondering a couple of things. Are there real blogs with useful content that include Google AdSense ads? And do the ads generate income for these folks? If you know the answer, I'd sure love to hear it.

Back in February, I wrote a Web site documenting every possible layout of an iPhoto Book.  At one point, it got mentioned in TidBITS, and I was getting several hundred hits a day, quite a lot more than normal. It's leveled off quite a

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

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):

Blogging Flickr photos (part 4)

The other day I got a comment on the third installment of this series asking how to wrap text around photos inserted in the manner I describe there.

It's a very good question. If you use either Flickr or Blogger's automatic tools, they do the wrapping for you. But if you insert images the way I recommend, in order to link to your Flickr site from your blog, then you'll have to wrap text around them (or center them) on your own.

Fortunately, it's not difficult. Start with part 3 of my tutorial on Blogging Flickr images manually.

In this example, we'll use a photo that is narrower than it is tall. We choose the Medium size on Flickr (289 x 500 pixels) and copy the automatically generated code for the image from box number 1.



Next, paste the code into your blog post:



Adjust the width (and remove the height) if necessary, as described in part 3. In this example, so we can really see the text wrap, I've reduced the width to 200 pixels and removed the height.

Next, after the width, add the following:

style="float:left; margin:0 10px 10px 0"

Don't forget the quotation marks at the beginning and at the end!

It should look like this:



Now when you view the photo, the text that follows the image, and indeed anything else that follows the image, will wrap around to the right. Don't put anything but a space between the chunk of code and the following paragraph so that your text is aligned to the top of the image.

You can have the text wrap to the left of the image by using float:right. Remember the image floats to the side you tell it and the text goes around the other side.

You can adjust the space around the image by adjusting the values next to margin. The numbers refer to the number of pixels of space to the top, right, bottom, and left, in that order. (Start at the top and go clockwise.) So, if you float your image to the right (and the text goes to the left, you should use something like: margin: 0 0 10px 10px. Be sure to always specify px unless the number is 0.

These bits of code are CSS and are explained in detail in my book, HTML, XHTML, and CSS, Visual QuickStart Guide, Sixth Edition, published by Peachpit Press.

P.S. That's my llama! Her name is Rosie.

P.P.S. You can find the first three parts of this series on Blogging Flickr photos here, here, and here.

How to add comments to a blog post

My mom asked me the other day how to add comments to this blog. I realized it wasn't as straightforward as it should be to add comments to Blogger posts. So, I thought I'd give a quick tutorial here.

The most confusing thing is that on the main page of a blog, where several blog posts are listed at once, it's not at all obvious where to go to post a comment. In fact, it's downright hidden. But it's there if you know where to find it: It's the place that says the number of comments. Here's what it looks like on my blog:



And here's what it looks like on fivethirtyeight, another Blogger-based blog:



So, to add a comment, you click on the place where it says "0 comments" or "248 comments" or however many. And then you'll see something like this:



If you just see a long list of comments, but no place to add yours, like on fivethirtyeight's site, then scroll on way down to the bottom until you see where it says "Post a comment":



When you click "Post a comment" you get the box (like the one shown above on mine) where you can actually add the comment--though it's down at the bottom of the page.



Once you get here, you can add your comments in the box at the top (under Leave a comment). You can even add a bit of formatting... add <b> before and </b> after text you want bold, the same thing with the letter "i" if you want italics, and if you want to add a link, add <a href="the page's url here">the clickable text here</a> Be careful with all that punctuation, it's all required. (To get the URL of the page, just go there and copy the address from the bar at the top of your browser window.)

Some blogs require that you sign in, some don't. Some require you to have a Blogger account, some don't. It's all up to the person who creates the blog. (On this blog, you can post comments anonymously, though I moderate them all before making them public.)

One more thing, if you're viewing a blog post's individual page... perhaps you clicked there from the navigation bar on the right, or you followed a link from another site, you'll see the Post a comment link at the bottom of the post automatically.

Further, like fivethirtyeight, some people have set up their blogs so that when you click the "n comments" link, you go to the post's individual page, not the Leave a comment page. In that case, just scroll down to the bottom of the list of comments and find the Post a comment link. That'll always bring you to the "Leave a comment" box.

Blogging Flickr photos (part 3)

It seems crazy that I have now spent huge amounts of time explaining how to blog Flickr photos using two methods that I practicallly never use. The first method, using Flickr's Blog This button is great for blogging about a single photo when you don't need to add a lot of extra formatting. The second method, using Blogger's Insert Images button is best if you haven't already uploaded your photos or if you're not interested in linking them back to your Flickr site.

But the truth is, I want people who read my blog to go browse my Flickr images (and I want people who browse my Flickr images to read my blog :). While the first method described above will create a link to my photo's Flickr page, I can't deal with the limited formatting and only being able to include a single photo. So, I'll explain my favorite method of blogging Flickr photos.

First, go to the Flickr page of the first photo that you want to write about. Click the All Sizes button above the photo:



On the Available Sizes page, choose the size with the width that is closest to the final size that you want to display the photo at. I'm going to display my photos 400 pixels wide, so I choose the Medium size which is 500 pixels wide.



A 500-pixel wide version of your photo will be displayed. Below the image itself, you'll find a chunk of HTML code that displays the image and creates a link to the image's Flickr page.



Copy that chunk of code.

Now, switch to Blogger and paste the HTML code into your post. Notice the width and height attributes near the end of the code.



You can now adjust the width to the desired number of pixels (400 in our example). Get rid of the height attribute altogether; the height will be calculated by the browser automatically, depending on what you put in for width.



Why is there so much code there? The a tag is the link part that will bring visitors to your Flickr page when they click the image. The title attribute within the a tag displays descriptive text when your visitor hovers over the image. The text is generated automatically from the title of your Flickr photo, and then your Flickr name is added. I generally remove "by Liz Castro on Flickr", mostly because it takes up too much room. You can edit it as desired.

The img tag is what displays the image itself. The alt attribute will also display when visitors hover over the image but is overridden by the a tag's title attribute described in the previous paragraph. Why use both? The alt attribute is required for validation and also for Internet Explorer 5.

It seems like rather a lot to get photos into your Blogger post, but I'm pretty sure it's the easiest and best way. Add a comment if you've got a better method.

(Earlier, I described how to use Flickr's Blog This button to add Flickr photos to your Blogger posts. In part 2 of this series, I showed how you could use Blogger's Insert Images button to add Flickr photos to your Blogger posts. The method that I prefer is the one described in the post you're reading now.)

Blogging Flickr photos (part 2)

The other day, I explained how to use Flickr's Blog This button. But unless I have a single photo to blog, and I don't want to add any links or formatting, I don't usually use Flickr's otherwise helpful "Blog This" button to blog about my photographs (or include photographs in my blog).

Blogger's Insert Images button, which you can find in the top part of the text box where you write your post is an easy way to add images to your blog.



To get started, click the Insert Images button. Your first task is to choose which image you want to insert. You can choose one from your computer by clicking on the Browse button or you can copy the URL of a photo out on the Web, for example, from Flickr.

Selecting an image from your computer is a simple way to get an image into your Blogger blog, but it has a couple of disadvantages. First, and foremost for me is that once you upload the image, it is somewhere on Blogger's servers. You can't edit, label, or tag the image, you can only replace it with another. And it's not easy to link to it from somewhere else, unless you upload it again following this same process. Still, if you don't have a Flickr account (or similar) to host your images, this is probably the easiest way to get them in your Blogger posts.

I do have a Flickr account though, so I want to enter the URL of my photo. Where do I find that URL?

First, view the image in Flickr. That URL up in the address bar will not do the trick unfortunately. (See how there's no ".jpg" extension at the end?)



Next, click the "All Sizes" button, just above the image.



Which size should you use? The answer depends on how big you want the image to be in your blog post. Blogger will let you choose a display size of Small (200 pixels wide), Medium (320 pixels wide), or Large (400 pixels wide) and then will automatically resize your Flickr image accordingly. But since large images take longer to load than small ones (regardless of the size that you display them at), you want to choose the size that is larger than but as close as possible to the final display size. If you choose a Flickr size that is much smaller than the eventual display size, Blogger will increase its size automatically, and though it will load faster, it will end up pixelated and/or blurry.

Once you've chosen the optimum size (I usually choose Medium), scroll down below the image and copy the URL next to option 2:



Then paste the URL in the Upload Images box back in Blogger:


Choose whether to flow the text around the image and on what side and choose whether the final display size should be Small (200 pixels wide), Medium (320 pixels wide), or Large (400 pixels wide).

Click Upload Image (which is a misnomer here since Blogger does not upload the image, but rather creates a link to the image that is already uploaded at Flickr).

The image is added to your blog post.

The advantage to using Blogger's Insert Images button is that it helps you size the image and flow the text around it without having to mess with the code.

You can, however, mess with the code if you're so inclined :)

Suppose you want more options than just Small, Medium or Large?

Once you've followed the steps above to add your image, click the Edit Html tab above the post box:



You'll see all the code that Blogger created for you in order to display your image at a particular size (and flow text around it). Slog through it until you see the Width information.



You can change that width to any number you like--in pixels.



Remember to choose a display size that matches the Flickr size you chose as closely as possible.

You can find Part 1 of this article, where I talk about Flickr's Blog This button, here. My preferred way to insert Flickr images into Blogger posts is described in part 3 of this article. In part 4, I'll show you how to wrap text around images inserted this way.

Blogging Flickr photos (part 1)

My most popular image on Flickr is, sadly, not one of my photographs. It's a screenshot from an old blog post about how to include images from Flickr in Web pages. But the number of views it's gotten (currently just under 4000), along with my latest photo blogging, makes me think it's time to reprise and indeed expand my article so that it covers adding images from Flickr to blog posts (especially, but not exclusively) created with Blogger.

There are lots of ways of adding images from Flickr to your Blogger posts. The easiest, but least flexible, is by using Flickr's tools to blog your photos. First, tell Flickr where you are blogging. You can choose from a few layouts by clicking the Layout link next to your blog name. Then, when you want to blog about a photo from your Flickr stream, click the "Blog This" button above the desired photo:



You'll then get a menu where you can choose the blog that you want to post to, and then two fields next to a small version of your photo. In the first will be the current title of the selected photo. This will be the Subject of your blog post. In the second will be where you can write your blog entry:



Fill in the fields, click Post Entry and your new post will almost magically appear over on your blog.

If you want to blog about a single photo, this method is all right, but it falls down hard if you want to add any additional photos or formatting. Unfortunately, you are limited to writing a plain text entry, and you can't add labels either. These are big negatives for me and so I almost always use a different method, which I explain in part 2 (about Blogger's Insert Images button) and part 3 (about adding the code manually--my preferred technique).

In part 4, I'll show you how to wrap text around your Flickr images that link to Flickr.