miércoles, 27 de abril de 2011

Oloblogger

Oloblogger


Más sobre el botón de Divoblogger. Mejora y alineación.

Posted: 26 Apr 2011 07:55 AM PDT

Por fin he tenido un pequeño rato para ver esto del botón de Divoblogger. Algunos ya sabéis que con el código anteriormente facilitado, resulta imposible situar más de un botón en la misma página y por tanto, en la página inicio y las de navegación, sólo era visible en el primer post. Pues bien, viendo lo que el script del botón hacía, la solución es muy fácil.

Se trata de poner de nuestro lado lo que el PHP hacía del suyo, que es simplemente comprobar la existencia de la dirección del post en DivoBlogger y luego mostrar el botón adecuado (súbelo o vótalo). Todo eso se hace a través de un iframe.

El código para Blogger sería este y digo para Blogger porque para enviar la dirección adecuada, vamos a utilizar una variable de este sistema, data:post.url, que es la que contiene precisamente la URL de cada entrada:

<iframe allowtransparency='true' expr:src='&quot;http://divoblogger.com/api/check_url.php?url=&quot;+data:post.url' frameborder='0' height='22' hspace='0' marginheight='0' marginwidth='0' scrolling='no' vspace='0' width='61'></iframe>

De esta manera, podemos colocar todos los botones que nos apetezca.


Lo de centrarlo o situarlo en línea con otros botones, cosa que también habéis preguntado algunos, se hace insertando el código dentro de un div y dando a este, respectivamente, el estilo necesario para centrar o para flotar.

CENTRADO
<div style="width:ANCHO_DEL_BOTONpx;margin:0px auto;">CODIGO DEL BOTON</div>

VARIOS BOTONES EN LINEA
<div style="float:left;">CODIGO DEL BOTON1</div>
<div style="float:left;">CODIGO DEL BOTON2</div>
<div style="float:left;">CODIGO DEL BOTON3</div>


Y ya que estamos, para centrar diversos botones que están juntos como se explica en el último trozo, se ha de meter todo dentro de otro div como el del primer ejemplo, es decir, con un margin:0px auto y un width igual al ancho total de todos los botones sumado.

<div style="width:ANCHO_TOTALpx;margin:0px auto;">
<div style="float:left;">CODIGO DEL BOTON1</div>
<div style="float:left;">CODIGO DEL BOTON2</div>
<div style="float:left;">CODIGO DEL BOTON3</div>
</div>


No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog