Gadget Hazte fan Facebook

Éste es un gadget muy útil para promocionar tu página de facebook de tu web, en tu web. La imágen es la siguiente, y por defecto se coloca abajo a la derecha.

<a href="http://www.facebook.com/pages/Todo-Sobre-InternT/257336950988270" style="bottom: 0px; display: scroll; position: fixed; right: 0px;"><img src="http://i50.tinypic.com/20fbvon.png"/></a>

En el código Rojo ponemos la URL de nuestra página (a ella iremos al clicar el botón)
Los números Azules son la posición del gadget flotante en la pantalla. El primero en el eje vertical, el segundo en el horizontal.

El código me lo dio un amigo, pero le he añadido que al pincharlo se abra en página nueva (para que no salgan de nuestra página al clicarlo) y que esté por el medio del lado derecho (como en ésta página)

<a href="http://www.facebook.com/pages/Todo-Sobre-InternT/257336950988270" target="_blank" style="bottom: 500px; display: scroll; position: fixed; right: 0px;"><img src="http://www.axesoelite.com/foro/images/hazte-fan_facebook.png"/></a>

cuadros de texto

Ésto es un cuadro de texto, como puedes ver, es posible cambiar el tamaño del cuadro desde la esquina inferior derecha

Los cuadros de texto son muy útiles para poner códigos o textos largos en un sitio pequeño. Es HTML y se usa la etiqueta textarea  "<textarea> TEXTOO </textarea>" Por ejemplo el cuadro de arriba tiene éste código.

<textarea cols="40" rows="2">Ésto es un cuadro de texto, como puedes ver, es posible cambiar el tamaño del cuadro desde la esquina inferior derecha</textarea>

Te puede ser útil:

http://www.todosobreinternt.com/2011/06/etiquetas-y-atributos-html.html

Traductor para webs banderas animadas

Clic aquí si no sabes añadir gadgets!

Éste es un traductor para webs que tiene una bandera animada para cada idioma al que puedes traducir el sitio donde lo pongas.

Los idiomas disponibles son inglés, francés, alemán, español, italiano, holandés, ruso, portugués, japonés, coreano, arábigo y chino simplificado.

El código es el siguiente:

Gadget Most Popular

Éste gadget le podemos encontrar en la misma web que el gadget Quizás te interese. El proceso de implementación es prácticamente el mismo.
Aparecerán una imágen por cada entrada más visitada (y debajo el título y el número de visitas)
Para implementarlo: http://nrelate.com/install-products/ (y hacemos clic en el segundo (Most Popular))

Gadget Quizás te interese

He añadido hace poco éste gadget al blog porque me pareció muy interesante. Se trata de que debajo de cada entrada se muestran otras entradas relacionadas (por etiquetas y contenido), con una imágen perteneciente a esa entrada (si no tiene se le asignara una al azar). Al pasar el ratón sobre cada una cambian lo que le añade un aspecto más llamativo.

Botón Volver Arriba

En algunas webs y foros podemos encontrar un botón abajo que pone Volver arriba (conocido también por "Ir al cielo", en Taringa), y al pulsarlo nos lleva.
Si quieres poner flechas quizás te interese:
Flechas "arriba-abajo"

Flechas "arriba-abajo" (efecto deslizante)

También podemos redireccionar a una parte en concreto de la página.

Lo más sencillo sería ésto:

Redireccionar a una parte de la web

Muchas veces queremos redireccionar a una parte de una página, es decir, a una altura determinada. Un claro ejemplo es el índice de Wikipedia, en el cual al clicar uno de los apartados nos lleva a él (en éste caso es en la misma página, pero podemos redireccionar a una parte de otra también). Lo podemos usar además para los populares botones "Volver arriba" o "Ir al cielo" (En Taringa).

Es muy sencillo de hacer, necesitaremos la etiqueta html "<a>" y los atributos "name" y "href" (Ver etiquetas y atributos)

El primer código lo insertaremos donde queramos que dirija el link.

Cambiar imagen al pasar ratón

Ejemplos:


Éste código sirve para cambiar una imagen al pasar el cursor por encima. El código es este:

<img src="URL Imagen Estado 1" onmouseover="this.src='URL Imagen Estado 2';" onmouseout="this.src='URL Imagen Estado 3';" />

Gadget flotante

Una de las cosas que más llaman la atención de los visitantes a nuestra web son los gadgets flotantes, para quién no sepa lo que es, son los que al mover el scroll del explorador, quedan fijos en la pantalla y da la sensación de que "flotan" encima de la web. Para poder crearlos usamos un código javascript y lo añadimos en cualquier parte de la web (preferiblemente abajo del todo) o en el código HTML de la web.
En esta web tenemos algunos como el contador de visitantes online de whos amung , el de "deja un comentario" con la imágen de homer y algunos más.
El código es el siguiente:

<a
style="display:scroll;position:fixed;bottom:0px;right:100px;"href="URL
DE DESTINO"><img src="URL IMÁGEN" /></a>

Estoy investigando como poner uno que sea un botón, y al pulsarlo se despliegue un gadget, y que al volver a pulsarlo se recoja de nuevo para que no estorbe.

Un saludo!

Imágen "Añade éste gadget en tu web!"

