En esta entrada os mostraba como implementar marcadores en nuestros posts, realmente es una manera muy atractiva de presentarlos pero con un inconveniente, viene predefinido para el "mercado" ingles.

Es decir sirve para promocionar nuestras entradas en una serie de sitios que a nosotros no nos sirven, habitualmente usamos otras paginas para promocionarnos.

Por ello vamos a verlo como hacerlo y me sirve para introduciros un concepto, CSS Sprite, algo a lo cual debemos empezar a acostumbrarnos a usar, eso si poco a poco.

Para que lo entendáis de forma fácil CSS Sprite consiste en usar una sola imagen con todas las imágenes que vamos a usar. ¿Que? Google hace tiempo que lo usa, Yahoo también y cada vez es mas frecuente ver su uso en menús en los cuales vamos a usar diferentes imágenes. Usar esta técnica nos permite cargar una sola imagen en la cual están incluidas todas las imágenes y mostrarlas usando la propiedad background-position.



La imagen usada en la entrada de marcadores para mostrar el efecto es esta



Si volvemos al tema que nos ocupa, personalizar de manera eficaz nuestra barra de marcadores, entiendo que la mayoría no podría preparar una imagen de esa forma personalizándola con nuestros marcadores o... ¿tenemos otra forma?

Si la tenemos y además usando la misma técnica sin necesidad de cargar dos imágenes.

El concepto es el mismo, el efecto es el mismo pero solo usaremos una imagen, de la cual mostraremos la mitad de ella y al pasar el ratón sobre ella se mostrara entera.

Para ello debemos seleccionar los iconos de los marcadores que vamos a utilizar, recomiendo que todos tengan el mismo tamaño. Los incluimos en una carpeta y esa carpeta la comprimimos en formato .zip.

Una vez hecho nos dirigimos a esta página que nos va a facilitar el trabajo en un 90%.

Nos creara nuestra imagen con todas las imágenes y además nos proporcionara el CSS que posiciona cada imagen correctamente.

Copiamos el CSS, guardamos la imagen y la subimos a Blogger o a una web de alojamientos.

El CSS que obtenemos lo añadimos a nuestra plantilla y vamos a hacer algunos cambios. Será parecido a este

.delicio { background-position: 0 -30px ; }
.facebook { background-position: 0 -94px ; }
.meneame { background-position: 0 -158px ; }
.reddit { background-position: 0 -221px ; }
.rss { background-position: 0 -284px ; }
.stumble { background-position: 0 -348px ; }
.technorati { background-position: 0 -412px ; }
.twitter { background-position: 0 -476px ; }

Como lo que pretendemos es que las imágenes se muestren solo la mitad de ellas y al pasar el mouse sobre ellas se muestren enteras, el CSS obtenido será el que nos sirva para cuando pasemos el mouse (imagen entera) y para ello debemos cambiar el CSS de cada imagen. Es decir si hemos obtenido

.delicio { background-position: 0 -30px ; }
le añadimos :hover, por lo que quedaría
.delicio:hover { background-position: 0 -30px ; }

Con ello ya tenemos las imágenes completas al pasar el ratón sobre ellas, ahora veamos como hacer que se muestren solo la mitad de ellas al cargar la página.

Al código anterior

.delicio:hover { background-position: 0 -30px ; }

le añadimos el código para mostrar la imagen

.delicio { background-position: 0 -30px ; }

pero como lo que queremos es que se muestre solo la mitad, suponiendo que los iconos tiene una altura de 30px vamos a quitarle 15px a su position por lo que quedaría

.delicio { background-position: 0 -15px ; }

Así el código para una de las imágenes seria

.delicio { background-position: 0 -15px ; }
.delicio:hover { background-position: 0 -30px ; }

Como todos los iconos serán del mismo tamaño repetiremos la operación por cada uno de ellos, es decir le quitaremos 15px a cada uno. Por lo que nos quedaría

