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

Demo Clic aquí

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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjSOVl29IFz1kmLnJbP6zRfDUFKEkFgw0dWuvQO2-ZrYJOSoqiPg7G6NSmk6TgFoT78XRPLeWZSU5ZjzzSGq2MuXzinIaUuWZwRCnBaRtnZ2l1A_lTD5B9VUH4Nu-7ahRIehwm4G71VLHq/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjSOVl29IFz1kmLnJbP6zRfDUFKEkFgw0dWuvQO2-ZrYJOSoqiPg7G6NSmk6TgFoT78XRPLeWZSU5ZjzzSGq2MuXzinIaUuWZwRCnBaRtnZ2l1A_lTD5B9VUH4Nu-7ahRIehwm4G71VLHq/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

TAGS: Widgets para Blogger

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.