Hack 87. Squeeze More Feeds into the Bloglines Sidebar

Tweak Bloglines' style to see more subscriptions without scrolling.

Bloglines uses frames to provide a quick overview of your subscriptions, even as you're reading news. The name of each feed is displayed in bold when the feed contains new unread items. Unfortunately, the layout of the sidebar is space-inefficient, with a larger header and font, so you can see only a limited number of feeds without scrolling.

This user script removes the pretty but useless header from the sidebar and reduces the height of each feed link so that many more feeds are visible at the same time.

10.4.1. The Code

This user script runs on the Bloglines feed-reading page. It checks to make sure Bloglines is in reading mode; if it is in editing mode (for example, adding or reordering your subscriptions), the formatting of the sidebar is not changed.

The code itself is divided into four parts:

Modify font style

First, it sets the font style for the entire sidebar to a smaller size and reduces the interline spacing, so that more lines display in the same vertical space.

Change the header

Next, it hides the Bloglines logo and the tabs for adding and editing feeds. The links for adding and editing feeds are important, but they don't need to be displayed so prominently. Instead of removing them completely, the script moves them to the bottom of the frame, below the list of subscriptions.

Remove extra padding

To make the subscription list flush with the top of the browser window, the script sets the cellpadding attribute of the main <table> to 0.

Reduce logos

We have one last problem: the line height still expands to fit the height of the logo displayed next to each feed. To work around this, the script reduces the size of each feed image to fit within the smaller line height.

Save the following user script as bloglines-sidebar-squeezer.user.js:

 // ==UserScript== // @name    Bloglines Sidebar Squeezer // @namespace    http://www.allpeers.com/blog/greasemonkey // @description  Squeezes the feeds in the Bloglines side panel // @include    http://bloglines.com/myblogs_subs* // @include    http://www.bloglines.com/myblogs_subs* // ==/UserScript== // based on code by Matthew Gertner // and included here with his gracious permission document.body.style["font"] = "x-small/1.2em Verdana, Arial, Helvetica, " + "sans-serif;"; var divs = document.getElementsByTagName("div"); var menudiv = null; var i; for(i = 0; i < divs.length; i++) { var divclass = divs[i].getAttribute("class"); if (divclass == "header-list" || divclass == "tabs") divs[i].style["display"] = "none"; else if (divclass == "hnav") menudiv = divs[i].parentNode.removeChild(divs[i]); else if (divclass == "account" && menudiv != null)    divs[i].parentNode.insertBefore(menudiv, divs[i]); } var tables = document.getElementsByTagName("table"); tables[0].setAttribute("cellpadding", "0"); var imgs = document.getElementsByTagName("img"); for(i = 0; i < imgs.length; i++) { imgs[i].setAttribute("height", "13"); } 

10.4.2. Running the Hack

Before installing the script, log into Bloglines and navigate to your Bloglines reading page at http://www.bloglines.com/myblogs/. Bloglines displays your list of subscriptions in the frame on the left, as shown in Figure 10-4.

Figure 10-4. Standard Bloglines sidebar

Now, install the user script (Tools Install This User Script) and refresh the page. The script squeezes the most out of the subscription frame to display more feeds, as shown in Figure 10-5.

Now you can feed your news addiction with 40% less scrolling!

Matthew Gertner

Figure 10-5. Squeezed Bloglines sidebar