Partager ses articles préférés via Google Reader

C’est Bruno de css4design qui a donné l’idée d’une blogroll créée depuis Google Reader. Ce dernier permet en effet d’insérer un code javascript sur son site pour diffuser un extrait des articles que l’on a apprécié. L’avantage étant bien sûr la facilité : au fil des lectures quotidiennes de ses flux RSS, il suffit de marquer les articles qui nous plaisent pour qu’ils soient automatiquement affichés sur le site où l’on a placé le code.

Il y a juste un petit inconvénient : les quelques thèmes proposés pour ce widget Google Reader ne sont pas vraiment sexys… Et c’est là qu’intervient la magie du CSS, puisqu’en stylant les classes concernées par le widget, on obtient un résultat plutôt convaincant. Il est ainsi possible de transformer radicalement (ou non) le widget pour qu’il s’accorde au site sur lequel il sera placé. Démonstration ci-dessous.

On peut ainsi modifier non seulement l’apparence, mais aussi faire disparaître les textes ou liens non-désirés (comme le “Lire la suite…“).

Pour les connaisseurs, voici par exemple le code CSS du widget utilisé ici :

#readerpublishermodule0 {background : #181818;width:250px;}
#readerpublishermodule0 .f{display:none;}
.reader-publisher-module {border:2px solid #484343;}
.reader-publisher-module ul {list-style-type:none;margin:0;padding:5px 10px 5px 10px;}
.reader-publisher-module ul li {background:#181818 url("http://www.onlike.net/wp-content/themes/kilone/img/star-sleep.gif") 0px 1px no-repeat;font-family : "trebuchet MS", Arial, Verdana, sans-serif;font-size:13px;margin:0;padding:0 0 8px 0;}
.reader-publisher-module ul li a{color:#a2a28c;padding:0 0 0 20px;}
.reader-publisher-module ul li a.i:hover{color:#ffffff;background:#181818 url("http://www.onlike.net/wp-content/themes/kilone/img/star-feed.gif") 0px 1px no-repeat;}
.reader-publisher-module ul li .s {text-align:right;font-size:0px;color:#181818;}
.reader-publisher-module ul li .s a{color:#484343;background:#181818 url("http://www.onlike.net/wp-content/themes/kilone/img/site_rss.gif") 0px 2px no-repeat;padding:0 0 0 20px;font-size:12px;}
.reader-publisher-module ul li .s a:hover{text-decoration:underline;color:#a39269;}