Voy a crear mi propio Blog: Cómo crear botones para el Blog (II)

En esta segunda parte de 'Cómo crear botones para el blog' vamos a hablar de crear un enlace para activarlo directamente desde un botón 'prefabricado', en cuyo interior aparezca el texto que quieras poner (Imprimir', 'Ir al Sumario del Blog', etc, etc. Y habrá que empezar creando nuestro botón.
Crear botones mediante CSS tiene muchas ventajas: no se necesita descargar imágenes, los botones se expanden para adaptarse a cualquier cantidad de texto y es fácil alterar el tamaño, color y efectos, etc.
Además, usando CSS, y las 'clases', colocar un botón solo precisa insertar 'su clase' en una etiqueta. Así que basta crear el diseño del botón en la hoja de estilos, ponerle un nombre y, en su momento, vincularlo en un punto del diseño del Blog. Y, como he dicho, el botón se adaptará al texto que pongas al vínculo.
Por supuesto hay que ser un experto para crear los códigos necesarios... pero he encontrado una web que te facilita el diseño y, sobre todo, te da los códigos de los botones que crees. Es esta http://cssgradientbutton.com/
Y supongo que, buceando por Google, se encontrarán muchas, y para distintos tipos de botones... pero de momento, esta me parece suficiente para entender eso de crear botones e integrarlos en el Blog.
Así que vamos a verlo
Lo primero que verás, cuando abres la mencionada web, es una serie de colores y gradientes. Vas a crear 'tu' botón: Elije un color-base para tu botón, llámale como quieres (por ejemplo, 'boton1') y pincha en 'Edit button'.
Ahí verás que puedes definir otras muchas características: el texto que debe aparecer, la fuente, tamaño, color, sombra... También el radio de las esquinas redondeadas y las características del 'efecto hover', que no es más que cómo se ve el botón cuando pasas el ratón por él, etc, etc.
Y abajo, verás el código. Puedes ver un ejemplo de ese código aquí. Fíjate en las líneas que están entre llaves { }. Es el código del botón diseñado, donde se define el botón que has creado.
Cópialo en tu editor de textos preferido (Word, LibreOffice Writer...) y empieza a ajustar cosas.
Fíjate también (acuérdate de esto) que se ha definido como una 'clase'. Y que, en realidad, ves dos clases, una con las características que tiene que tener (las que has definido) el botón 'normal' y otra (subclase) con las del botón en 'hover' (o sea, como se debe ver cuando pases por encima el ratón).
Las 'clases' (puedes crear las que quieras, así que puedes crear tantos botones (boton1, boton2...)como te apetezca) se suelen guardar en la cabecera (<head>...</head>.... ) del blog, porque es un dato 'fijo'.

Te comento, finalmente, que después de las 'clases' definidas, tras la última }, aparece una segunda parte del código. Esta parte te informa sobre cómo hay que vincularlo (generalmente) para que aparezca en el 'cuerpo' (o donde sea). Pone algo así
<body>
<a class="botton_example" href="#">(texto del botón)</a>
</body>
pero vamos a olvidarnos de esto, ahora diré cómo vincular estos botones.

Lo primero que tenemos que hacer es incluir en el Blog las clases (de botones) que queramos crear.
Para eso, selecciono las líneas que había copiado antes, abro la plantilla del Blog, edito HTML, busco la línea donde pone </head> (en mi Blog, hacia la línea 650) y pego justo delante lo seleccionado. Guardo y ya tenemos 'fichado' ese botón. Y si tengo definido más de un botón, repito la jugada.
Así que los tengo en mi blog, y creados como clases:
Y a esas clases las llamas (por ejemplo) '.boton1', '.botón2'... o si prefires '.botón_amarillo', '.botón_verde', etc.
Y para añadirlos a una entrada solo tienes que poner (por ejemplo)
<a class="botón1" ...
Así que vamos a ver cómo los añadimos en las entradas, y los vinculamos a un enlace. Y, como decía en la primera parte...
a) Enlace a una página web
Basta añadir (en la edición HTML) esta línea:
<a class="botónX" href="URL DE LA WEB">TEXTO DEL BOTÓN</a>
Para tenerlo agregado. Por ejemplo...
Ir al sumario del Blog

b) Enlace a un javaScript ejecutable
Este caso yo lo soluciono (en la edición HTML) añadiendo esto:
<a class="botónX" href="JAVASCRIPT" onclick=”JAVASCRIPT”><span>TEXTO DEL BOTÓN</span></a>
Por ejemplo, con el conocido script para imprimir 'javascript:window.print()', podría quedar una cosa así:
Imprimir este texto (o crear un PDF)
Naturalmente, es de aplicación lo dicho al final de la primera parte sobre crear estos botones en la plantilla de las entradas del Blog

Y ahora... ¿Quieres imprimir este artículo? ¿O guardarlo en PDF?