Menu de iconos sociales para blog

  • octubre 30, 2010
Menu de iconos sociales para blog

En trucos para blog nos encantan los menus, y los de las redes sociales m??s
Continuando con los men??s para Blogger hoy les explicar?? como agregar un men?? lateral de redes sociales con JQuery en Blogger. Es muy sencillo y nos puede servir para difundir nuestro blog en las redes sociales m??s populares.


[1] Vamos a Dise??o > Edici??n de HTML y antes de </head> colocamos lo siguiente:
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’></script>
<script type=’text/javascript’>
$(function() {
$(‘#navigation a’).stop().animate({‘marginLeft’:’-52px’},1000);
$(‘#navigation > li’).hover(
function () {
$(‘a’,$(this)).stop().animate({‘marginLeft’:’-2px’},200);
},
function () {
$(‘a’,$(this)).stop().animate({‘marginLeft’:’-52px’},1000);
}
);
});
</script>
Nota: la parte en rojo es el c??digo de la llamada de JQuery 1.3.2, si ya agregaste el c??digo deJQuery 1.3.2 no es necesario volver a agregarlo, por lo tanto busca en tu plantilla todo lo relacionado con JQuery y observa que no est?? repetido el c??digo, ya que puede probocar incompatibilidades.
Lo que coloqu?? en verde es la velocidad del men?? al aparecer y ocultarse, cu??nto m??s grande sea el n??mero m??s lento ir?? el men??.
[2] Ahora agregaremos los estilos del men??, para eso pegaremos antes de ]]</b:skin> lo siguiente:
/* Men?? lateral de redes sociales con JQuery
———————————————– */
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top:10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation li a:hover {opacity: 1; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
ul#navigation .home a{
background-image: url(http://www.todoblogger.com/wp-content/uploads/2010/08/Inicio.png);
}
ul#navigation .feed a      {
background-image: url(http://www.todoblogger.com/wp-content/uploads/2010/08/feed.png);
}
ul#navigation .facebook a      {
background-image: url(http://www.todoblogger.com/wp-content/uploads/2010/08/facebook.png);
}
ul#navigation .picasa a      {
background-image: url(http://www.todoblogger.com/wp-content/uploads/2010/08/picasa.png);
}
ul#navigation .youtube a   {
background-image: url(http://www.todoblogger.com/wp-content/uploads/2010/08/youtube.png);
}
ul#navigation .twitter a     {
background-image: url(http://www.todoblogger.com/wp-content/uploads/2010/08/twitter.png);
}
ul#navigation .informacion a     {
background-image: url(http://www.todoblogger.com/wp-content/uploads/2010/08/Informacion.png);
}
Las url que est??n en bold son las im??genes del men??, ustedes pueden dejarlo as?? como est?? o modificar las imagenes, e incluso descargarlas y subirlas a su propio servidor.
[3] Ahora lo ??nico que falta es agregar el men??, para esto vamos a pegar el siguiente c??digoantes de </body>:
<ul id=»navigation»>
<li class=»home»><a href=»#» title=»Inicio»></a></li>
<li class=»feed»><a href=»#» title=»Feed RSS»></a></li>
<li class=»facebook»><a href=»#» title=»Facebook»></a></li>
<li class=»twitter»><a href=»#» title=»Twitter»></a></li>
<li class=»youtube»><a href=»#» title=»Youtube»></a></li>
<li class=»picasa»><a href=»#» title=»Picasa»></a></li>
<li class=»informacion»><a href=»#» title=»Info»></a></li>
</ul>
Ustedes deben sustituir lo que est?? en negro por sus propias urls.
Con esto ya tendremos nuestro men?? lateral de redes sociales con JQuery agregado alblog. Espero que les sirva y que le den buena utilidad.

No Comments Found