martes, 3 de julio de 2012

Botones Flotantes de Facebook, Twitter y Google+

Hoy les voy a mostrar cómo colocar un cuadro de botones flotantes de las redes sociales en tu blog, mira te quedara algo así.


Bueno manos a la obra lo haremos en menos de 4 minutos, así que empecemos. Lo haremos con (Prototype y Scriptaculous).


Mira si no sabes cómo buscar alguna etiqueta en tu plantilla no vayas hacer buscando línea por linea, lo que tenez que hacer es presionar es Ctrl + F y con  eso te aparecerá un recuadro de búsqueda tu lo copias el código a buscar y ya.


Paso 1.- Vas a tu plantilla y entras a Edición de HTML 
expandir plantillas de artilugios . Luego antes de donde      dice    ]]></b:skin>   tu le pegas el siguiente código.


#botones-like {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
it-box-shadow: 0px
border-radius: 4px; -web k0px 4px #696969;
px 0px 4px #696969; box-shadow: 0px 0
-moz-box-shadow: 0px 4px #696969;
#eee; /* Color de fondo del botón */ padding: 5px; fo
background-color :nt-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
or del texto */ text-align: center; pos
font-size: 10pt; /* Tamaño del texto */ color: #999999; /* Co lition:fixed; bottom:5px; right:30px; } #expandirBotones{
it-border-radius: 4px; -moz-border-radius: 4px; bord
background:#eee; /* Color de fondo del contenedor */ -web ker-radius: 4px; -webkit-box-shadow: 0px 0px 6px #696969; -moz-box-shadow: 0px 0px 6px #696969;
box-shadow: 0px 0px 6px #696969; position:fixed; bottom:40px; right:30px;
}


Paso 2.- Antes del </head> le pegas el siguiente código.

<!-- Prototype y Scriptaculous -->
<script src='http://www.google.com/jsapi'/>
<script>
ad("prototype","1.6.0.3"); google.l
google.l ooad("scriptaculous", "1.8.2"); </script>
<!-- Prototype y Scriptaculous -->


Paso 3.- Ahora te vas al final de tu código  y antes de donde dice </body> tu le pegas el código de abajo y ya. Ojo tenez que cambiar lo de color rojo con la URL  de tu blog OK.


<a href='javascript:Void(0)' onclick='Effect.toggle(&apos;expandirBotones&apos;,&apos;appear&apos;); return false' style='text-decoration:none;'><div id='botones-like'>&#161;Recomienda este blog!</div></a>
<table border='0' id='expandirBotones' style='display:none'>
<tr>
<td>&lt;iframe allowTransparency=&#39;true&#39; frameborder=&#39;0&#39; scrolling=&#39;no&#39; src=&#39;http://www.facebook.com/plugins/like.php?href=http://miblog.blogspot.com&amp;layout=box_count&amp;show_faces=false&amp;width=72&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&#39; style=&#39;border:none; overflow:hidden; width:72px; height:63px&#39;&gt;&lt;/iframe&gt;</td>
<td><g:plusone href='http://miblog.blogspot.com' size='tall'/><script type='text/javascript'>
window.___gcfg = {lang: &#39;es&#39;};
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script></td>
<td><a class='twitter-share-button' data-count='vertical' data-lang='es' data-text='Me ha gustado este blog, seguro a ti también te gustará:' data-url='http://miblog.blogspot.com' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
</tr>
</table>

Paso 4.- Guarda tu plantilla y cierra la edición y fíjate como te quedara.

0 comentarios:

Publicar un comentario

SÍGUENOS EN: