domingo, 10 de febrero de 2013

Botones para compartir flotantes

Existe una tendencia de usar de botones flotantes para compartir post en diferentes redes sociales, que siempre estén en la vista para que los usuarios compartan y se genere mayor tráfico al blog, lo cual es muy importante en el posicionamiento que realizo con seorimícuaro. Este widget está diseñado para que se quede fijo en la parte izquierda de su blog, con esto tienes una ventaja, a que cualquier visitante de clic en algún y comparta el post con sus amistades. A mi siempre me ha gustado como los presenta Oloman, pero en esta oportunidad me basé en el código utilizado en blog ayudadeblogger pero con la diferencia que no utilicé AddThis por los recursos que esto pudiera consumir, lo que me perjudicaría en el posicionamiento de seorimícuaro.

Lo importante de este método es que no utilizo ningún script, solo html y CSS, por lo que no afecta la velocidad de cargue del blog, esto es muy importante, pues se dice que la velocidad de carga es tenida en cuenta en el posicionamiento. Los dejo con mi seorimícuaro trabajo 24 horas.

Paso 1. Busco el código <b:includable id='post' var='post'>

Paso 2. Peso el siguiente código

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.mbt_social_floating{
    position:fixed; bottom:10%; margin-left:-60px; float:left;
    width:30px;
    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;
   min-height: 160px;
   }
</style>

<div class='mbt_social_floating'> 
  <!—google +-->
<a class='st_google+' href='https://plus.google.com/111845617295935089944/?prsrc=3' rel='nofollow' style='text-decoration: none;' target='_blank'><img height='24' src='https://ssl.gstatic.com/images/icons/gplus-32.png' style='border: 0;' width='24'/></a>

<!--Facebook-->
<a class='fblike' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url+ &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img expr:src='&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUALszS-dYGT8f78qGw19ERefhbeB_FwgXnFeA1Mu6b5UP_VGWrWnc25wQZBPnLjyFnv9umsg0mr6eiYyzrgTu0oIoU41pfwb-LX8iF6yAsfAP-69n54qcv58M64aFUOzi_ZYUAV85bGE/s800/facebook.png&quot;' style='border:2;height:24px;'/></a>
<!--Twitter-->
<a class='.st_twitter' expr:href='&quot;http://twitter.com/home?status=&quot;+ data:post.url+ &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img expr:src='&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi96POKqf5hd1aYe_KTQA2wA6BCFjyionA3HLsll8SyIhB5Sx5Dtg96Sw433F8QKT0ZrIQyR8gJSL56k7Xs_ff1XsBlN68ciaSXE5UC_7e_nECUKdlZCBj9bO3kfyQQRMs9-U8hYQXdGgk/s800/twitter.png&quot;' style='border:2;height:24px;'/></a>
<!--Bitacoras-->
<a class='.st_botredbitacoras' expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url' title='Vota en bitácoras'><img expr:src='&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjhSSNpRqB4Fy5ROtjB2RGCooUXkOyCJYQev-V-C5x7tuHdbNvZZFWjq7c1O842j3ntv0VNwhTj7T_beju8pVmNhxk2p947Ve5uAThiwK0ESIUZeBMjwc86rsvAevVvWGFYCX6UYUzTA/s128/descarga.jpg&quot;' style='border:2;height:24px;'/></a>
<!--tumbleupon-->
<a class='.st_tumbleupon ' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img expr:src='&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJj-xHECKU4958IpDyJ7wuBtIZ4oRfswwPu-4UvHTyEY8lt3o4ekVn295Z0K6AN6vQq5LZdxB9s1qo_TGXCKoKozc9n-3X9iG18t0xsjyqayHbFloMxk1PCwaalRxxD2HoQiq__sfe4LM/s800/stumbleupon.png&quot;' style='border:2;height:24px;'/></a>
<!--friendfeed-->
<a class='.st_friendfeed' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img expr:src='&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOsHgemQxYSqnKFIxSx2u_cKSe5yPLrIcx1XCDroDkw9eOV_u3HT8JSCkFgscvGSep5fJA3c-juRWmSf1Mqc63UP1Kqp05xBCUHVl2zXbzRmD5e4dYd8h7ObSWPFm83P3HHkMUgEVWjSU/s800/friendfeed.png&quot;' style='border:2;height:24px;'/></a>
</div>
</b:if></b:if>


Obtendrás el siguiente resultado.

Botones redes sociales

Nos vemos en la próxima seorimícuaro entrada.

No hay comentarios:

Publicar un comentario

Tu comentario es importante...