Botones Flotantes de Facebook, Twitter y Google+

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í.

Tu cuando presionáis en Recomienda este blog. Te aparecerá el cuadro completo. Y voz podrás recomendar el que queras vale.

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;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
background-color: #eee; /* Color de fondo del botón */
padding: 5px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 10pt; /* Tamaño del texto */
color: #999999; /* Color del texto */
text-align: center;
position:fixed;
bottom:5px;
right:30px;
}
#expandirBotones{
background:#eee; /* Color de fondo del contenedor */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-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>
google.load("prototype","1.6.0.3");
google.load("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.  Blog de Prueba

Eso es todo amigos en cuanto a este post, si queres seguirnos y recibir actualizaciones estamos  Aqui.

Dejar Comentarios Click Aqui.