Botones flotantes para compartir tus entradas en Facebook, Twitter y G+

Hoy les traigo un nuevo tutorial que trata de como poner los botones flotante para compartir las entradas en twitter, facebook y google +1. Este es un tutorial muy sencillo que tiene como resultado los botones flotantes  que se visualizarán en el lado izquierdo de cada entrada del blog.



Vamos con los pasos a seguir...



Primero como ya he nombrado en tutoriales anteriores deben ir a su configuración de diseño y entrar en HTML. Estando ahí tienen que darle a marcar a expandir plantillas de artilugios como sale en la siguiente imagen.

pinchar para ver en grande


Ahora pulse simultáneamente las teclas Ctrl+F para buscar el siguiente código:

]]></b:skin>

Antes el código anterior pegan el siguiente código


table#RedesSociales{
position:fixed;
top:150px; 
left:5px; 
z-index:200;
}

Ahora pulsen de nuevo las teclas Ctrl +F y busquen el siguiente código:


<!-- clear for photos floats -->


Y luego del primero que encuentren,  pegen el código que se encuentra en la siguiente caja:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0' cellpadding='6' id='RedesSociales'><tbody>

<tr><td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:60px'/></td></tr>

<tr><td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td></tr>

<tr><td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></td></tr>

</tbody></table>
</b:if>


Ahora solamente tienes que guardar y ya aparecerán tus botones flotantes para que tus lectores puedan compartir tus entradas con el Social Media Network.

Espero que les gustara este nuevo tutorial, recuerden que agradecer no cuesta nada y nos vemos con otro tutorial "Para ti blog" que salve por ahí del ciberespacio.

Agradecimientos por el Código a Ciudadblogger.





CONVERSATION

12 ya son Blogger@s:

  1. Anónimo, ya funciono había un pequeño error. gracias por avisarnos, el cambio es que, es antes de ]]> no después

    Ya lo probamos y funciona, saludos

    ResponderEliminar
  2. no me aparece el segundo codigo :(

    ResponderEliminar
  3. pusiste expandir plantillas de artilugios? como no te aparece?

    ResponderEliminar
  4. Cuando Busco 
    Aparece Sin Resultados, A Lo Cual, No Se Donde Colocar La 2da Linea

    ResponderEliminar
  5. Cuando Busco la Parte: "Clear For Photos Floats", No Arroja Ninguna Busqueda !

    ResponderEliminar
  6. Andres, tienes que darla al cuadro "Expandir plantillas de artilugios"

    , de otra manera no te encontrara ese código, avísame como te va xoxo

    ResponderEliminar
  7. Como Deberia Ser para que no fueran flotantes y quedaran abajo de las estradas??? por favor ayuda

    ResponderEliminar
  8. Lo probé ayer y funciona perfectamente. Después de mi último cambio de platilla perdí las opciones para compartir contenido, así que esto me vino como anillo al dedo. Muchas gracias ^^

    ResponderEliminar
  9. La verdad no se entiende bien,no esta muy mal explicado. Los botones no aparecen

    ResponderEliminar

Todo comentario que no tenga relación con el post o sobrepase los límites de la libre expresión, será moderado y no saldrá publicado.

Back
to top