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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvKBkLBYDzHFvhPc2IMcKt_8pw8P6e1sHuPdnlCQy2wiN18LwX_ud4AgAw_ZMFDW9YGM0-Rkwyb1C8QY-AE3pqJ6fU-3s2O0xb0VgCTmCFdF8bSGWoY81yFg4d-TwvXi5XYy1r4PiuGax2/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='"loading" + 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:tudireccion@email.com' 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.
Publicaciones Relacionadas
trucos blog
