Créer un bloc de syndication (RSS) stylisé avec un peu de CSS

Avec la venue du web 2.0 sont apparus l'arrivée Digg-Likes et des fils RSS. Vous avez donc certainement vue sur les blogs ou les sites que vous consultez, des menus listants des liens permettant de soumettre les articles que vous lisez sur certains digg-like. Mes explications ne sont peut-être pas claires, alors comme on dit, une image vaut 1000 mots.

Étape 1 : HTML Code

Créer tout d'abord votre bloc <div> qui contiendra votre « menu ». Donnez-lui l'id « rss-menu ». Voici ensuite le reste du code à insérer dans ce bloc.

<div id="rss-menu">
<h2>Syndication</h2>
<ul>
    <li class="feed-xml">
        <a href="http://feeds.feedburner.com/Woork">Fil RSS</a>;
    </li>
    <li class="feed-yahoo">
        <a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/pckult_qc">Ajouter à mon Yahoo</a>
    </li>
    <li class="feed-newsgator">
        <a href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://feeds.feedburner.com/pckult_qc">Ajouter à NewsGator</a>
    </li>
    <li class="feed-bloglines">
        <a href="http://www.bloglines.com/sub/ http://feeds.feedburner.com/pckult_qc">Ajouter à Bloglines</a>
    </li>
    <li class="feed-netvibes">
        <a href="http://www.netvibes.com/subscribe.php?url=http://feeds.feedburner.com/pckult_qc">Ajouter à Netvibes</a>
    </li>
    <li class="feed-google">
        <a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/pckult_qc">Ajouter à Google</a>
    </li>
</ul>
</div>

Étape 2: CSS Code

Nous avons ici utilisé une classe pour chaque icone afin d'éviter d'encombrer le code HTML avec l'ajout de tag <img> dans notre code.

.feed-yahoo{
    background:url(images/feed-yahoo.png) no-repeat;
}
.feed-newsgator{
    background:url(images/feed-newsgator.png) no-repeat;
}
.feed-netvibes{
    background:url(images/feed-netvibes.png) no-repeat;
}
.feed-bloglines{
    background:url(images/feed-bloglines.png) no-repeat;
}
.feed-xml{
    background:url(images/feed-xml.png) no-repeat;
}
.feed-google{
    background:url(images/feed-google.png) no-repeat;
}

#rss-menu{
    padding:10px; padding-top:0px;
    // Largeur du bloc Syndication
    width:250px;
    // Ajout d'une bordure autour du bloc Syndication
    border:solid 1px #CCCCCC;
    margin-top:10px;
}
#rss-menu h2{
    border:0; margin:0;
    border-bottom:solid 1px #CCCCCC;
    color:#000000;
    display:block;
    font-weight:bold;
    font-size:12px;
    margin-bottom:10px;
    padding:6px 0px;
}
#rss-menu ul, #rss-menu ul li{
    border:0; margin:0; padding:0;
    list-style:none;
}
#rss-menu ul li{
    height:20px;
    text-indent:104px;
    margin-top:3px;
}

Ajouter cette page à votre Digg-Like préféré