Rss Feed Facebook Twitter Google Plus

Posté dans:


mercredi 27 février 2013

GADGETS BLOGGER|

 Afficher vos articles populaires en vedette
Vous chercher à afficher d'une autre façon vos postes/ billets/articles populaires de sorte à  donner encore plus d'envie à  vos visiteurs de les lire?
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?

  1. Connecter vous à  blogger
  2. Allez dans mise en page
  3. Cliquez sur ajouter un gadget
  4. Cliquez sur  HTML/JavaScriptAjouter

  5.Copier/coller le code suivant

<div id='mbtboxes'>
<div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '>

<ul>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='Lien de  l’article 1'>
<img height='100' src='POST 1 IMG LINK' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 1 LINK'>POST 1 DESCRIPTION</a></h3>
<p>POST 1 PARAGRAPH</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='Lien de  l’article 2'>
<img height='100' src='POST 2 IMG LINK' width='170'/>

</a>
<div class='clear'></div>
<h3><a href='POST 2 LINK'>POST 2 DESCRIPTION</a></h3>
<p>POST 2 PARAGRAPH </p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 3 LINK'>
<img height='100' src='POST 3 IMG LINK' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 3 LINK'>POST 3 DESCRIPTION</a></h3>
<p>POST 3 PARAGRAPH</p>

</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 4 LINK' rel='nofollow'>
<img height='100' src='POST 4 IMG LINK' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 4 LINK' rel='nofollow'>POST 4 DESCRIPTION</a></h3>
<p>POST 4 PARAGRAPH</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 5 LINK'>

<img height='100' src='POST 5 IMG LINK ' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 5 LINK'>POST 5 DESCRIPTION</a></h3>
<p>POST 5 PARAGRAPH</p>
</div>
</li>
</ul>
</div>
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;
}
 
10. Maintenant enregistrer et admirer le résultat.

Cette Astuce vous a plus, alors partager là et laisser un commentaire.
 



Partager cette astuce :

1 commentaire:

  1. Bonjour,
    Article très intéressant,vous pouvez vous enrichir encore plus grâce http://www.blogger-me.com/p/widgets.html

    RépondreSupprimer

Autres astuces

 

Commentaires récents

PALABRE-INFOS_le fil actu

3 Astuces Récentes

Plus d'astuces

Trouvez une astuce