Como crear botones flotantes para compartir todas las redes sociales, Crear Bar Flotante


El widget que les enseñare a crear sirve para compartir las redes sociales más usadas actualmente. Como ustedes sabrán es una nueva tendencia usar este tipo de botones flotantes, porque sirve para darle un nuevo aire a nuestro blog de Blogger. Ahora con este widget los usuarios que visitan su blog, podrán compartir todos sus post interesantes, y así tener más tráfico en nuestro blog. El widget que les presentare a continuación tiene una buena personalización para usarlo con Twitter, Pinterest y un botón de correo electrónico.

Este widget está diseñado para que flote en la parte izquierda de su blog, y cuando el usuario está leyendo sus artículos les acompañara de arriba hacia abajo y no se despegara de ellos en ningún momento, con esto usted tiene una ventaja, a que cualquier visitante aplaste cualquier botón de cualquier red social y lo comparta con sus amistades, esto hace que su blog tenga toneladas de trafico diariamente, gracias a esta barra de botones flotantes que tienen en sus botones las redes sociales más utilizadas actualmente. He probado este widget en algunos navegadores como Internet Explorer 7, firefox, Chrome, etc. y funciona correctamente sin ningún error de navegación.

¿Cuales son las redes sociales que se deben utilizar?

Su primera prioridad debe ser siempre Facebook, Google +, Twitter, Linkedin y ahora Pinterest. En todos los botones deben estar incluidas las mejores redes sociales, para poder compartir sus artículos y así puedan circular por todo el mundo.

A continuación su demostración
Añadir Bar Flotante a Blogger

Los pasos que necesita seguir son muy fáciles de aplicar. Todo lo que necesita es copiar y pegar el código que les voy a proporcionar aquí.

1 Un clic en Tema


2 Un clic en “Editar HTML


Ahora se le abrirá el Editor HTML de su plantilla


En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

3.- Busca este código

<b:includable id='post' var='post'>

4.- Justo debajo del código que encontraste pega el siguiente código:


<!-- www.ayudadeblogger.com-->                                                                                                                <b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.adb_social_floating{
    position:fixed; bottom:10%; margin-left:-60px; float:left;
    width:60px;
    background-color:#f7f7f7;
    padding: 5px 0 0px 0px;
     border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.adb_social_floating .adb_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.adb_social_floating .st_twitter_vcount, .adb_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.adb_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.adb_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.adb_social_floating .chicklets, .adb_social_floating .stMainServices {
    background:url(&#39;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif&#39;) no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url(&#39;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif&#39;) !important;
}
.adb_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.adb_social_floating  .stButton_gradient{
    border:none !important;
}
.adb_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.adb_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
}

.st_fblike_vcount{
    margin-bottom: 0px;
    display: block;
}
.st_twitter_vcount{
    margin-bottom: 3px;
    display: block;
}

.st_email{
    margin-bottom: 5px; margin-top: 3px;
    display: block;
}
.adb_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}
</style>

<div class='adb_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
    <span class='st_fblike_vcount' displaytext=''/>
    <span class='st_twitter_vcount' displaytext='' st_via='ayudadeblogger'/>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
</div>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>

<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;AYUDA DE BLOGGER&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.ayudadeblogger.com/' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if>
</b:if>


Ahora lo único que necesita hacer es cambiar ayudadeblogger con su nombre de usuario de twitter.

Recuerda que solo debes cambiar el texto que está marcado de color amarillo, solo donde dice ayudadeblogger

5.- Guarde la plantilla y listo

¿Tienes preguntas?

Esta barra flotante se muestra en páginas de entrada única. El widget flotara a la izquierda de las  publicaciones de su blog.

Cualquier pregunta no duden en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

