Google Reader shared items hack

Google Reader allows you to show your shared items by placing the code in the blog or adding it as a blogger widget. Although there are several options available on how you can customize the shared items, basically it is not that great. You are only given the option of changing the colour of the scheme and edit the number of links shown in the blog.

I found the tips to customize the Google Reader shared items written by Andrew Grant. It was published October last year. So, I guess I'm pretty late to notice

this :). The hack is based on feedburner.

The gist of the methods are as follows:

1. Put your Google Reader shared item feed as a new feed in the FeedBurner account.
2. Then, click publicize tab and later click BuzzBoost.
3. Choose any options that suits you and activate it. You can add it as a blogger widget or put the code at your blog.
   
4. I prefer to put the code at the blog since I have two sidebars and several blog widgets. If I added the feed as a blog widget, it will choose the first blog widget found on the sidebar. I put Google Shared items below shoutbox.
5. After this, check the page source generated by this feed and you can customise it by CSS. Further explanation is given here.
   

I will show you how do I customize my Google Reader shared items for reference. This requires basic CSS knowledge. My writing beyond this point is intended for anyone who will like to know more about hacking/customizing Google Reader shared items.

First, we need to know the generated page source. Here is a brief look at the top of shared item.

I created a new div tag with id feedburner to put the whole shared item in one place. By doing this, it will be easier to edit CSS for this shared items. Here is what I put in div.feedburner in the stylesheet.

#feedburner {
margin-top: 10px;
}
The generated page source begins with a div tag
div class="feedburnerFeedBlock"
and you can edit this div in the stylesheet :). I have adjusted the padding.
div.feedburnerFeedBlock {padding: 10px 2px 0 10px;}

Next is a p class labelled as feedTitle. This basically refers to your Feed title if you enable it in the first place. I want the title to be in black including when the mouse is hovering above the link. Here is what I've done.

div.feedburnerFeedBlock p.feedTitle {
padding: 0;
margin: 5px 0 0 0;
font-style:normal;
font-size: 13px;
font-family: Verdana, Arial, sans-serif;
text-align: left;
}

div.feedburnerFeedBlock p.feedTitle a {
text-decoration: none;
color: #000000;
font-weight: bold;
}
A shorther way of putting this is to use only B-).
p.feedTitle

Next comes the ul tag. This begin the list of your shared items. Here is what I've done.

div.feedburnerFeedBlock ul {
list-style-position: outside;
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 11px;
text-align: justify;
}

div.feedburnerFeedBlock ul a {
text-decoration: none;
color: #000000;
}

Next, I adjust the padding in the li tag by removing the list marker.

div.feedburnerFeedBlock li {background-image: none;}

After this, comes the span class labelled as headline. The name says it all. It refers to the headline of each item you shared on your Google Reader.

div.feedburnerFeedBlock li span.headline {
font-family: Arial, sans-serif;
font-size: 12px;
margin: 0;
padding: 0 0 2px 0;
line-height: 98%;
}

div.feedburnerFeedBlock li span.headline a {
text-decoration: none;
color: #2100AF;
}

What I've done is first to make the font smaller and adjust the line-spacing. I also adjusted the padding of the headline. Thus, the headline move slightly to the left compared to the feed title eg Shared items. The font colour is also changed. A shorter way instead of writing the whole div li span tag is to use only span.headline only.

Next, I edited p class for Item author and the date of the shared item.
p.feedItemAuthor {
margin: 0;
padding: 2px 0 1px 0;
}

p.date {
margin: 0;
padding: 0;
}

The actual content of the shared item is put in a div tag. Now, that div does not have any id or class associated with it. The way to edit this is to use descendant selectors in CSS. That's mean you have to locate the div tag contained in this code.

div.feedburnerFeedBlock ul li div {
color: #000000;
line-height: 110%;
padding: 0 0 0 10px;
font-family: Verdana;
font-size: 11px;
}

First, I put the name of the div which is feedburnerFeedBlock, then ul tag; followed by li and finally the actual div that we will like to customize. Pretty long isn't it ;).

Last but not least is to edit the footer. The one that shows the image from FeedBurner.
#creditfooter {
text-align: right;
color: #000000;
font-weight: normal:
font-size: 10px;
}

#creditfooter a:hover {
background-color: transparent;
}

That's the end of this long post :D. Just before you ask me anything about CSS, please note that I only know a few bit about CSS. I learned CSS whenever I have free time. Thanks.