23 diciembre 2012

Menú de redes sociales en la cabecera de Blogger

redes sociales en cabecera
Con este pequeño tutorial vamos aprender a colocar las Redes Sociales en la cabecera del Blog, así de esta forma vamos a seguir ahorrando espacio en nuestro blog.
El menu contiene los iconos de Twitter,Facebook,Google+,Email y Rss.

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;z-index:9999;position:absolute;right:352px;top:135px;} }
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(http://4.bp.blogspot.com/-L_W7PvqZdSc/UA1yKLIGCmI/AAAAAAAAFkU/xDzZ9XnXPoA/s1600/sprite1-AMOR.gif) 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.email{
background-position: -144px 0;}
ul#m-soc li a.rss {
background-position: -192px 0;}
ul#m-soc li a span{background: #D40505;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}
/* Fin Gadget Redes Sociales */

Lo segundo será buscar en la plantilla el siguiente código:
Plantillas antiguas
<body>
Plantillas Nuevas
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Y a continuación pegar lo siguiente:

<div class='redes'>
<ul id='m-soc'>
<li><a class='twitter' href='URL DE TU TWITTER' target='_blank'><span>Seguir en Twitter</span></a></li><li><a class='facebook' href='URL DE TU FACEBOOK' target='_blank'><span>Facebook</span></a></li><li><a class='google' href='URL DE TU GOOGLE +' target='_blank'><span>Google+</span></a></li>
<li><a class='email' href='mailto:[email protected]' target='_blank'><span style='border:0;'>EMAIL</span></a></li>
<li><a class='rss' href='URL DE TU RSS' target='_blank'><span style='border:0;'>Suscríbete</span></a></li></ul>
</div>

Reemplazas lo que esta en Rojo por lo que se indica, click en vista previa y si todo está bien "guardas".
Para colocar las redes en el lugar adecuado, tan solo debes ir cambiando lo de color azul, aumentándo o disminuyendo la numeración y dando en vista previa, hasta conseguir la alineación correcta.

PD: Siempre es importante hacer una copia de la plantilla cada vez que se hace una modificación.



Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

4 comentarios

Gracias mi hermano por tu aporte

Correcto, siempre respetando las medidas y el orden de las redes de la imagen porque si la cambias deberías modificar parte del código.

tanto que busque y aqui lo encontre...


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"