24 comentarios:

  1. Hola!! Muchísimas gracias por el aporte. Funciona perfectamente salvo el botón de facebook, que pide confirmar y parece no ir muy bien.
    Por lo demás, mil gracias!

    ResponderEliminar
  2. Muchas gracias por todo. Me funciona muy bien. Eres lo más.

    ResponderEliminar
  3. Hola Rubén, lo malo es que no me funcionan las páginas de mi blog. Y es por utilizar esta barra que me gusta mucho. Si me puedes dar una idea para que se vean el contenido de mi pág. te lo agradezco. Mi blog es : http://www.pecaditosdulces.blogspot.com.es/

    ResponderEliminar
  4. Hola de nuevo. En mi plantilla blogger no funciona las paginas porque no tenían enlaces, he puesto la información con enlaces y ha quedado súper bien.

    ResponderEliminar
  5. Te explico para que tus lectores me entiendan bien:

    1° Me funciona de maravilla se lo recomiendo a todos.
    2° El problema que tenía fue porque había escrito directamente en las páginas fijas, es decir, lo que conocemos todos como menú.

    La mayoría de gente enlaza la información en las páginas de una entrada u otros blogs, pero yo había escrito directamente sin enlazar a nada y no me funcionaba en mi plantilla que no es la típica plantilla que nos ofrece blogger sino plantillas que ha realizado un diseñador de plantillas para blogger.

    Solución: enlazando las páginas fijas a las entradas que hice obtuve un resultado no del 100%, sino lo siguiente.

    3°Pecaditos Dulces y yo te damos un GRACIASSSSSSS por este post de todo corazón.

    ResponderEliminar
  6. hola estuvo muy bueno este widget. Pero en mi caso el boton me gusta y la mano con el dedo levantado, me queda muy salido. Y me come parte del titulo de mi entrada. Hay alguna forma de reducirle el tamaño . gracias

    ResponderEliminar
  7. hola esta es la direccion de mi blog. www.juniorcarbonel.blogspot.com si puedes revisar las entradas lo puse los botones que indica el tutorial, pero se come parte del articulo. Gracias si me puedes ayudar.

    ResponderEliminar
  8. Hola , coloque los códigos como están escritos y no aparece la barra flotante en mi blog

    ResponderEliminar
  9. este es mi blog http://lnndemtnewst.blogspot.mx/

    ResponderEliminar
  10. ya logre q apareciera en las entradas , pero hay alguna forma de que también aparezca en la pagina principal ?

    ResponderEliminar
  11. lo subi a naturalizacionurbana.blogspot.com pero no aparece, a que se debera?, muchas gracias nuevamente

    ResponderEliminar
  12. Hola Experimento, tal vez algo estas haciendo mal, ya que el codigo funciona correctamente. Sigue estos pasos que te dejo a continuacion:
    1 Da un clic en "Plantilla"
    2 Luego da otro clic en "Editar HTML" y estaras en el codigo html de tu blog, luego mira a tu lado izquierdo y marca la casilla que dice "Expandir plantilla de artilugios", luego presiona F3 e inserta esta codigo en el cuadro de abajo en la cual te aparecera luego de presionar F3, y abajo del codigo que encontraste inserta el codigo que esta en mi post, realizando un solo cambio, luego le das un clic en "Guardar plantilla", eso es todo el proceso es facil insertar este widget flotante para blogger.
    Saludos.

    ResponderEliminar
  13. Hola, muchas gracias por la ayuda, la verdad es la unica pagina en la que encontre la informacion correcta y que verdaderamente funciona y ademas de todo, lo haces muy sencillo...Miles de Gracias!!!

    ResponderEliminar
  14. Hola Luis. ¿Se puede hacer el botón de Facebook más estrecho?

    ResponderEliminar
  15. Hola Jazmin, de nada, recuerda que estoy para ayudarles.
    Hola Alberto, el boton no se lo puede hacer mas estrecho por que biene con la interfaz de facebook directamente en mi script.
    Saludos.

    ResponderEliminar
  16. tengo problemas con el boton de pinterest carga todo bien pero no puede mostrar fotografias y por lo tanto no lo puedo pinear. muchas gracias!!!!

    ResponderEliminar
  17. Buenos días en Plantilla y editar HTLM no me permite editar, ni aparece: expandir plantilla de artilugios. Gracias de antemano.
    http://atentamente-carmen.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola, todoas los bloggers del mundo tienen el icono que dice "Editar HTML", da un clic ahi y te mostrar una imagen tal y cual esta publicado en este post en el paso 3, leelo con tranquilidad y veras que te funciona.
      Espero lo logres y si no es asi, enviame otro mensaje para poder guiarte..
      Saludos.

      Eliminar
  18. Hola de nuevo, al buscar el codigo () me sale 0.
    Gracias.
    http://atentamente-carmen.blogspot.com.es/

    ResponderEliminar
  19. Hola,

    Yo busco el código y no encuentra nada.

    No sé que estoy haciendo mal.

    info@rentmadridflat.com

    Mil gracias
    Jonás

    ResponderEliminar
  20. buen tutorial gracias por compartir

    ResponderEliminar
  21. gracias me funciono pero me gustaria saber si se puede acomodar para que salga del lado izquierdo pegado a la linea por que asi sale parte en la entrada y no deja leer agusto y tambien en que parte del codigo pongo mi email, ya que cuando le das click te manda pero no dice el mail a adonde se va a marnar el correo... saludos..

    ResponderEliminar
    Respuestas
    1. Primero necesito que me envíes la dirección tu blog y así poder ver lo que dices sobre (acomodar para que salga del lado izquierdo pegado a la linea) sobre tu otra pregunta (en que parte del código pongo mi email) cuando le das un clic en email se te abrirá una nueva de tu cuenta personal de gmail en la cual debes poner la dirección de correo electrónico de la persona que vas a enviar el articulo que actualmente estas viendo.. Saludos.

      Eliminar
  22. hola me puedes ayudar, me desaparecieron los titulos de cada etiqueta

    ResponderEliminar