sábado, 30 de octubre de 2010

Menu de iconos sociales para blog

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.

1 comentarios:

Smile❀ dijo...

me podrias decir algun blog que tenga este menu?
esque me gustariiia poder ver como es, respondeme a mi msn mejor porfavor :)
plas.plaas.plaaas@hotmail.com

Publicar un comentario en la entrada

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones