Afficher les RSS d'un autre site sur votre blog ou site.

Dans un précédent message, j'avais parlé de Feed2JS qui devrait fermer ses portes bientôt. Heureusement, Feedroll a repris le flambeau. C'est quasiment identique.
Voici un exemple de ce que l'on peut faire et le code plus bas avec son CSS intégré directement. On peut ainsi afficher les derniers messages de son propre blog (un résumé en quelque sorte) ou d'un autre blog. Pour un site web, pour que cela marche, il faut qu'il soit équipé d'un RSS Feed. Mon seul problème, c'est que j'ai beau changer width: 250px; en width: 100%;, il s'affiche bien en largeur 100% pendant 2 ou 3 secondes puis reprend sa taille d'origine soit 250 px. J'ai changé la valeur en pixels mais le résultat est identique. J'ai aussi tenté de supprimer les sections du CSS une à une mais sans résultat. Bizarre... Mieux que cela... je viens de supprimer complètement le CSS et le widget continue de s'afficher comme précédemment. Je précise que j'ai vidé le cache du navigateur. Je suis perplexe!
Ayé! J'ai trouvé! En fait j'avais oublié qu'au début, j'avais créé un widget en bas de page contenant lui aussi le CSS. C’était donc ce CSS qui s'appliquait quoique je fasse... Maintenant que je l'ai supprimé, plus de problème...



<style type="text/css">

.rss-box {
  margin: 1em;
  width: 700px;
  background-color: #F1F1FD;
  border: 1px solid #9B72CF;

}
.rss-items {
 margin-top:0px;
 padding:0.5em; 0.5em;
 margin-left:0px;
 color:#000000;
}
p.rss-title {padding:0.5em;}
.rss-title {
 text-decoration: none;
 font-family: verdana, sans-serif;
 font-size: 85%;
 background-color:#9B72CF;
 color:#ffffff;
 font-weight:bold;
 margin: 0px;
 padding:0em;
 text-align: left;
}

.rss-item  {
  font-family: verdana, arial, sans-serif;
  font-size: 0.75em;
  font-weight : normal;
  list-style:none;
  padding-bottom:1em;
}

.rss-item a {
 text-decoration : underline;
 color:blue;
 font-size: 105%;
 font-weight:bold;
 font-family:arial, sans-serif;
 }

.rss-item a:visited {
 color:purple;
}

.rss-date {
 font-size: 85%;
 font-weight : normal;
 color: #F60;
 }

/* buttons modeled from http://www.wellstyled.com/css-inline-buttons.html */

.pod-play {
   _width:12em;
   margin: 0 0.2em; padding: 0.1em 0; _padding:0;
 
   white-space:nowrap;
   text-decoration: none;
   vertical-align:middle;
   background: #fb6;
   color: black;
   }
.pod-play em {
   _width:1em; _cursor:hand;
   font-style: normal;
   margin:0; padding: 0.1em 0.5em;
   background: white;
   color: #222;
   }
.pod-play span {
   _width:1em; _cursor:hand;
   margin:0; padding: 0.1em 0.5em 0.1em 0.3em;
   }
.pod-play:hover {
   background: #666;
   color: white;
   }
.pod-play:hover em {
   background: black;
   color: white
   }
</style>
<script language="JavaScript"> /* Generated using sourceLocker v1.0 LITE Edition (svetlin@developer.bg, kirokomara@designer.bg) */m='%3Cscript%20language%3D%22JavaScript%22%20src%3D%22http%3A//www.feedroll.com/rssviewer/feed2js.php%3Fsrc%3Dhttp%253A%252F%252Fblogtricker.blogspot.com%252Ffeeds%252Fposts%252Fdefault%253Falt%253Drss%26chan%3Dtitle%26num%3D3%26desc%3D100%3E1%26targ%3Dy%26utf%3Dy%22%20%20charset%3D%22UTF-8%22%20type%3D%22text/javascript%22%3E%3C/script%3E%0A%0A%3Cnoscript%3E%0A%3Ca%20href%3D%22http%3A//www.feedroll.com/rssviewer/feed2js.php%3Fsrc%3Dhttp%253A%252F%252Fblogtricker.blogspot.com%252Ffeeds%252Fposts%252Fdefault%253Falt%253Drss%26chan%3Dtitle%26num%3D3%26desc%3D100%3E1%26targ%3Dy%26utf%3Dy%26html%3Dy%22%3EView%20RSS%20feed%3C/a%3E%0A%3C/noscript%3E%0A';d=unescape(m);document.write(d);</script>

Le javascript est crypté pour que Blogger ne le massacre pas (!)
http://www.feedroll.com/rssviewer/