En una entrada anterior ya escrbí
sobre cómo poner botones sociales en el blog pero
ahora en esta entrada, y gracias a la gentileza de Karla, aquí les dejo unos
botones tipo íconos sociales que están buenísimos y tienen un diseño bastante
profesional, a base de css y javascript, con la particularidad de que juntos
(css y javascript) puedes ponerlos dentro de un mismo gadget sin necesidad de
introducirlos por separado; ya sabes que el css suele ponerse entre
<head> y </head>, para luego poder poner el código javascript en un
gadget y así no entren en conflicto.
Para implementarlo solo entra en
diseño, edición html y con los artilugios expandidos busca lo siguiente:
<div class='post-footer-line post-footer-line-3'>
Justo debajo de allí pega el
siguiente código:
<style type="text/css">
ul#m-soc7{margin:10px 0 0 1px; padding:0;
width:280px; height:48px}
ul#m-soc7 li{list-style:none; margin:2px;
padding:0; float:left; border:none}
ul#m-soc7 li
a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht4Q20wge2GB9oq-N7P6NFOLnZa5Der93zcrGjV-XEJzcCsaTSenzf_IJ9qk084YsKxyVyTcC9RVXgICkDnxYl11_6pP5BNmMI_eMgcMbV5RYVDoEkKOC_iXw57TfVyKrQ96SVOAOYxMQw/s400/sprite7-compartidisimo.png)
no-repeat 0 0; margin:0; padding:0; display:block; position:relative; width:48px;
height:48px; overflow:visible}
ul#m-soc7 li
a.twitter{background-position:0 0}
ul#m-soc7 li
a.facebook{background-position:-48px 0}
ul#m-soc7 li
a.google{background-position:-96px 0}
ul#m-soc7 li
a.youtube{background-position:-144px 0}
ul#m-soc7 li
a.twitter:hover{background-position:0 -48px}
ul#m-soc7 li
a.facebook:hover{background-position:-48px -48px}
ul#m-soc7 li
a.google:hover{background-position:-96px -48px}
ul#m-soc7 li
a.youtube:hover{background-position:-144px -48px}
ul#m-soc7 li a span{background:orange;
position:absolute; top:-10px; width:auto; left:0;opacity:0; padding:3px;
text-align:left;text-decoration:none; 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-soc7 li a:hover span{opacity:.8;
filter:alpha(opacity=80); top:-24px}
</style>
<ul id="m-soc7"><li><a
class="twitter"
href="tucuentadeusuario"><span>Twitter</span>
</a></li>
<li><a class="facebook"
href="tucuentadeusuario"><span>Facebook</span>
</a></li><li><a
class="google" href="tucuentadeusuario"><span>Google+</span>
</a></li>
<li><a class="youtube"
href="tucuentadeusuario"><span style="border:0;">YouTube</span>
</a></li></ul>
Cambia lo que está en azul por tu dirección de url de cada botón y si todo está bien, luego de dar en vista previa, das en guardar y
listo.
Aunque como dije al principio el código puedes pegarlo
dentro del sidebar como cualquier gadget, yo he preferido pegarlo directamente
en el post-footer, pero como siempre les digo sobre gustos y colores ya depende de
cada quien dónde deseen implementarlo.
Yo solo le he agregado mi color favorito (el naranja) al enlace y he
eliminado uno; espero no herir la suceptibilidad de Karla.
Los botones debajo del post footer deberán quedar así:
P.D. Los enlaces en este ejemplo los he desabilitado por lo que si das click en los botones solo te redireccionarán a esta misma entrada
Muchas gracias por todo.
ResponderEliminar