Ajouter une légendes à une image au survol de la souris avec CSS3 dans blogger

Facebook dans blogger  Ajouter le bouton facebook dans blogger

Pour ajouter une légende sur une image avec css3 au survol de la souris dans blogger, je vous recommande de suivre ce tutoriel, si cet effet ne marche pas chez vous, sachez que votre navigateur ne support pas css3. ce truc marche sur Mozilla Firefox, Chrome, Safari et Opera. et pour l'implementer dans votre blog, suivez les étapes suivantes:

1. Connectez vous à blogger, allez à Présentation>> Modifier le code HTML et cherchez la le bout de code suivant :
   
   ]]></b:skin>
2. Collez le code suivant juste avant le code pérécedent:
   #post-image {
   }
   #figure {
   position:relative;
   float:left;
   margin:10px;
   overflow:hidden;
   padding: 1px;
   }
   #figure:hover {
   -moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
   -webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
   box-shadow:0 0 20px rgba(0,0,0,0.75);
   }
   #figure .caption {
   position:absolute;
   bottom:0;
   left:0;
   opacity: 0.75;
   margin-bottom:-115px;
   -webkit-transition: margin-bottom;
   -webkit-transition-duration: 400ms;
   -webkit-transition-timing-function: ease-out;
   -moz-transition-property: margin-bottom;
   -moz-transition-duration: 400ms;
   -moz-transition-timing-function: ease-out;
   -o-transition-property: margin-bottom;
   -o-transition-duration: 400ms;
   transition: margin-bottom;
   transition-duration: 400ms;
   transition-timing-function: ease-out;
   }
   #figure:hover .caption {
   margin-bottom:0px;
   }
   #post-image .caption {
   width:100%;
   height:90px;
   padding:10px;
   background:#111;
   color:#fff;
   font-family: Arial, Helvetica, sans-serif;
   }
   #post-image .caption b {
   text-shadow: 0px 2px 0px #000;
   }
   #post-image .caption {
   color: #ddd;
   line-height: 24px;
   font-size: 14px;
   text-shadow: 0px 2px 0px #000;
   }
3. Enregistrer votre modèle blogger.

Implémentation dans les messages blogger

Coller le code suivant dans un nouveau message blogger et changer

<div id="post-image">
<div id='figure'>
<img src="url de votre image"/>
<span class='caption'>
<b>Titre de votre image/b>La description de vottre image

</span>
</div>
</div>