Ayer en un rato de aburrimiento (para variar) se me ocurrió hacer una imagen que pusiera "Añadir este gadget en tu web" para ponerlo debajo de los gadgets que tengo por el blog, para que si os gusta, no tengáis que andar buscando cómo hacerlo, sino que simplemente cliquéis en ésta imagen y vayáis a la entrada del blog donde lo explico. Voy a enseñaros como hacerlo por si lo queréis para vuestras webs.
Es un HTML sencillo, donde damos una url de destino a una imágen:

Agrandar las imágenes al pasar el ratón

He encontrado éste código que tenía perdido en un documento que llevaba años sin abrir. Sirve para hacer una imágen pequeña y que al pasar el ratón se agrande. Muy útil para imágenes que queramos poner en espacios pequeños (como en las barras laterales). O simplemente por ahorrar espacio. No me acordaba de como funcionaba así que he estado probando para ver como funcionaba.

<img src="URL de la imagen" onmouseover="this.width=N;this.height=N;" onmouseout="this.width=N;this.height=N;" width="N" height="N" />

URL de la imagen -> sustituimos ésto por el link donde hayamos alojado la imagen.
width=N -> ancho de la imagen al agrandarla (al pasar el ratón).
height=N -> alto de la imagen al agrandarla (al pasar el ratón).
width=N -> ancho de la imagen pequeña.
height=N -> alto de la imagen pequeña.

Tendremos que modificar los valores N para acomodarlo a nuestra imágen.

Quedaría algo así:

Botones Twitter Facebook

Hoy se me ha ocurrido hacer unos botones grandes para redireccionar a mi perfil en twitter y facebook, las imágenes que había en Internet eran un poco grandes para ponerlas en la columna lateral, así que las he reducido y he "creado" un código para que las podáis agregar a vuestras webs también. (SI QUIERES DARLES EFECTO BRILLO AL PASAR EL RATÓN VE AL FINAL DE LA ENTRADA)

     

Chat Chatango

Los chats de ésta web son muy útiles, tendremos nuestra red de chateo en nuestra web con múltiples funcionalidades (reproducción de vídeos en el mismo chat, reconocimiento de urls...), a demás de poder integrarlo perfectamente con el diseño de nuestro espacio.
Primero vamos a chatango.com, ahora pulsaremos en Get a private one on one chat (o clicamos directamente desde aquí).
Elegimos las características del chat que queremos y cogemos el código que nos pone después de
"Here is your HTML code:Copy and paste this code into your webpage to have your very own Chatango mini:"

Agregamos un gadget en nuestro blog y lo copiamos (clic Aquí si no sabes como añadir un gadget)

Mensaje al Entrar y al Salir del Blog.

En esta entrada os voy a enseñar dos codigos html, uno sirve para que cuando entremos al blog, nos aparezca un mensaje de bienvenida, y el otro es un mensaje de despedida.
Para el mensaje de bienvenida al abrir el blog, solo tenemos que cambiar la etiqueta <body> del código html

Botón para ponerse de Página de Inicio nuestro blog

El siguiente código es para poner un botón, para que la gente se ponga de página de inicio nuestro blog de una manera mas cómoda:

<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('AQUÍ
PON TU URL');return false;">Pon esta web como tu página de Inicio...</a>

El resultado sería algo así:

Pon esta web como tu página de Inicio...

Este botón solo funciona con Internet Explorer.

Códigos de los colores

Los códigos de los colores RGB (rojo-verde-azul) son muy usados en la creación de páginas web, es decir, en el lenguaje HTML. Éstos están compuestos por una almohadilla y 3 pares de dígitos (en hexadecimal), representando las dos primeros al rojo, los dos siguientes al verde, y los dos últimos al azul.

#RRGGBB

Cambiar puntero y hand

A petición de Heavymiguel os voy a contar cómo cambiar el puntero y la hand en blogger.
Puntero: Flechita que se ve normalmente
Hand: Mano que sale al poner el cursor sobre un link o imágen.
Los cursores .gif (en movimiento) no funcionan en todos los navegadores, cuando no lo hagan, se mostrarán quietos.

Vamos a Plantilla > Edición HTML, buscamos (clic si no sabes buscar) </body> y justo antes pegamos esto:

Cámara de vigilancia

Click para ampliar

Simpático Gadget en forma de cámara de vigilancia que se mueve de un lado a otro, podemos equiparla un link para que al clicarla, nos dirija allí (por lo demás no sirve para mucho, simplemente, de adorno). Clic Aquí si no sabes añadir un gadget.

Cuadros para códigos

¿Quieres poner en tu web algo como ésto?

Para ello, tendrás que ir a "Blogger > Plantilla > Edición HTML". Una vez ahí tendremos que agregar el siguiente código después de  ]]></b:skin>  (ver cómo buscar palabras)

pre { 

         background:transparent url(http://img509.imageshack.us/img509/3046/codema7.png) no-repeat 0 0; /* Imagen que está encima del código, si quieres cambiarla modifica lo que se encuentra dentro de () */ 

         padding-top:24px; /* Relleno - para ajustar Fondo */ 

 } 

 

Flechas "arriba-abajo" (efecto deslizante)

En esta entrada voy a explicar como poner flechas de ir arriba y abajo en tu blog, la manera simple esta en esta entrada. Vamos a tener que buscar algunas palabras o frases en el código, para ello pulsaremos Ctrl+F, nos saldrá un buscador y ahí podremos buscarlas.

Entra en Plantilla > Edición HTML