Más sobre el botón de Divoblogger. Mejora y alineación. | Oloblogger 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, res...

26 de abril de 2011

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

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>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo ? También puedes imprimir este artículo .

Interacciones en Google+

8 comentarios :

  1. Vamos a implementarlo hasta ahora me retenía justamente por esos detalles. Ojalá dé el resultado esperado.
    Gracias Oloman.

    ResponderEliminar
  2. Tengo un problema en colocar el botón,no entiendo bien en dónde es que hay que insertarlo,te agradezco si me puedes decir detrás de que debo ponerlo ,lo puse en varios lugares y se me descompagina el blog,gracias mis disculpas y felicitaciones por esta página.

    ResponderEliminar
  3. Fiaris creo que en tu blog, el mejor sitio es justo delante del botón Bitácoras. No olvides cambiar el float:left, por un float:right, ya que tú lo tienes alineado a la derecha.

    ResponderEliminar
  4. no me entendiste la pregunta, te preguntaba cuando despliego el blog en edición HTML allí es que no se donde insertarlo, la edición HTML no es cosa que se lleve bien conmigo ya realice varias pruebas y se desarmo todo el blog,disculpa es que soy espesa en estos temas (float:right?????)
    gracias y disculpas.

    ResponderEliminar
  5. Fiaris, en esta ocasión sí que te entendí, pero no sabía hasta qué nivel tenía que bajar la explicación.

    Tienes que ponerlo justo delante del botón de Bitácoras que hay en tu plantilla (Edición HTML). Eso es, justo delante de esto:
    <a href="http://bitacoras.com/anotaciones/http://pensamientosreflexionesamor.blogspot.com/2011/05/tu-que-contestas.html"><img alt="votar" src="http://widgets.bitacoras.com/votar/mini/http://pensamientosreflexionesamor.blogspot.com/2011/05/tu-que-contestas.html" style="vertical-align: middle; border: 0pt none; float: right; margin-left: 10px;" title="Votar este artículo en Bitacoras.com"></a>

    Luego, del código que yo ofrezco en este post, sólo tienes que cambiar el float:left por un float:right, para que te quede todo bien alineado a la derecha.

    ResponderEliminar
  6. Me doy por vencida no puedo,gracias de todas formas.

    ResponderEliminar
  7. A ver Fiaris. Vas a tu plantilla y pinchas en Plantillas de artilugios expandidos. Luego buscas (con CTRL+F) la palabra "bitacoras" hasta que encuentres el trozo que reproduzco en el comentario 5. Pues justo delante de ese trozo, es dónde tienes que pegar el primer código que yo publiqué en este post.

    Luego ya veremos cómo alinearlo bien si lo logras.

    ResponderEliminar
  8. Gracias por la explicación Oloman, esta genial. Saludos =)

    ResponderEliminar