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

Share on Tumblr

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;}

  • http://www.css4design.com bruno bichet

    Pas mal le style du widget, je pense que je vais m’en inspirer en mettant un petit visuel devant chaque entrée de la liste sur mon blog ;)

  • Kynerion

    Etant donné que je lui ai mis 250px de largeur, je pense qu'il pourrait aller en remplacement d'un bloc de pub. Par contre je passerai peut-être les liens vers un nouvel onglet, avec du jQuery.

Retrouvez cet article sur votre mobile en scannant ce code :

Prolongez la lecture avec ces suggestions

    feedback : aimez ou tweetez