Somewhere between enlightening opinions and intolerable bullshit. This is the dumping grounds for the results of Google Reader list custom widget
Edit: Big 'oops'! If it didn't work for you before, try the new code :) Also, updated the order of codes. The widget changes markup to be XHTML (phssh) standard, which doesn't work well for any code going in them :( See the updated implementation.
I was looking at the Google Reader widget which shows your reading list from a particular label. It's quite a useful little widget, which doesn't need any work from you, is automatically updated, and gives a good idea of what's keeping you interested! But there is one tiny problem, and it's one I have with a lot of Google services. It simply looks terrible!
Doing it my way!
To overcome that little glitch, I went ahead and wrote my own little script to create your custom Google Reader reading list widget, one that can be styled, and modified to show more content that what the current Reader widget shows. I really didn't have anything worthwhile to do last Sunday afternoon, so I thought of writing this :P I will explain every aspect of the parts (and it's commented) which you can change, so that you can have a proper widget which does what 'you' want it to do! :)
Add the following to your <head> area:
<script src='http://jscripts.ning.com/id/3484647' type='text/javascript'/>
<script>//<![CDATA[
userID = 'user_no_here';//your GReader ID number you can get from the original reader widget
readerLabel = 'web-2.0';//the label
count = 5;//how many posts?
showSummary = 1;//1 for yes, 0 for no
showCredits = 1;//show the 'by so-so' line, 1 for yes
window.addEventListener('load',function(){new_script('http://www.google.com/reader/public/javascript/user/'+userID+'/label/'+encodeURIComponent(readerLabel)+'?n='+count+'&callback=makeWidget');},true);
//]]></script>
The following is the style template for the different elements in the widget. I've commented as to what is what. Change them to suit your blog's template:
#ReadingList { /* The container of the whole widget content */
border:1px dotted #BDB76B;
padding: 10px;
width: 200px;
}
div.block { /* Individual items are held in one block each */
border-bottom:1px dotted whitesmoke;
padding-bottom:5px;
margin-bottom:5px;
}
a.title { /* Title of the item */
font-size: 8pt;
font-family: Verdana;
text-decoration: none;
color: #BDB76B;
}
a.title:hover {
color: Orange;
border-bottom:1px solid #EEE8AA;
}
div.summary { /* Summary of the item (in case you want one) */
color: Khaki;
font-size:7.5pt;
font-family: Arial;
}
div.byline { /* Credits/By line of the item */
margin-top:5px;
color: #EEE8AA;
font-size: 7pt;
text-align:right;
font-family: Tahoma;
}Make a new HTML widget in whichever section you want to add the reading list, and copy paste the following lines as the content:
<div id='ReadingList'>
</div>That's it! You're done! :) I still haven't been able to wrap my head around the One Click Widget thingy. It seems a little painful to set up if you ask me actually, so I am not bothering. I hope my instructions are clear enough :) You can actually try and overwrite the styles of the original Google widget too if you don't want to go through setting up my version, but you won't get the customisability of showing names and summaries.
The original Google Reading List follows this heirarchyA '.' means class, and '#' means id. The symbols are what you'll use to style them in your <style>.:
-
div#readerpublishermodule0.reader-publisher-module
-
h3 (for the title)
-
ul
li (each
li holds one item)
-
a.i (title of the item)
div.s (byline text, contains another link)
If you'd like to see more content/or something I missed out in the custom reading list, leave a comment and I shall look into it! Go ahead, take your pick! :)
2 comments
Now this is something which I wanted. I wanted google reader list, which I think is better than blogroll. But, like you, I hated the style provided by google.
I'll be implementing this. :)
Have you implemented this anywhere? In your test blog or somewhere else? Just wanted to have a preview ;)
As usual, I'm too busy at work to go thru your code.
Thanks for asking me for a live demo! :P Found a glitch and fixed it!
You don't need to implement this if the look is all you're bothered about. I've given style definitions to style the existing widget :) You can use that!
Post a Comment