.delicio:hover { background-position: 0 -30px !important; }
.delicio { background-position: 0 -15px !important; }
.facebook:hover { background-position: 0 -94px !important; }
.facebook{ background-position: 0 -79px !important; }
.meneame:hover { background-position: 0 -158px !important; }
.meneame { background-position: 0 -143px !important; }
.reddit:hover { background-position: 0 -221px !important; }
.reddit { background-position: 0 -206px !important; }
.rss:hover { background-position: 0 -284px !important; }
.rss { background-position: 0 -269px !important; }
.stumble:hover { background-position: 0 -348px !important; }
.stumble { background-position: 0 -333px !important; }
.technorati:hover { background-position: 0 -412px !important; }
.technorati { background-position: 0 -397px !important; }
.twitter:hover { background-position: 0 -476px !important; }
.twitter { background-position: 0 -461px !important; }

*Es importante que añadamos !important a cada clase creada.

Hasta ahora hemos visto como mostraremos la imagen pero si usamos una sola imagen para todo ¿donde ponemos la url de la imagen subida?

Pues a todas las clases que hemos generado anteriormente le añadimos un background

.delicio, .delicio:hover, .facebook, .facebook:hover, .meneame, .meneame:hover, .reddit, .reddit:hover, .rss, .rss:hover, .stumble, .stumble:hover, .technorati, .technorati:hover, .twitter, .twitter:hover,{
background:url(URL DE LA IMAGEN OBTENIDA Y SUBIDA A UN ALOJAMIENTO) no-repeat !important;
}

Con este CSS ya tenemos el efecto deseado, medio icono mostrado que al pasar el mouse se mostrara entero.

Acabemos con la parte de CSS añadiendo unas pocas líneas de códigos donde definimos el contenedor (div), lo forzamos a mostrarse en una sola fila, lo posicionamos y poco mas.

div.marcadores ul {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.marcadores ul li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.marcadores ul a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

Así el código definitivo será (podrá ser mas largo o mas corto dependiendo del número de marcadores a mostrar)

div.marcadores ul {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.marcadores ul li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.marcadores ul a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}
.delicio, .delicio:hover, .facebook, .facebook:hover, .meneame, .meneame:hover, .reddit, .reddit:hover, .rss, .rss:hover, .stumble, .stumble:hover, .technorati, .technorati:hover, .twitter, .twitter:hover,{
background:url(URL DE LA IMAGEN OBTENIDA Y SUBIDA A UN ALOJAMIENTO) no-repeat !important;
}
.delicio:hover { background-position: 0 -30px !important; }
.delicio { background-position: 0 -15px !important; }
.facebook:hover { background-position: 0 -94px !important; }
.facebook{ background-position: 0 -79px !important; }
.meneame:hover { background-position: 0 -158px !important; }
.meneame { background-position: 0 -143px !important; }
.reddit:hover { background-position: 0 -221px !important; }
.reddit { background-position: 0 -206px !important; }
.rss:hover { background-position: 0 -284px !important; }
.rss { background-position: 0 -269px !important; }
.stumble:hover { background-position: 0 -348px !important; }
.stumble { background-position: 0 -333px !important; }
.technorati:hover { background-position: 0 -412px !important; }
.technorati { background-position: 0 -397px !important; }
.twitter:hover { background-position: 0 -476px !important; }
.twitter { background-position: 0 -461px !important; }

Veamos ahora el HTML necesario para que al pulsar sobre el marcador nuestras vistas pueden promocionarlo.

Guardamos, expandimos nuestra plantilla, buscamos <div class='post-footer-line post-footer-line-3'> y a continuación pegamos

<div class='marcadores'>
<ul>
<li class='delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
</div>

Solo he añadido tres pero quiero que entendáis también este concepto, cada código comprendido entre <li class='CLASE DEL MARCADOR DEFINIDA EN EL CSS'> y </li> esta formado por la url de la pagina donde nos permiten subir nuestros post (a expr:href='&quot; http://technorati.com/faves?add=&quot;) + la url de nuestra entrada (data:post.url) + su titulo que se abrirá en una nueva ventana o pestaña (&quot;&amp;title=&quot; + data:post.title' target='_blank'/>).

En cada código solo deberéis modificar la url de las páginas donde permiten subir la entrada.

Deberéis repetir este código por cada marcador que queráis incorporar.
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también