lunes, 11 de febrero de 2013

Botones flotantes con sprite

Con la idea de colocar botones flotantes para compartir en redes sociales como los que tiene oloman, después de trabajarle hasta la madrugada me encontré con un post de Jmiur sobre los llamados Sprites. Los sprites son un conjunto de imágenes agrupadas en un solo archivo, a cada una de ellas se accede mediante un desplazamiento respecto del borde superior izquierdo, cota (0,0), y sus dimensiones absolutas, fue allí donde empecé a entender el truco de oloman. A los sprites se le considera un método de agrupación de imágenes que, posteriormente, pueden ser tratadas de forma independiente con CSS.  Resulta que al utilizar sprites las imágenes se cargan mucho mas rápido que cargar varias imágenes pequeñas, lo que es importante en la optimización de mi web para el posicionamiento de seorimícuaro.

A diferencia de la entrada Botones para compartir flotantes donde utilizo varias imágenes para enviar entradas a diferentes marcadores, en esta entrada solo utilizo una sola imagen que contiene los diferentes iconos de la redes sociales, ustedes podrán apreciar la seorimícuaro diferencia.

Para ilustrar como generar botones flotantes con el uso de sprites para enviar entradas a las redes sociales procedemos de la siguiente forma.

Paso 1. Expandimos plantilla de artilugio y buscamos <b:includable id='post' var='post'>

Paso 2. Debamos pegamos 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:26px; 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: 216px; }
 

#portamento_container {position: absolute;  margin: 0 0 0 12px;}
#portamento_container .social.fixed { position:fixed;}
.social { position: relative; display:none; width:24px;padding: 1px; }

a[class^=&#39;botred&#39;] {width: 24px; height: 24px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguubVu1_PLG7Qd2cdLBIIEtldY1H2O3Y1smXXIAUBbBxNEJzDzcO8HOVF8JqvkMYVTptAt8UKfwdF6LV2K7C6Nn-ViEvsk-fOjdIsPIZMfwaZmA-adD2VXqK35FLqNg81MVEMvbKXIp_4/s240/Iconos-redes-sociales.jpg); float: left; margin: 2px 0 ; text-indent:-9000px;overflow: hidden;border: 1px solid #ddd;border-radius:4px;-moz-opacity:.70; filter:alpha(opacity=70); opacity:.70; }

a:hover[class^=&#39;botred&#39;] {border-color:#333;box-shadow:0 0 3px #cccccc;-moz-opacity:1; filter:alpha(opacity=100); opacity:1; }

a:hover.botredgoogle {background-position: 0px 0px;}a.botredgoogle {background-position: 0px -24px;}
a:hover.botreddivoblogger {background-position: -24px 0px;}
a.botreddivoblogger{background-position: -24px -24px;}
a:hover.botredbitacoras {background-position: -48px 0px;}
a.botredbitacoras {background-position: -48px -24px;}
a:hover.botredfriendfeed {background-position: -72px 0px;}
a.botredfriendfeed {background-position: -72px -24px;}
a:hover.botredtumbleupon {background-position: -96px 0px;}
a.botredtumbleupon {background-position: -96px -24px;}
a:hover.botredfacebook {background-position: -120px 0px;}
a.botredfacebook {background-position: -120px -24px;}
a:hover.botredtwitter {background-position: -144px 0px;}
a.botredtwitter {background-position: -144px -24px;}
a:hover.botredpinterest {background-position: -168px 0px;}
a.botredpinterest{background-position: -168px -24px;}
a:hover.botredimpresora {background-position: -192px 0px;}
a.botredimpresora {background-position: -192px -24px;}
a:hover.botredemail {background-position: -216px 0px;}
a.botredemail {background-position: -216px -24px;}
</style>


<div class='mbt_social_floating'>
   <!-- google+-->
<a class='botredgoogle' 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='botredfacebook' 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' title='Compartir en Facebook'> Compartir en Facebook </a>
<!--Tuitter-->
<a class='botredtwitter' expr:href='&quot;http://twitter.com/home?status=&quot;+ data:post.url+ &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartelo Twitter'>Compartelo Twitter</a>
<!--bitacoras-->
<a class='botredbitacoras' expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url' title='Vota en bitácoras'>Vota en bitácoras</a>
<!--Printeres-->
<a class='botredpinterest' href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Haz Pin'>Haz Pin</a>
<!--tumbleupon-->
<a class='botredtumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartelo en tumbleupon'>tumbleupon</a>
<!--friendfeed-->
<a class='botredfriendfeed' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartelo en friendfeed'>friendfeed</a>
<!--imprimir-->
<a class='botredimpresora' href='javascript:window.print();' title='Imprimir artículo'>Imprimir artículo</a>
</div></b:if></b:if>

Los botones solo se mostrarán en las entradas individuales, las que deseamos que sean compartidas por nuestros lectores con sus amigos. El resultado obtenido es el siguiente.

botones-redes-sprite

Nos vemos en la próxima seorimícuaro entrada…No pierdas la oportunidad de compartir las entradas de este blog con tus amigos.

1 comentario:

Tu comentario es importante...