Use Feedburner & BuzzBoost to create a printable blog

Tweet

After creating the blog you're reading, I wanted to create a printable pdf version of it. I searched for automatic online/offline conversion tools without satisfaction. Some apps are good but not customizable, or sometimes the result was not what I wanted. Then I decided to try another way.
In order to create a "dynamic", customizable and printable version of your blog, you need to subscribe to FeedBurner (if you use Blogger you can actually use your Google account to gain access to FeedBurner). In the dashboard of your feed select the Publicize tab and then BuzzBoost. The service republishes your feed content as HTML and it allows to paste a JavaScript snippet wherever you like.
On the page mentioned, you can configure the service to your needs and BuzzBoost will produce a little piece of JavaScript code that you can use on a HTML page. Copy the code in a new blank page and save it on your desktop. Once you open it, you will see your feed being retrieved from the blog.
Now, the page doesn't look like a printable document, so we need to customize it with css styles.
First of all have a look at the tips provided by Google, then try and customize the styles yourself.
As an example, here is my style:

<style type="text/css">
<!--
.feedTitle {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #FFCC66;
    font-weight: bolder;
    text-decoration: none;
    display: none;
}
.feedTitle a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #FFCC66;
    font-weight: bolder;
    text-decoration: none;
    display: none;
}
div {
    display: block;
    text-align: justify;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    margin-right: 15px;
    padding-right: 15px;
}
.headline a {
    text-decoration: none;
    color: #0066FF;
    font-size: 24px;
    margin-top: 10px;
    font-weight: bold;
    list-style-type: none;
    list-style-image: none;
    display: block;
}
body {
    background-color: #FFCC66;
}
div.feedburnerFeedBlock ul {
list-style-type: none
}

div.feedburnerFeedBlock ul ul {
list-style-type: disc;
}

div.feedburnerFeedBlock ul ol {
list-style-type: decimal;
}
.blogger-post-footer {
    page-break-after: always;
}
#creditfooter {
    display: none;
}
code {
    font-family: "Courier New", Courier, monospace;
    color: #000000;
    text-align: left;
    font-size: small;
    background-color: #FFFF99;
    display: block;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #0066FF;
    border-right-color: #000066;
    border-bottom-color: #000066;
    border-left-color: #0066FF;
}
.date {
    color: #0066FF;
}
-->
</style>

When the page is ready, and you like the style, you can print it out as a pdf using - for example - pdfforge or your favourite pdf printer.
I discovered lately that you might have problems with the number of posts showed in BuzzBoost. If you want to show more posts just add "?max-results=X" (where x=max number of posts) into FeedBurner's feed details: just look for the URL of your feed into the "Original Feed" field. Piece of cake!