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

I wish my grandma was on Facebook

Sept 12/86

Dear Liz

Hello and hope you are in the very best of health as for us we are doing just great at present.

Liz, am sending you the negatives from the pictures you took. They came out very nice. Thanks. Sorry I forgot to send it back. But you were away and then we have been busy with the Golden Agers. We have some real nice trips for them.

In fact a week from this Saturday we are taking 30 people to Hawaii for nine days and eight nights for $875. Not bad. Grandpa goes for nothing but I pay $775. It's still not bad for the two of us with some dinners and shows plus breakfast and the tour plus the airline. Boy I am glad we took this group job. It fits Grandpa and I really love it.

And when we come back we are taking a busload to Reno on the 7th and 8th of Oct. When we come back we are taking 20 persons to Epcot for eight days.

How was your Spain trip? Your Dad told me you were home and got a job. That is beautiful. best of luck and God bless you darling. We love you. Adios my dear Liz.

Love,
Grandpa and Grandma Rose Castro

Am sending you a good recipe for a custard pie. Try it you will love it. And put some cream on top (WOW) (WOW). Let me know if you make it.

---

Oct 16 1986

Dear Elizabeth:

Hello and hope you are doing OK. As for us we are just great at present.

Liz, how is the teaching? Are you teaching young or over 16 years old kids? Have not heard since you went to Spain. So I gather you must be more than busy. We are busy ourselves these days. We love this job we got with the Golden Agers. As a matter of fact we are leaving for Orlando, Florida this Saturday 18th at 530am in the morning from in fromt of the City Hall. We are taking 18 persons. We are looking forward to this nice trip.

Liz, did you get the card from Hawaii? I can't go anywhere and don't send my darlings a card so you know that I am thinking of you. I love you too much to forget my darlings.

Hope to see you sometime again. Will close for now. Adios my darling, keep well.

Love you,

Grandpa said I write everything so I don't leave anything for him. Ha ha for him.

love,
Grandma Rose and Grandpa John Castro

My Grandma Rose wrote me a letter almost every week of my life. I saved them all, even though practically every one focused on the most day-to-day details of her life: where they were going on a trip, who was visiting, who they were going to visit, if they were sick or healthy, what recipes she had tried. But it didn't matter that there was no (overt) philosophy or deeper discussions, what those letters offered was a portrait of my grandmother (and a glimpse of my grandpa). I loved getting them, and I cherish having them still.

I've been thinking about them today after an interesting conversation I had with some friends last night about Facebook and why anyone should bother with it. I've only been on Facebook a week, but I mentioned that I've really been enjoying reading about the absolutely mundane things my friends are posting about: impending visits, weather reports, illness--precisely the same things my grandma wrote about.

It makes me think, also, of The Midwife's Tale: The Life of Martha Ballard, Based on Her Diary, 1785-1812, by Laurel Thatcher Ulrich. Martha Ballard was a midwife in New England at the turn of the 19th century who wrote in her journal every single day for 27 years. Sometimes her posts (!) were limited to weather reports, other times she detailed a difficult birth or a community gathering. But she was relentlessly steadfast, and the sheer regularity of her posts offer an almost complete description of herself and a thorough depiction of her life and of those who lived in her community. Had she lived in our time, she would have had a blog for sure.

Why did Martha Ballard write every day? Why did my Grandma or my friends on Facebook? Why do I write this blog? And perhaps more importantly, why do we all write about such trivial details? This ties in with so many other thoughts about my life... the fact that I spend such a huge amount of time creating things that are much more easily bought (pork chops and pajamas come to mind). Or plowing the driveway, or planting a garden. Why spend time on these little things? I think because they are the essence of life. They are life. So, I think that's why it makes sense that I am interested in hearing about these things when my friends do them. It gives me a fuller picture of who they are to know that today they slept in but yesterday they took their daughter to see The Tale of Despereaux.

I only wish my grandma were still around so I could teach her how to update her status on Facebook.

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.

Embedding an Already Embedded YouTube Video

What do you do when you see a YouTube video and you want to either send someone a link to it, or embed it in your own page? It's easy if you're viewing the movie right at the YouTube site. You can find the link you need to copy in the address bar:



and the code to embed the video in your blog post or Web site is over in the right-hand column:



But what do you do if you've found an embedded YouTube video on someone else's blog or Web site? Normally, you'd right-click (or Control-click) to copy the URL, but that won't work in this case, you'll get the menu options for the Flash Player, which won't be helpful.



What you have to do is hover over the small upward arrow in the lower-right corner of the embedded Video until the Links icon appears:



Then click the Links icon and the video itself will shrink into the upper-left corner, while the code for Embedding the video and also for linking to it will appear on the right-hand side. Simply copy it to your blog post or Web page and you're all set.

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.

Subscribing to a blog

I've been talking and thinking about blogs a lot. I thought I only read two: O'Reilly Radar, which is a technical blog about "insight, analysis and research about emerging technologies" and Zeldman.com which is a blog written by Web design and standards guru, Jeffrey Zeldman. But each day when I go to my personalized Google page, I am reminded that I am subscribed to a few more than two. I don't actually read every post every day, but by having new posts appear on my iGoogle page, I can see which ones I want to read and skip the ones I don't have time for.

Why subscribe to a blog? I am just not the kind of person to remember to go to different sites and see if there's something new. By subscribing to a blog, I can see when there is a new post, and even read that post (or sometimes an excerpt of it) without going anywhere special (or remembering any addresses).

There are stand-alone programs (RSS readers) that let you follow blog posts, but for me it's easier just to use Google Reader and have the blogs appear on my iGoogle page. I realized that I wasn't yet subscribed to my friend Nancy Bea's blog, so I thought I'd walk you all through it...

An iGoogle page is a personalized Google page. Besides searching the Web, I use mine to see new pictures from my friends' Flickr accounts, check my Calendar, look at weather reports, follow news articles, read the comics, and finally, follow blogs with Google Reader. If you have a Google Account, you can set up an iGoogle page of your own. From Google's main page, click Sign in in the upper right corner:



Next, enter your user name and password. Then click iGoogle, also in the upper right hand corner:



If you don't have Google Reader on your iGoogle page, just click the "Customize this page" link at the top right to add it.



Just type "Google Reader" into the Search for gadgets box and when Google Reader comes up, click the Add it now button under its logo:



Here's what my iGoogle page looks like:



As you can see above, my Google Reader is in the top right corner. You can see the title of each new post along with the name of the blog that it comes from. I have it configured so that when I click on a post name, the post is expanded in a bubble:



Some blogs let you read the entire post right here, photos and all. Others (like Zeldman's) only give you a brief excerpt and you click "Show original item" if you want to jump to the blog in question. (Configure your iGoogle gadgets by clicking the down arrow next to their names.)

OK, so how do we add a blog?

First, navigate to the blog you want to subscribe to.



Next, find the Subscribe link or button. Nancy Bea doesn't have a "Subscribe" button per se, but down near the bottom of the page, you can find a little "atom.xml" link. That'll work too. Anything that says "atom", "RSS", "feed", or "Subscribe" should do the trick. In this case, we'll click that atom.xml link.



You'll jump to a page that displays the "feed" for the blog, that is, what is sent to subscribers.

Because of its extension, Firefox understands that it's a feed and asks if you want to subscribe. (I haven't tested this yet with Explorer, but I'll try to.) Choose Google from the "Subscribe to this feed using" menu and then click Subscribe Now.



Google asks if you'd rather add the blog to your homepage or to Google Reader. If you want to see all the posts from a particular blog in one section on your iGoogle page, choose Add to Google homepage. I want all my blogs together in one section of my iGoogle page, so I choose Add to Google Reader.



You'll be transferred to Google Reader where you can adjust your settings, if necessary. (I didn't do anything here.)

When you next go to your iGoogle page, you'll see Nancy Bea's latest post in your Google Reader. It won't necessarily be up at the top of the list, since all your posts are in chronological order:



I'm also not sure why the title of her most recent post "More travels" did not appear here. It maybe the way the feed was constructed.

I have a pretty standard Subscribe button on this blog. Let's see if it works the same way.

So, navigate to my blog... oh, you're here already :)

My Subscribe buttons are below the labels. Click the Posts pop-up menu and then click "Add to Google".



This time we go straight to the choice between adding it directly to my iGoogle page or to Google Reader. I'll choose Google Reader again.



Next time you view your iGoogle page, you'll see the latest posts from my blog!



Let me know if that all makes sense and if it works in your browser.