add

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. Antes de compartir este widget con ustedes les pido que hagan un enlace de retroceso hacia mi blog, por haberles ayudado a innovar su blog. Les recuerdo que es completamente gratis utilizar este widget y es prohibida su venta. Bueno es hora de trabajar!

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

¿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ñ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 Ir a Blogger

2 Un clic en “Plantilla

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

3 Un clic en “Editar HTML

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

Ahora se le abrirá el Editor HTML de su plantilla

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

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.

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?


4.- Busca este código

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

5.
Justo debajo del código que encontrastes 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.
  
6.-  Guarde la plantilla y listo

¿Tienes preguntas?

Esta barra flotante se muestra en páginas de entrada única y acostúmbrese a verla en la página principal. El widget tiene un fondo blanco y flota a la izquierda de las  publicaciones de su blog.

Cualquier pregunta no duden en escribir

emailEnviar por correo

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. 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
  21. hola me puedes ayudar, me desaparecieron los titulos de cada etiqueta

    ResponderEliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios