CAMBIAR EL FONDO DEL BLOG FACILMENTE

Son varios los que me preguntaron esto y bueno hoy me decidí a explicaros de una forma muy sencillo como hacerlo.

La forma correcta sería modificar el HTML de la plantilla pero como se que a muchos de vosotros os da panico os mostraré una forma mas sencilla y que no tiene ningún tipo de riesgo.

En primer lugar necesitaremos la imagen la cual querremos poner de fondo, para ello elegiremos la que mas nos guste y la subiremos a un servidor de imagenes, por ejemplo yo utilizo tinyPic .

El siguiente paso será crear un gadget de tipo HTML/Javascript y deberemos de copiar en el siguiente código:

<style type="text/css">body {background-image:url("http:// aqui la url de tu imagen")}</style>

Guardamos los cambios y listo!!!

Antes de que empiecen los problemas... es posible que dependiendo de la plantilla actual que tengáis os muestre el fondo tan solo en unos trozos del blog por lo que porvablemente no sea el resultado esperado... En este caso lo que tendréis que hacer por ejemplo es poner la plantilla minima de blogger ya que esta tiene el fondo transparente y el resultado será seguro el esperado. Tener en cuanta que deberéis adaptar el tamaño de la imagen. si ponéis una imagen pequña se os mostrará como un mosaico.

GIFS DISNEY

Aquí les traigo una recopilación de imagenes .gif para que aquellos amantes de disney, podrán incorporar cualquiera de las imagenes que les mostrare a continuación a su blog. Espero que os gusten.

SLIDESHOW GALERIA DE IMAGENES

Hoy os traigo una de las formas mas sencillas que hay para hacer una galeria de imagenes, tan solo necesitaréis registraros en la web que os indicaré al final del post, subir vuestras imagenes y elegir los efectos que queréis darle a vuestra presentación, es muy muy sencillo, una vez finalizado el proceso os mostrará un código que deberéis pegar en vuestro blog o web y de esta forma obtendréis un resultado como el siguiente.

Enlace: Slideshow

Podéis comentar vuestros resultados para animar a mas lectores a crear sus propias galerias.

IMAGEN COMO LINK

Repondiendo a la consulta de..

PokerLibre dijo...

y como le pongo un enlace a una imagen???

Bueno es cierto que en ocaciones nos interesa que determinada imagen sea un link hacia un lugar determinado, de forma que cuando hacemos click encima de ella nos direccione a un lugar determinado, esto es muy sencillo de hacer y es de la siguiente forma.

<a href="http://DESTINO/" target="_blank"><img border="0" alt="NOMBRE" src="ORIGEN_DELA_IMAGEN" /></a>


DESTINO: Se corresponde con la url de destino, es decir al hacer click en la imagen al lugar a donde se redireccionara.

NOMBRE: Podeis ponerle cualquiera que se os ocurra, en este caso no nos hará falta para nada, preferiblemente algo identificativo.

ORIGEN_DELA_IMAGEN: Será la url donde tengais alojada vuestra imagen.

Un ejemplo para que lo veais mas claramente:



El enlace de la imagen es a la web de la Universidad de Alicante. El código es el siguiente:

<center><a href="http://www.ua.es/" target="_blank"><img border="0" alt="Image and video hosting by TinyPic" src="http://i41.tinypic.com/2gv8tg2.png" /></a></center>

REDIMENSIONAR IMAGENES RSIZR

Haciendo unas cosillas me surgió el 'problemilla' de redimensionar imagenes a un tamaño concreto de pixeles, después de utilizar varias aplicaciones encontré una muy interesante y muy intuitiva, se llama rsizr. Se trata de una aplicación online muy bien hecha y nos permite el tratamiento de imagenes sin necesidad de tener software instalado.

En la pantalla principal nos aparece lo siguiente donde tendremos que hacer click y seleccionar la imagen que queremos redimensionar.

A continuación nos aparecerá nuestra imagen a tamaño real y en el costado derecho y en la parte superior podemos observar las dimensiones en pixeles de esta imagen, modificando estos valores a los que nosotros deseemos obtendremos la imagen deseada.

Espero que os sea de utilidad mi descubrimiento :).

Enlace: rsizr

PIXELRULER REGLA PARA MEDIR PIXELES

Esta utilidad llamada pixelruler es una pequeña aplicación que os permitirá medir cualquier imagen que visualiceis en vuestro monitor. Es muy recomendable ya que si tenéis un blog en alguna ocasión os va a hacer falta. Lo cierto es que es la aplicación mas tonta del planeta, es una simple regla, si una regla como la que usabais en el colegio para medir en vuestros dibujos, con la diferencia que en este caso el resultado serán los píxeles, medida mas empleada para la medida de imagenes.

A continuación os voy a mostrar la apariencia de esta simple y muy efectiva herramienta.

Descarga:Pixelruler.

CONVERTIR IMAGEN EN ICONO

He encontrado una utilidad que ciertamente me ha parecido genial y quería compartirla con vosotros, se trata de un conversor de imágenes, en el cual le indicas la imágen y te genera una serie de iconos de distinto tamaño, los cuales podrás descargar a tu ordenador para utilizarlos en cualquier momento.

Una de las ventajas que tiene es que acepta imagenes de todo tipo de tamaños, yo le he comprobado con imágenes de mas de 8Mb y las carga sin problema, dependiendo del tamaño el proceso de generar el icono tardará mas o menos eso es evidente.
Como sabréis los iconos se utilizan en multitud de lugares, desde el simple escritorio de cualquier sistema operativo hasta las webs o blog. Por tanto podréis generar vuestros iconos y crear enlaces a otros lugares, cada uno que le ponga imaginación.

Esto es un ejemplo de los iconos generados, estas imágenes eran de un tamaño mucho superior, vemos que los resultados son bastante buenos.

El interfaz de la web es muy simple, tan solo tendréis que indicarle la dirección donde se encuentra la imagen y presionar convert.

Enlace: Iconverticons.

Espero que os guste, es muy sencillo de utilizar pero si tenéis cualquier duda no os cortéis y preguntar. Os invito a que dejéis vuestras urls para que todos puedan ver cual es la utilidad que le habéis dado y así que los demás puedan aplicarlo también en su blog, como siempre aquí todos apendemos de todos.

COMO SABER EL TAMAÑO DE UNA IMAGEN

Saber el tamaño de una imagen puede llegar a ser muy útil, en ocasiones necesitamos saber los píxeles que mide determinada de imagen tanto de alto como de ancho.

Cuando diseñamos un blog o una web estos valores nos son de mucha utilidad ya que tendremos que ir reservando espacios y ir ajustando las imágenes con dicho tamaño. No os ha pasado que visitando webs os encontráis con el famoso solo aceptamos imagenes de 200px por 300px y entonces es cuando si no sabemos a lo que se refieren pasamos del tema, pues de aquí en adelante eso de acabó.

La forma mas fácil para saber el tamaño de una imagen es la siguiente:

1. Nos situamos con el cursor encima de la imágen y hacemos click con el botón derecho.

2. Seleccionamos el campo propiedades y nos muesta un cuadro en el cual tenemos en la parte superior 2 pestañas que dice General y Resumen, seleccionaremos Resumen y seguidamente Opciones avanzadas.

A continuación se nos mostraran todas las propiedades de la imágen, entre las cuales encontraremos los valores de ancho y alto.


Fácil ¿no?. Esto es de las típicas cosas que si lo sabes dices...baj que tontería pero claro como todo el mundo no nace sabiendo.. Pues eso de aquí en adelante ya podréis saber cual es el tamaño de todas las imagenes del mundo :)

SEADRAGON MOSTRAR IMAGENES MUY GRANDES

Cotilleando por la red encontré algo muy interesante, se trata de un recurso que permite mostrar imágenes muy grandes de forma completa y muy original. En ocasiones me ha pasado de querer mostrar imágenes que debido a su tamaño he tenido que reducirlas para poder publicarlas, desde hoy esto se acabó, se trata de un recurso de Microsoft Live Labs se trata de SeaDragon , la imágen que voy a mostrar tiene una tamaño de 1024x768.

Podéis utilizarlo también para hacer zoom a vuestras imágenes. La forma de utilizar este recurso es muy fácil, únicamente tendréis que acceder a la web de SeaDragon y introducir la URL de la imágen que queréis mostrar y hacer click en Create, estomáticamente se os generará un script que será el que tendréis que insertar en vuestro blog o web.

Espero que os guste, podéis dejar las direcciones de vuestros blogs o webs para que todos veamos como hacéis uso de este recurso.

TRANSFORMAR FOTOGRAFIA EN POLAROID

¿Os gustaría transformar una fotografía vuestra en tipo polaroid? Lo cierto es que este tipo de fotografías tenían algo especial, el hecho de que se imprimieran justamente después de hacer la foto era quizás lo más interesante que tenían. Atendiendo a la resolución que ofrecían no era algo relevante pero lo mas llamativo es el formato, por eso os traigo una web que permite transformar cualquier imagen que tengáis en vuestro PC a tipo polaroid. Es un recurso bastante interesante y da unos resultados muy buenos. Os pongo un enlace a la web y un pequeño ejemplo.

Enlace: Instantizer

Fotografía original:

Fotografia transformada:Como veis un efecto bastante chulo, en la web se facilita un código para enlazar la imagen, os recomiendo no hacer uso de el, lo más aconsejable es descargaros la imagen transformada a vuestro ordenador, de esta forma no tendréis problemas con el servidor.

Eso es todo espero que os guste, ya me contareis, podéis dejar los links de vuestras fotografías transformadas para que todos podamos disfrutar de ellas ;)

ICONOS EN TITULOS DE POST

Añadir una pequeña imagen en el título de los post puede ser algo bastante interesante, rompe con la monotonía de las letras y puede resultar bastante ilustrativo siempre y cuando la elección de la imagen sea la correcta. Son del tipo de detalles que el lector agradece inconscientemente, por tanto os voy a mostrar varias formas de insertar estas pequeñas imagenes.

Este es un ejemplo:
Os voy a mostrar 2 formas de insertar los iconos, la primera será agregar un icono en un post concreto y la segunda agregar un icono fijo para todos los post.

En el título de un post concreto:

Cuando editamos una entrada, en el caso de blogger tenemos en la parte superior una casilla donde introducimos el título.

Tendremos que añadir lo siguiente:

<img src="URL DEL ICONO" />


Poner un icono al principio del post:

<img src="URL DEL ICONO" />TITULO DEL POST

Si queremos añadirlo al final:

TITULO DEL POST<img src="URL DEL ICONO" />


En medio del título:

TITULO <img src="URL DEL ICONO" /> DEL POST

Lo único que tendréis que modificar es la URL DEL ICONO, podréis encontrar todos los iconos que imagineis aqui eso si la búsqueda la tendréis que hacer en inglés, ya que el buscador es inglés. Como siempre podréis alojar las imagenes aqui para conseguir la url del icono.

En todos los post:

Deberemos de ir la plantilla de nuestro sitio, en el caso de blogger accederemos siguiendo Diseño->Edición de HTML y marcaremos la casilla de expandir artilugios.

Buscaremos el siguiente fragmento de código:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>



Si queremos el icono al principio del título del post, lo sustituiremos por:

<b:if cond='data:post.url'><img src="URL DEL ICONO" />
<a expr:href='data:post.url'><data:post.title/></a>


Si en cambio lo queremos al final, lo sustituiremos por:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/><img src="URL DEL ICONO" /></a>


Nota: Podéis observar al principio de este post de donde conseguir los iconos y obtener su dirección. Suerte y espero ver de aquí en adelante vuestros títulos decorados ;)

MODIFICAR CURSOR

Cambiar el cursor en determinadas partes de un blog o web es algo que puede resultar al mismo tiempo que útil bastante original, lo de útil lo digo ya que permitirá diferenciar de una forma muy clara donde se encuentran links, ya que en ocasiones estos no quedan del todo claros. Normalmente los valores por defecto permiten que cuando el cursor se encuentra encima de un link aparezca la famosa mano. Os voy a mostrar una forma muy simple de modificar este valor tan solo en lugares que vosotros queráis.

Conociendo los links:

La forma que tienen los links es la siguiente:

1.Enlaces de texto:

<a href="DESTINO_DEL_ENLACE">TEXTO</a>


Ejemplo:

Esto es un enlace de texto a wikipedia

2.Enlaces tipo imagen:


<img src="URL_DE_LA_IMAGEN">


Ejemplo:



La estructura de código que tendremos que insertar para modificar los cursores será la siguiente:

Para el primer caso:

<a style="CURSOR: NOMBRE_DEL_CURSOR" href="DESTINO_DEL_ENLACE">TEXTO</a>


Para el segundo caso:

<img style="CURSOR: NOMBRE_DEL_CURSOR" src="URL_DE_LA_IMAGEN">


El valor NOMBRE_DEL_CURSOR lo podéis cambiar por los siguientes que cito aquí abajo, podéis poner el cursor encima del nombre para observar su resultado.

default crosshair hand move nw-resize ne-resize n-resize e-resize help text wait

Espero que os sea de utilidad, ya me contaréis como os fue ;)

EVITAR COPIAR IMAGEN

Proteger las imágenes publicadas en un blog o web puede llegar a ser muy interesante, sobre todo si son imagenes personales, una de las cosas que tenemos que tener clara es que cuando una imagen se publica en internet podríamos decir que es de dominio público, pero aún así podemos crear una pequeña protección que consiste en deshabilitar el botón derecho del mouse, con esto pondremos un poco más difícil a aquellos que quieran copiar de una forma rápida. Podemos destacar que podremos aplicar este recurso tan solo a las imágenes que nosotros queramos ya que en algún lugar vi una forma de hacerlo pero para todo el blog, cosa que no veo muy útil ya que hay cierto material que se debe dejar copiar. Como sabréis para los que están interesados en posicionar su blog o web la copia está penalizada por google, pero para uso personal creo que es necesaria.

Sin enrollarme mas!!

Lo que deberemos hacer es copiar este fragmento de código allí donde queramos insertar la imagen.

<img src="URL de la imagen" oncontextmenu="alert('Opción deshabilitada');return false" oncopy="alert('Opción desabilitada');return false"/>


Deberéis introducir la URL de vuestra imagen y podréis modificar el texto señalado en azul que será el aviso que se muestre cuando se intente copiar la imagen. Podéis observar un ejemplo justamente aquí abajo. Podéis probar a pulsar el botón derecho del mouse y comprobar que no os permite copiar mi imagen de la maravillosa marge.

LOGO PARA CORREO

Os voy a mostrar una forma muy sencilla y atractiva de crear un logo para el correo, esto suele ser una imagen en la que se refleja la dirección de correo del creador del blog o web. De esta forma informaréis de una forma llamativa y original donde localizaros. Yo personalmente lo que hago en estos casos al crear la imagen, la descargo y la subo a un servidor de imágenes o directamente a blogger, algunos sitios desde donde podéis crear estos logos son:

Ejemplo1 creado desde aqui

Ejemplo2 creado desde aqui

Estos 2 son mis correos electrónicos :)

AMPLIAR IMAGEN CON CLICK

Os voy a mostrar una forma de ampliar una imagen haciendo click encima de la misma, la novedad será que la imagen se ampliará en la misma ventana y no en una ventana a parte, puede ser muy útil en galerías de imágenes, donde el usuario con un simple click tenga la posibilidad de ampliar la imagen para poder bservarla de una forma mejor.

Primer paso:(Ubicación del script)

Nos vamos a Diseño->Edición HTML y buscaremos </head> justamente encima copiaremos el siguiente script:

<script type='text/javascript'>
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge)){
nW=iWideSmall;nH=iHighSmall;
}else{
nW=iWideLarge;nH=iHighLarge;
}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>


Segundo paso:(La imagen en cuestión)

Para crear el efecto, tendremos que copiar el siguiente fragmento de código allí donde nosotros queramos, ya sea en una entrada o en un gadget.

<img src="URL_imagen" width="ancho1" height="alto1" onclick="zoomToggle('ancho1px','alto1px','ancho2px','alto2px',this);">


Modificar URL_imagen por la dirección donde se encuentra la imagen a la que le queremos aplicar el efecto.
Donde pone ancho1px y alto1px se corresponde con el tamaño de la imagen una vez realizado el click y ancho2px y alto2px se corresponde con la imágen original, de esta forma conseguiremos el siguiente efecto. Para observar el efecto hacer click encima de la imagen.

VENTANA EMERGENTE ACEPTAR CANCELAR

Contestando a SiMoN RoV, que quería una ventana emergente con las opciones Aceptar y Cancelar, similar a la entrada esta pero dependiendo de la opción elegida hacer una cosa o otra, él en concreto quería que con la opción Aceptar se cargue una nueva pagina y con la opción Cancelar se cierre la ventana y no vaya a ningún sitio.

El código a insertar en el caso de ventana emergente mediante un texto es el siguiente:

<span onmouseover="javascript:if(confirm('MENSAJE DE LA VENTANA')){window.open('URL DESTINO CON ACEPTAR')}">TEXTO</span>


Para observar el resultado situar el cursor encima de la palabra TEXTO; si se pulsa aceptar, se cargará la página de google, si cancelar se cerrará la ventana sin hacer nada.

TEXTO
Para el caso de imagenes, el código será muy similar y será el siguiente:

<span onmouseover="javascript:if(confirm('MENSAJE DE LA VENTANA')){window.open('https://www.google.com')}"><img src="URL DONDE ESTA LA IMAGEN" border="0" /></span>


A diferencia del ejemplo anterior, lo único que cambia es que tendremos que sustituir URL DE LA IMAGEN por la dirección donde se encuentra, el efecto será el siguiente, de la misma forma situar el cursor encima y con Aceptar se cargará la página de google.

PORTADA DE REVISTA

Esta es una de las aplicaciones web que podemos encontrar en la red, consiste en realizar un pequeño montaje de forma muy sencilla, podremos hacer que cualquier foto que tengamos aparezca en la portada de las revistas mas famosas del mundo como Vogue, Cosmopolitan, playboy...

La web desde la que podréis hacer este montaje es esta, una vez creada vuestra portada tan solo tendréis que copiar el código generado al final de la página y insertarlo en vuestro blog. Os lo recomiendo es un recurso que queda bastante original.

AMPLIAR IMAGEN CON CURSOR ENCIMA

Este recurso consiste en ampliar una imagen simplemente poniendo el cursor encima, se ampliará sin necesidad de hacer click en la imagen como normalmente estamos acostumbrados. Este recurso que nos permite hacer CSS viene especialmente bien para imagenes pequeñas o simplemente para llamar la atención de los visitantes, para insertarlo en vustro blog tan solo tendréis que seguir los siquientes pasos.

Primer paso:(Copia del estilo)

Nos tendremos que ir al apartado HTML de nuestro blog y copiar el siguiente código justamente encima de </head>


<style type='text/css'>
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -100px;
border: 1px dashed gray;
visibility: hidden;
color: #FFFF00;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}
</style>


Segundo paso:(Crear imagen)

Llegado este punto ya tendremos el estilo necesario para crear nuestra ampliación, tan tolo tendremos que alojar nuestra imagen en un servidor de imagenes, yo por ejemplo utilizo tinypic, una vez obtenida la dirección de la imagen tendréis que copiar el siguiente código en el lugar que queráis crear el efecto.

<a class="thumbnail" href="#thumb"><img src="URL IMAGEN" width="100px" height="100px" border="0" /><span><img src="URL IMAGEN" /><br />TEXTO (OPCIONAL)</span></a>


Cambiar URL IMAGEN por la dirección de vuestra imagen, fijaros que lo tendréis que incluir dos veces. Como opcional podréis añadir texto donde puse TEXTO (OPCIONAL).

El resultado será lo siquiente:(Poner cursor encima de la imagen)

Texto si se desea poner

CAMBIAR OPACIDAD IMAGEN CON CURSOR ENCIMA

Este es un efecto que podemos obtener gracias a CSS, consiste en mostrar una imágen opaca y que al situar el cursor encima de la imágen esta se muestre de forma normal, podríamos decir que es como si la imágen original se mostrara con una tela encima. Es un efecto que queda bastante bien y que podréis emplear siempre que queráis en vuestras imagenes siguiendo estos simples pasos.

Dirijiros a Diseño->Edicion de HTML en el caso de blogger.
Buscar ]]></b:skin>, justamente encima tendremos que copiar el siguiente código:

a.opacidad img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.opacidad:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }


Llegado este punto ya tendremos insertada la clase que nos permitirá crear el efecto, ahora tan solo tendremos que insertar el siguiente código en el lugar que nosotros deseemos mostrar nuestro efecto.

<a class="opacity" href="URL DE LA IMAGEN"><img src="URL DE LA IMAGEN"></a>


Tendréis que sustituir donde puse URL DE LA IMAGEN por la dirección donde se encuentra la imagen que queréis mostrar.

Ejemplo:(Situar cursor encima de la imagen para ver el efecto).

VENTANA EMERGENTE IMAGEN Y TEXTO

Este efecto consiste en sacar una ventana emergente al pasar el cursor por encima de una imagen o un texto, la forma de crearlo es muy simple y es de la siguiente forma:

Copiar el siguiente código donde queráis crear el efecto.

Para imagenes:


<a href="" onMouseOver="alert('MENSAJE DE EJEMPLO');return true;">
<IMG SRC="URL DE LA IMAGEN" border="0"></a>


Tedréis que obtener la url de la imagen que queráis insertar, para ello podéis hacer uso de un servidor de imagenes, yo utilizo este.

Para texto:

<a href="" onMouseOver="alert('MENSAJE DE EJEMPLO');return true;">TEXTO</a>


Ejemplos:(Poner cursor encima de la imagen y texto).

• Imagen:

• Texto:

Esto es un ejemplo de texto