Hola! Esta vez quiero compartir con la comunidad una serie de tutoriales que hice en mi Tumblr ( Cafetería de las Azores ), que os permitirán modificar la apariencia de vuestro Tumblr.
Nota: Los tutoriales los cree en Tumblr. Los iré modificando para Taringa!, pero como es lógico, serán muy parecidos a como los tengo allí.
Como primer post, algo sencillo: cómo crear un botón que cambie al pasar la imagen por encima.
<a href="URL_DESTINO"><img src="IMAGEN_1" onmouseover="this.src='IMAGEN_2';" onmouseout="this.src='IMAGEN_1';"/></a>
URL_DESTINO: La página que se abrirá al pulsar el botón.
IMAGEN_1: La imagen del botón que se muestra cuando NO se pasa el ratón por encima.
IMAGEN_2: La imagen del botón que se muestra cuando se pasa el ratón por encima.
Nota: Este botón se colocará en la parte del código donde se quiera mostrar el botón (por ejemplo: sección menú)
Ir a ejemplo Botón simple en Cafetería de las Azores
Ahora veamos cómo sería el código si quisiéramos situar el botón en un lateral de la página:
<a href="URL_DESTINO"><img src="IMAGEN_1" onmouseover="this.src='IMAGEN_2';" onmouseout="this.src='IMAGEN_1';" style=position:fixed;top:40%;left:0;/></a>
position: fixed: Indicas que la posición del botón se hará tomando como referencia el tamaño de la pantalla del usuario que está viendo la página.
top: 40%: Si la altura de tu pantalla es el 100%, sitúas el botón en el 40%, contando desde arriba hacia abajo.
left: 0: Situado a 0px de la izquierda de la pantalla.
Nota: Los botones laterales se pueden colocar en cualquier parte, entre las etiquetas <body> y </body>. Es recomendable situarlos antes de </body> para que sean fáciles de localizar.
Ir a ejemplo Boton a la izquierda en Cafetería de las Azores
También podemos usar bottom y right:
bottom: Es como top, pero empiezas a contar desde abajo.
right: Es como left, pero empiezas a contar desde la derecha
Ir a ejemplo Botones a la derecha en Cafetería de las Azores
Nota: Como podéis ver en estos ejemplos, el posicionamiento podéis hacerlo contando píxeles (px) o en % para las 4 posiciones posibles.
Por último, vamos a ver como crear un botón Subir. Antes de la etiqueta </style> tenéis que añadir el siguiente código:
/* CSS Botón Ir arriba */
#scrollToTop:link, #scrollToTop:visited { display: none; position: fixed; top: 20px; right: 20px; }
Antes de la etiqueta </head> tenéis que añadir el siguiente código:
<!-- Botón subir -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
Por último, antes de la etiqueta </body> tenéis que añadir el siguiente código:
<!-- Botón ir arriba -->
<a href="#" id="scrollToTop"><img src="URL_IMAGEN" title="Ir arriba" /></a>
Nota: Es muy importante que no olvidéis poner id="scrollToTop" ya que sino el botón no funcionará correctamente ni se situará donde debe.
Si queréis que la imagen cambie al pasar el ratón por encima, podéis usar lo explicado en el primer paso (botón simple).
Y si quieres que en vez de arriba a la derecha, el botón se ubique en otra posición, mira la explicación de botones a la izquierda y derecha.
Un ejemplo combinando el botón ir arriba, con una imagen que cambie al pasar el botón por encima y situado abajo a la izquierda:
/* CSS Botón Ir arriba */
#scrollToTop:link, #scrollToTop:visited { display: none; position: fixed; bottom: 20px; left: 20px;
}
<!-- Botón ir arriba -->
<a href="#" id="scrollToTop"><img src="IMAGEN_1" onmouseover="this.src='IMAGEN_2';" onmouseout="this.src='IMAGEN_1';" title="Ir Arriba" /></a>
