martes, 4 de febrero de 2014

Cómo crear botones para el Blog (I)


Hemos visto cómo incrustar un enlace (a otra web, o página del Blog, o a un javaScript que se ejecute) en un texto: directamente, a través del icono 'Enlace' o si quieres recordar el código HTML, con
<a href="URL enlace"<span style="font_family: ...;"><span style="...">texto</span></span></a>
Ahora vamos a avanzar un poco más: podemos poner, en nuestro Blog, un botón, e incrustarle el enlace, dejarlo, así, 'mas aparente'.
Podemos hacerlo de dos formas:
a) añadiendo una imagen
b) creando específicamente un botón.
Vamos a empezar por lo primero, que es más sencillo.
Para eso necesitamos tener una imagen 'colgada en la red', y conocer su URL. Esto lo podemos conseguir o bien buscando, por Google, alguna imagen, y obteniendo su ruta (con botón derecho ratón... 'Copiar la ruta de la imagen', o bien subiendo una imagen propia a algún hosting de imágenes, como Postimage, ImageShack, etc, o a un disco virtual (Google Drive, DropBox...), etc.
Pero te voy a enseñar un 'truquis' mucho más sencillo: si ya tienes la imagen en tu PC, súbela al propio Blog, con el conocido icono de 'Insertar imagen' en una entrada. Y una vez pinchado en 'Elegir archivos', y elegida y subida 'tu' imagen, NO pinches en 'Añadir las imágenes seleccionadas', sino haz lo de antes: botón derecho ratón-copiar la ruta de la imagen... y la pegas en algún sitio cómodo (un editor de textos). Y ya tienes 'fichada' su URL.
(y es que Blogger conserva las imágenes que has subido, aunque no las insertes)
NOTA: cuando la imagen lleva al lado el texto del enlace, un tamaño apropiado para las imágenes es del orden de 16 a 24 px (al menos, de altura)  


Bien, y a partir de aquí, vamos a crear el enlace. Hablaremos de los dos tipos de enlaces que mencioné al principio
a) A otra página web (por ejemplo, a tu cuenta de Facebook, a la del Sumario de este Blog, a otro Blog, etc)
Esto es muy sencillo: basta añadir, en la edición HTML de una entrada, este código:
<a href="URL A LA QUE QUIERES IR"><img src="URL DE TU IMAGEN" /></a>
por ejemplo, para ir al sumario de este blog...

(también podemos 'forzar', en el código, algunos aspectos de la imagen, como tamaño, alineación, borde...) Se pondría, por ejemplo, así:
<a href=... <img src="URL DE TU IMAGEN" width=48 height=48 align=left border=1 /></a>
Y si quieres que aparezca al lado un texto, lo pondríamos así:
<a href="URL A LA QUE QUIERES IR"><img src="URL DE TU IMAGEN" />TEXTO</a>
por ejemplo...
Ir al Sumario del Blog


b) A un script de Java, que se ejecutará al pinchar en el botón.
Un ejemplo típico puede ser un script para mandar imprimir la entrada. En particular, el script que hace eso es este:
javascript:window.print()
Y se hace insertando este código en la Edición HTML de la entrada:
<a href="javascript:window.print()"><img border="0" src="URL de la imagen" /> texto que aparecerá </a>
Debo recordarte el 'truco' que comentaba aquí para que, al imprimir solo salga lo que te interese, es decir, el texto del artículo.
Y esto es (en el ejemplo) lo que saldría:
Imprimir texto (o crear PDF) 


E insisto en un tema importante: para que te funcionen los códigos tienes que pegarlos en la edición la entrada en HTML (que NO en 'Redactar').

Y otra cuestión más sobre los botones
En vez de pegarlo en una entrada, lo puedes pegar en la plantilla de las entradas (Configuración-Entradas y comentarios-Plantilla de la entrada-Añadir).
De esta forma ese botón aparecerá, a partir de ese momento, en todas las nuevas entradas que crees.
NOTA: colocarlo (en la plantilla) al principio de la entrada es sencillo. Pero como los botones 'generales' suelen ir al final del texto que escribes, yo suelo añadir a la plantilla de la entrada lo siguiente:
[EMPEZAR A ESCRIBIR AQUI]
<br />
<br />
<br />
<br />
Y AHORA PEGO, A PARTIR DE AQUÍ, EL CÓDIGO.

Continúa aquí >>


Etiquetas:

0 comentarios:

Publicar un comentario

Nota: solo los miembros de este blog pueden publicar comentarios.

Suscribirse a Enviar comentarios [Atom]

<< Inicio