The Quixotic Engineer

New header/favicon today, and a renewed appreciation for the hard work of graphic artists. While the Blogger template I had before did look a little more professional, I think I did pretty well for an amateur (go go MS Paint!). I figured out how to make these modifications using a combination of guides and trial & error. I’ve compiled the information I found into the small guide below, I hope you find it useful.

Using an Image as a Header

I found most of the information on how to make this modification here. The first step is to remove the old header. Blogger doesn’t allow you to remove it as a page element normally, so we’ll have to change the template html first. From the Blogger dashboard go to Template > Edit HTML. Back up your template and then look for the following code:

<b:widget id='Header1' locked='true' title='YOURBLOG (Header)' type='Header'/>

Replace the word true with false and save your template. You can now remove your old header as you would any other page element. We will now replace it with the image header, which I recommend you use Photobucket to host. Go to Template > Page Elements, and create a new Javascript/html page element, then insert the following code:

<a href="YOUR BLOG'S URL"><img src="YOUR NEW IMAGE HEADER'S URL" /></a>

Move this new Page Element over to where your old header used to be and hit the “Save” button. However, depending on your template, you may notice that you still have a small piece of your old header above your image. To remove this, delete the following line of code from your template’s html:

<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'/></div>

Using a Favicon with Blogger

See that little picture next to the “http” in the address bar? That’s called a Favicon, and by default Blogger gives you an orange one with a letter B. If you’d like to change this to your own icon, first head on over to FavIcon Generator and save the .ico file it generates. Usually, a webamaster would host this on their own site, but since you can’t do this on Blogger we’ll have to host it externally. Since Photobucket doesn’t let you upload .ico files, so I recommend you use ImageDip. Next we’re going to edit the html template, so once again remember to back up your template before modifying it. Look for the following line:

<title></title>

Once you’ve found this line, add the following code one line above it:

<link rel="shortcut icon" href="Your .ico file's URL" />

Save your template and you’re done. Thanks to Tips for New Bloggers and My Tech Life for information on how to do this.

Fellow blogger Nectarine gave me a tip recently to check out a site called Last.fm. I’ll admit that I had heard of it before, but I had never bothered to browse my way other there until today. The site essentially creates a custom radio station tailored to your tastes. That in itself is not especially unique; there are many sites that provide similar custom radio channels. There are three things, however, that in my mind really set Last.fm apart.

First is the sheer variety of artists. Last.fm appears to have collaboration from not only all of the major labels, but also a great variety of indie labels. You don’t only get the hit songs either, because Last.fm has full albums. Furthermore, since musicians can upload their own music to the site, there are opportunities to get to hear some great up and coming unsigned bands.

Secondly, Last.fm gathers data not only from what you listen to on their site, but also from what you listen to on your computer. Downloading the lightweight Last.fm software allows them to track what you’re playing from a wide variety of media players. I was initially a little wary about a company tracking information about how I listen to music, but the program is open-source and only extracts the song’s name, artist and album from the ID3 tags. This information is used to suggest new artists that you might enjoy.

Finally, the system by which Last.fm recommends new music is very well done. If you hear a song that you really enjoy, you can add it to your Love list to hear similar songs more often. If you really dislike one of the suggested songs, you can simply click the Ban button to ensure that you never hear that song again. It’s a simple, intuitive interface that works really well (unless you click the wrong button like I did, because there seems to be no way to undo a ban) [Edit: turns out you go to View Profile > Recently Banned in the Last.fm software, right click and "Undo Ban"].

Here are some of the great artists/albums/songs I’ve discovered through Last.fm today:

• Brainfreeze Breaks, album by DJ Shadow & Cut Chemist.
  I’m can’t say that I have much experience with turntable music on the whole, but I love soul music. These two mix wizards apparently took some of the rarest old soul vinyl records (some virtually impossible to find today) and ripped them to shreds making this remarkable album. I’ve been listening to it all day; it’s astoundingly good.
• Call Me Up In Dreamland, song by Van Morrison
  Heard this track while listening to “Sounds Like: Paul Simon”. Great track from his early days that I hadn’t heard before.
• Time to Kill, song by The Band
  Another fantastic song I hadn’t heard before by an artist I love, apparently off the Stage Fright album (which I’m now going to have to check out in its entirety).

Not bad for one day’s work. Go check it out for yourself.

I had announced last Friday that I was being an eager beaver and taking advantage of the improved Feedburner integration for Blogger. However, like all early adapters, I’ve had been unfortunately burdened with the unresolved issues of the new technology. Specifically:

• Once enabled, Google will redirect your Atom feed subscribers to Feedburner. However, Blogger also publishes a second feed (in RSS format) which for some reason it does not redirect. Feedburner won’t be able to collect statistics about people who subscribe to the non-redirected feed, making your efforts fairly moot.
• Bloggers who use their Atom feed as a sitemap for Google will receive errors due to their Feedburner feed being in a different domain than the rest of their blog.

Using a bit of creativity, however, I do believe I’ve found a suitable workaround that should allow motivated Blogger users to integrate Feedburner and Google sitemap without these problems.

UPDATE: Easier Method
Commenter Lamer came up with an even simpler way to integrate both feedburner and Google sitemaps. Turn on the Feedburner redirection (Dashboard > Settings > Site Feed) and then use http://YOURBLOG.blogspot.com/rss.xml?orderby=updated as a sitemap (for whatever reason Blogger does not redirect this XML file). Simple and efficient, thanks Lamer! The rest of this post goes on to describe the old, more complicated method, which may be useful if you want to modify your autodiscovery tags.

Note: I do not recommend the trick explained below if you already have a sizeable number of subscribers to your Atom feed that you want to redirect to your Feedburner feed, since they will no longer be redirected afterwards. Use the updated trick above instead.

Preparation:
Set up a Feedburner account. When it asks you for your Feed URL, type in “YOURBLOG.blogspot.com/atom.xml”.

Next, under the Blogger dashboard, go to Settings > Site Feed and clear the “Post Feed Redirect URL” field. This will stop Blogger from redirecting people who try to access your Atom feed.

Step One: Modify Your Autodiscovery Tags:
To credit my sources properly, I learned how to do this from a post by matt in the Feedburner forums that has since had its contents removed.

With your blog open, view the html source of your page. Look for a block of code similar to the following:

<link rel="alternate" type="application/atom+xml" title="YOURBLOG – Atom" href="http://YOURBLOG.blogspot.com/feeds/posts/default" /> <link rel="alternate" type="application/rss+xml" title="YOURBLOG – RSS" href="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=rss" /> <link rel="service.post" type="application/atom+xml" title="YOURBLOG – Atom" href="http://www.blogger.com/feeds/9501038560806028465/posts/default" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=9501038560806028465″ />

Copy the similar looking block from your blog’s html source code and paste it in a temporary .txt document. You may now close your Blog’s html source.

We’re now going to modify what you just pasted into the .txt document. Replace these two lines:

<link rel="alternate" type="application/atom+xml" title="YOURBLOG – Atom" href="http://YOURBLOG.blogspot.com/feeds/posts/default" /> <link rel="alternate" type="application/rss+xml" title="YOURBLOG – RSS" href="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=rss" />

with the following:

<link rel="alternate" type="application/atom+xml" title="YOURBLOG – Feedburner" href="http://feeds.feedburner.com/YOURFEEDNAME" />

This next step will involve modifying your Blogger template. I strongly urge you to backup your Blogger template beforehand in case you make a mistake. From the Blogger dashboard, go to Template > Edit html. Look for the following line in your template’s html:

<b:data='blog' name='all-head-content'>

Delete this line and replace it with the contents of the .txt file you saved earlier, then click “Save Template”. You have now successfully modified the autodiscovery tags, and browsers that auto-detect RSS feeds will now be directed to your Feedburner feed only.

Step Two: Use Your Atom Feed as a Sitemap
If you have Google’d your own site, you may have noticed that not all of your individual Blog posts have been indexed. One way to help this along is to provide the Google webcrawler with a sitemap. A sitemap is an XML document that tells the crawler how to properly index all the pages on your site. As Blogger users, we cannot write our own sitemap file, but we can use our Atom Feed as a sitemap.

To begin, sign into Google Webmaster Tools using the same Google account that you use for Blogger. Follow the on screen instructions to verify your Blog. Once you’ve finished that, click on the “Sitemaps” tab, then the “Add Sitemap” button. Select “Add General Web Sitemap” from the pulldown menu, type in “atom.xml” for Step 3 and click “Add Sitemap”. Google will now be able to use this information to index your site properly.

Current Issues
I so far have not been able to figure out is how to redirect the “Subscribe to Posts” link at the bottom of the page to Feedburner.
UPDATE: Fellow blogger Juls came up with this excellent way to redirect your main page Feed footer while preserving your comment feed! Locate this block of code:

<b:includable id='feedLinksBody' var='links'> <div class='feed-links'> <data:feedLinksMsg/> <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> </b:loop> </div> </b:includable>

And replace it with:

<b:includable id='feedLinksBody' var='links'> <b:if cond='data:blog.pageType == "item"'> <div class='feed-links'> <data:feedLinksMsg/> <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> </b:loop> </div> <b:else/> <div class='feed-links'> <data:feedLinksMsg/> <b:loop values='data:links' var='f'> <a href='http://feeds.feedburner.com/YOURBLOG/' target='_blank'>Posts (Feedburner)</a> </b:loop> </div> </b:if> </b:includable>

Conclusion
This is by no means a perfect trick, but I think it’s a decent way to work around the current Feedburner integration problems and still make use of Feedburner and a Google Sitemap. If you have suggestions, problems or ideas, please feel free to leave a comment.

I have a confession: I hate change. I get so comfortable doing things a certain way that I sometimes resist changes that I know will be good for me in the long run. This gives you a bit of context as to why I’m usually about a year or two behind in upgrading my internet browser and other software. I fight tooth and nail to keep my old version, and only grudgingly submit to an upgrade.

When I finally did upgrade to IE7 (if you’re wondering why I haven’t switched to Firefox, consult the above paragraph), I found a host of features that I actually really enjoyed. As someone who really enjoys blogs and webcomics, I especially enjoyed the RSS Feeds function. In fact, I enjoyed it so much that I thought I’d write a quick guide to help my fellow luddites embrace this technological wonder.

What is an RSS Feed?

Websites such as blogs and webcomics syndicate new content at certain intervals. The old fashioned way to check if a website had new content was simply to visit it and check. However, if a website adds new content infrequently or irregularly (I’m lookin’ at you, VG Cats) this can become time-consuming and frustrating. Wouldn’t it be nice if there was a way for website owners to tell interested users that new content was available?

The solution is an RSS Feed (an acronym for Really Simple Syndication, believe it or not). Website owners create a feed site for their page on which they publish new syndicated content. Using a compatible internet browser (or an aggregator), a user can subscribe to these feeds (more on that later). Once subscribed, the browser will check for new content from that feed according to a time schedule and notify the user when new content is found.

How do I subscribe to a feed?

Here is a step-by-step guide to using feeds in Internet Explorer 7 and Firefox 2.0.0:

1. Surf over to a site that you’d like to subscribe to. For this example, we’ll use my site, The Quixotic Engineer. If a website has an RSS Feed available (not all sites do), the RSS Button on your browser will turn orange. If so, click the RSS button (picture below). Alternately, there might be a button on the page labeled “Feed Site” or “RSS Feed” that should link you to their site feed.

2. The site you will find yourself on is the site’s feed. There should be box at the top of the page similar to the one in the picture below (click to enlarge). Click on the “Subscribe to this feed” button to do exactly that.

OK, I’ve subscribed to a feed, what now?

Here’s where IE7 and Firefox divert a little.

• In Internet Explorer, feeds are saved under the “Feeds” portion of the favorites menu. To get there, first click the yellow star in the top left corner of the screen, then click on “Feeds”. All the feeds that you’ve added will be here, sorted in alphabetical order. Feeds with unread content are bolded. If you right click on the feed, you can specify how often you would like the computer to check for new content.



• In Firefox, using what is called “Live Bookmarking”, feeds are treated like a favorites subfolder which can be moved anywhere in your favorites folder. Click on a feed and it will open like a folder, showing the latest posts from that site. This is only one option for handling RSS feeds in Firefox, however. There seem to be add-ons that let you handle feeds differently according to your preference. If you’re reading this post and have experience with Firefox RSS, please leave a comment and I will alter this post accordingly (and credit you, of course).
  

My limited experience with Firefox notwithstanding, I hope that you, my fellow slow adapter, are convinced and have the tools necessary to start creating your own RSS library. Godspeed.