Tutoriaux
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.
.png)
É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>
<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;
}
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 réseau social favoris
Rétrolien(0)
Adresse URI pour un rétrolien sur cet articleCommentaires (0)
Flux RSS pour les commentairesEcrivez un commentaire
Navigation
Publicités
Nos services
Programmation Web
Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.
La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.
Suite ...
Programmation Desktop
Quel que soit votre projet, nous pouvons le réaliser pour vous !
Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.
Suite ...
Autres ...
Quel que soit vos projets ou vos idées, contactez nous!
Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.
Suite ...