
¿Te imaginas poder mostar solo el numero de lectores de tu feed sin tener que recordar que usas feedburner a cada uno?, ya en su dia hice un breve tutorial de como esconder el by feedburner de abajo, y este viene siendo la versión vitaminada.
Lo que vas a hacer en este tutorial es una chapuza como una casa que básicamente consiste en colocar un gif con una ventanita transparente con el numero de lectores y debajo el boton de feedburner, pero eso si, funciona perfectamente.
Paso 1: la imagen

Crea tu botón de feedburner del color que prefieras, en una capa superior, diseña el botón que va a cubrirlo, haz una ventana transparente de, la ventanita tiene que ser de 36×12, recuerda que el el botón tiene que estar dentro de la imagen, sin sobresalir por ningun borde. Opcionalmente, el diseño no tiene porque ser horrible, como en este caso (He teñido el botón de fb de rojo para que se entienda la idea) por último, añade 26 pixeles transparentes por arriba, para solucionar un bug de posicionado en IE6/Firefox.
Paso 2: CSS

Vete sacando la calculadora para este paso, lo primero es el html, que es este y no cambia, salvo por la ruta del botón de feedburner y el enlace a tu feed:
<a href="#" class="fba">
<img src="http://www.feedburner.com/fb/i/services/feedcount_static.gif" alt="fb" class="fbb" /><br />
<img src="boton.gif" width="179" height="66" class="fbi" /></a>
Para el css no va a ser tan facil, estate atento a la chuleta de tu derecha, ya que es a las distancias a las que me voy a referir a partir de ahora.
La linea roja es el alto total de la imagen, incluyendo los 26 pixeles extra. (En este caso, 75)
La linea verde es la distancia total del botón de feedburner desde el principio de la imagen (En este caso, 6)
La linea azul es la distancia total del botón de feedburner desde el extremo inferior de la imagen (En este caso, 7)
Una vez sabido esto, este es el código css que da magia al botón, cambia lo que corresponda:
.fbb {
padding-left: (medida de la linea verde)px;
margin-bottom: (medida de la linea azul)px;
}.fbi {
margin-top: -(medida de la linea roja)px;
}.fba {
display: block;
margin-top: 30px;
}.fba img {
border: 0px none #FFFFFF;
}
El margin-top de .fba puee ser superior o inferior, no se representa exactamente igual en todos los navegadores, asi que puede ser inexacto, 30px suele funcionar bien.
el borde nulo de .fba img es simplemente para que no salga el reborde azul al tratarse de un enlace, es opcional si ya lo has declarado en otro sitio.
Nota no me hago responsable de lo que pueda pasar si te anulan el feed, esto solo pretende ser una prueba de lo que se puede conseguir simplemente con css y al menos yo, no me atreveria a usarlo en un sitio real.




0 Responses to “Howto: Transforma el botón de feedburner”