martes, 17 de abril de 2012

Menu de redes sociales con animación.

El menu contiene los iconos de FeedBurner,Facebook,Google+,Twitter,YouTube.

Aqui les dejo una imagen para que vean como queda el truco:
Para añadir este truco ve a la Edicion HTML de tu blog y antes de ]]></b:skin> y pega lo siguiente:
/* Botones social*/ul#m-soc{margin: 18px 0 0 10px;padding: 0;width: 280px;height: 66px;}ul#m-soc:hover li {opacity:0.6;}ul#m-soc li {list-style: none;margin: 4px;padding: 0;float: left;border: none;}ul#m-soc li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGx-ZuFBGjPLCnWg2CLcB1rqNtFsD1C3Bu0k6Flo_gftGfRYMc1bR3DyADk7vHj-FHa9OAuLEstEyQusLo2NnViFM2pFCShMLVoxcKy2gaSLYsb2TibwlUdtGC6uTxkB7hT2VmzcP8W18Z/s1600/sprite1-compartidisimo.png) no-repeat 0 0; margin: 0;padding:0;display: block;position:relative;width: 48px;height: 48px;overflow: visible;}ul#m-soc li a.twitter{background-position: 0 0;}ul#m-soc li a.facebook{background-position: -48px 0;}ul#m-soc li a.google{background-position: -96px 0;}ul#m-soc li a.youtube{background-position: -144px 0;}ul#m-soc li a.rss {background-position: -192px 0;}ul#m-soc li a span{background: #555;position:absolute;top:-10px;left:0;width:auto;height:auto;opacity:0;padding:5px;text-align:left;color:#fff;filter:alpha(opacity=0);white-space:nowrap;border-radius:3px;font-size:12px;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}ul#m-soc li:hover{opacity:1}ul#m-soc li a:hover{text-decoration:none}ul#m-soc li a:hover span{ opacity:.8;filter:alpha(opacity=80);top:-23px}
Ahora en Diseño,ve a Añadir Gadget,HTML/Javascript y pega lo siguiente:
<li><a class="twitter" href="url de twitter"><span>Seguir en Twitter</span></a></li><li><a class="facebook" href="url de facebook"><span>Facebook</span></a></li><li><a class="google" href="url de google mas"><span>Google+</span></a></li><li><a class="youtube" href="url de youtube"><span style="border:0;">YouTube</span></a></li> feedburner"><span style="border:0;">Suscríbete</span></a></li></ul>
Reemplazas lo qu esta en Rojo por lo que se indica y guardas.

Descripcion en imagenes con efecto deslizante usando css

Una forma de agregarle mas estilo a nuestras imágenes y hacer que nuestro blogs sea mas profesional, es poniendo una pequeña descripc...