Afficher vos articles populaires en vedette
Pas de problème, ce gadget va résoudre vos petits soucis. Très facile à installer en quelques étapes de manipulation, tout sera ok
Beaucoup de vos visiteurs on tendance à lire les messages à la Une, ce widget pour permet d'afficher vos messages à la une de façon simple et très élégantes.
Comment faire?
- Connecter vous à blogger
- Allez dans mise en page
- Cliquez sur ajouter un gadget
- Cliquez sur HTML/JavaScript
Ce gadget contient 5 messages. Il vous faut configurer les 5 c'est à dire ajouter: les liens de l'article, des images pour chaque articles, un titre description et un petit paragraphe ou phrase lié à cet article.
Les 5 domaines messages sont séparés avec des couleurs différentes.
Jouter le CSS
6. Allez dans blogger
7. cliquez sur modèle puis sur Modifier le code Html
8.appuyer sur Ctrl + F puis copier et coller le code: ]]></b:skin>
9. Jute au dessus du code Copier/Coller le code suivant:
/*----------- MBT Gallery -----------------*/
#mbtboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:; border:0px solid #333; padding:5px 5px;}
#mbtboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 100%; }
#mbtboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }
#mbtboxes ul li:hover{ border-bottom:1px solid #c5c5c5; }
#mbtboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px; margin-top:0px;}
#mbtboxes img:hover{border: 1px solid #c5c5c5; }
.mbtbody img{float:left}
.mbtbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}
.mbtbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}
.mbtbody h3 a:link,.mbtbody h3 a:visited{color:#2F97FF;}
.mbtbody h3 a:hover{color:#c5c5c5}
.mbtbody p{margin:0; padding:0 0;color:#cdcdcd;font:10px normal verdana, sans-serif, Arial;}
.Fadein3 img {
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
.Fadein3:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
#mbtboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:; border:0px solid #333; padding:5px 5px;}
#mbtboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 100%; }
#mbtboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }
#mbtboxes ul li:hover{ border-bottom:1px solid #c5c5c5; }
#mbtboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px; margin-top:0px;}
#mbtboxes img:hover{border: 1px solid #c5c5c5; }
.mbtbody img{float:left}
.mbtbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}
.mbtbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}
.mbtbody h3 a:link,.mbtbody h3 a:visited{color:#2F97FF;}
.mbtbody h3 a:hover{color:#c5c5c5}
.mbtbody p{margin:0; padding:0 0;color:#cdcdcd;font:10px normal verdana, sans-serif, Arial;}
.Fadein3 img {
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
.Fadein3:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
10. Maintenant enregistrer et admirer le résultat.
Cette Astuce vous a plus, alors partager là et laisser un commentaire.
Partager cette astuce :
Bonjour,
RépondreSupprimerArticle très intéressant,vous pouvez vous enrichir encore plus grâce http://www.blogger-me.com/p/widgets.html