Une blogroll 2.0 avec la liste de partage des flux RSS de Google Reader

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Une blogroll 2.0 avec la liste de partage des flux RSS de Google Reader

Les plus attentifs auront peut-être remarqué que j’ai déplacé ma blogroll de la page d’accueil vers une page dédiée (vu la baisse constante de mon PageRank, personne n’y perd). A la place, j’ai préféré introduire une liste de mes lectures de flux RSS via la « liste de partage » de Google Reader. Cette liste étant dynamique, elle reflète, mieux qu’une liste de liens statique, mes intérêts du moment.

Cette liste de partage est disponible sur cette page ou à partir du flux RSS généré à l’occasion. Une troisième méthode consiste à copier-coller un bout de code Javascript pour obtenir la liste (paramétrable) des 10 derniers articles partagés avec la source du billet, comme ici.

Ma liste de partage

Adapter le style en utilisant les classes CSS disponibles

Par défaut, l’intégration du code Javascript provoque un espace plus ou moins important entre la liste de partage et les éléments qui la précèdent. Pour y remédier, on supprimera les retours à la ligne qui séparent les balises script.

Par ailleurs, le lien Lire la suite… est inclus dans une <div class= »f »> (forward ?) en dehors de la liste ul (qu’on pourra atteindre avec .reader-publisher-module ul) qu’il faudra également penser à styler pour que l’affichage de cette liste de partage s’harmonise au mieux avec votre blog.

Pour finir, la liste elle-même est constituée de balises li comprenant un lien a class= »i » pour afficher les informations du billet et une div class= »s » pour indiquer la source du lien.

Un blogroll Bon Chic Bon Geek

Décidément, ce Google Reader recèle des petits trésors qui méritent leur place dans les blogolistes les plus chics. Il manque peut-être des options de personnalisation comme le choix des textes et des balises utilisées : pour le coup, j’aurais bien vu une liste de définition ;)

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



5 commentaires pour “Une blogroll 2.0 avec la liste de partage des flux RSS de Google Reader”

  1. Cedric dit :

    Ouaaaaaais, je suis dans tes lectures :)

    J’aime bien ce principe aussi. De mon côté j’ai réalisé diverses « flux roll » dont celle-ci qui fonctionne pas mal : http://www.chouingmedia.com/skype

    Ou celle ci : reste que c’est le bordel dans ces pages et qu’il faudrait rationnaliser tout ça…

  2. Kynerion dit :

    Rho je suis un peu déçu je t’aurais bien vu styler un petit bloc pour ta liste de partage. Merci pour le nom des classes, ça évitera de chercher en tout cas. Je m’y pencherai pour faire un truc « widget-style », même si ça n’est quasiment jamais utilisé en-dehors de soi-même. :D

  3. Bruno Bichet dit :

    @Cedric > c’est pas mal ta page skype, finalement c’est ton netvibes perso ;)

    Il y a peu, j’ai essayé d’installer magpierss qui est un script php qui permet de mouliner du flux RSS pour le transformer en liste. J’ai arrêté à cause d’un problème de fonction déjà déclarée dans wordpress. Je ferai une autre tentative ;)

    @Kynerion > sur la page d’accueil de mon blog, j’ai mis un petit bloc (le style reste minimaliste… mais pour une liste, hein ?) avec les flux GR.

    Pour le widget-style, je plussoie des deux mains : ça peut être utile ;)

  4. […] Bruno de css4design qui a donné l’idée d’une blogroll créée depuis Google Reader. Ce dernier permet en […]

  5. sam dit :

    J’ai essayé de changer et adapter le code CSS, mais celui initial passe toujours en tête. Il est pris en premier et je n’arrive pas à le changer. Y a t-il une méthode particulière ?

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site