sábado, 31 de julio de 2010

Cambiar posición de un gadget

Primero que nada veremos que gadget queremos mover:


Apuntamos la id. (ejemplo: HTML1)

Ahora ver en que posición del blog queremos mostrar nuestro gadget.

Ir a Diseño, Edición de HTML y justo arriba de ]]></b:skin>

Poner el código:

#HTML1{position:fixed;  top: 200px;  left:500px;  width:250px}

Acá voy a poner el gadget en una posición fija, a 200px desde arriba, 500px desde la izquierda.

Si es necesario agregarle un ancho fijo (width: ---px;)

Ejemplos:

Cambiar Gadget Imagen | Restablecer Gadget Imagen

Cambiar Gadget Reproductor | Restablecer Gadget Reproductor

Cambiar Label | Restablecer Label

Verán que no afectan las funciones.

Prueben abriendo y cerrando el label desde el titulo o escuchar Dejotas Radio.

Utilice su propia foto para el fondo de su blog

Articulo copiado de Blogger-in-draft

Por Lee Wongoo , Software Engineer

Después pusimos en marcha el Diseñador de plantilla de Blogger, Una de las características más demandadas es la capacidad de cargar su propia imagen de fondo . A pesar de que proporcionan cientos de fotos de archivo profesionales de iStockphoto, Sabemos que muchos de ustedes son aficionados a graves foto y desea utilizar su propia hermosa foto como imagen de fondo de su blog.

Y ahora usted puede! Ir a la | Diseño de plantillas de diseño de fondo |, Haga clic en Imagen de fondo, y verás que hay un nuevo " Subir imagen " opción, que le permitirá seleccionar y cargar la imagen.



Para las imágenes que llenan todo el fondo , se recomienda utilizar una resolución de 1800 píxeles de ancho y 1600 píxeles de alto , y el archivo de tamaño inferior a 200KB para reducir al mínimo el tiempo de carga de sus páginas blog. Apoyamos JPEG , GIF y PNG imágenes en formato .

Después de subir una foto, podrás ver las opciones adicionales que no están disponibles para el incorporado en imágenes: Alineación, Repetir, Y Desplácese opciones.


  • Alineación: Usted puede ajustar horizontal ( izquierda, centro , derecha) y vertical (arriba y abajo ) la alineación de su imagen de fondo.
  • Repetir ( Azulejos ) : Si usted tiene una pequeña imagen , puede hacer que se repita en horizontal y / o verticalmente para llenar la página. De lo contrario, le recomendamos que elija un color de fondo de la página que combina con su imagen de fondo .
  • Desplácese: Por defecto, sus estancias de la imagen en su lugar mientras los lectores de desplazarse por la página de contenidos . Al seleccionar el Rollo "con página " , tanto la imagen de fondo y contenido de la página desplazarse juntos. Le recomendamos que utilice una imagen que se funde con el color de fondo o un conjunto de baldosas que tu imagen verticalmente si se elige esta opción.

Esta característica está disponible en Blogger en borrador ahora mismo, así que por favor siga adelante y échale un vistazo! Como siempre , gracias por usar Blogger en borrador. Nos dará la bienvenida a sus comentarios, y si usted tiene alguna pregunta, por favor, envíe nuestro camino a través de la foro de ayuda de Blogger.

Sorteo en Xakata Blog


Xakata Blog de Noticias Curiosas me informaba hace unos días sobre el sorteo que con motivo de su tercer aniversario va a realizar.
Forma de participar.

Escribir un post sobre el sorteo en vuestro blog.
En el post se deben añadir dos enlaces uno para el texto noticias curiosas y otro a www.xakata.net
Finalmente, hay que dejar un comentario en la entrada que habla sobre el concurso con enlace al post, que será vuestro justificante de participación. Si no se deja el comentario no tendrá efecto la participación.

Los premios:

1er premio: Banner 480x60 px situado en la cabecera de xakata.net.
2º premio: Banner 480x60 px situado bajo el primer post.
3er premio: Favicon 16x16 px situado en la sobre el titulo del primer post. (sin zoom)
(NO se aceptan animaciones y otros efectos.)
Además solo por participar se consigue un espacio para nuestro favicon en www.adxense.com durante 12 meses.

Las reglas del concurso:

La elección del ganador es totalmente aleatoria.
Cada participación se corresponderá con el nombre del blog.
El ganador se elegirá por coincidencia de su nombre de participación utilizando el sistema de sorteos online de Sortea2.
En ningún caso el premio podrá ser canjeable por dinero en efectivo u otros bienes.
El 29 de agosto de 2010 a las 21:00 hora española se cierra el sorteo y se publicará la lista de participantes para, posteriormente celebrar el sorteo a las 23:30.
El resultado del sorteo será publicado en xakata.net y se facilitará un enlace hacia la página del sorteo en sortea2.

¡¡ Felicidades por el aniversario y suerte a los participantes !!

viernes, 30 de julio de 2010

Más iconos a redes sociales



Insertar una ímagen de loading a grandes imágenes


nombre

Ir a Diseño, Edición de HTML y justo arriba de ]]></b:skin>

Poner el siguiente código:

.load {background: url('URL de imagen - loading.gif') no-repeat center;}

En la imagen le agregaremos la clase load, de la siguiente forma:

<img src="URL de la imagen" alt="nombre" title="nombre" class="load"/>

Código generado por Blogger:

<div class="separator" style="clear: both; text-align: center;">
<a href="URL de la imagen" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL de la imagen" class="load"/></a></div>

Imágenes gif de loading

Beach Clip Art » brushes para Photoshop

Beach Clip Art es un set de 28 brushes para Photoshop que podremos descargar desde Photoshop Free Brushes. Inlcuye brushes playeros como sandalias, sombrillas, palmeras, tablas de surf, entre otros.


Descargar

jueves, 29 de julio de 2010

Google Reader: versión móvil de tu blog y más

Hace unos días JMiur nos mostraba un forma de ver nuestro blog desde un móvil con Onbile.

Me acorde una forma que yo veía algunas páginas cuando tenia una Palm.

Google Reader tiene un servicio que comprime todo el contenido de una forma muy sencilla para que lo podamos visualizar desde nuestro Móvil.

Es muy simple, no implica instalar ningún código, solo poner un link.

Si quieres ofrecer la versión móvil a tus lectores solo tendrías que poner un enlace, o imagen con enlace.

Agrega la dirección de los feeds RSS de tu sitio al final de la siguiente URL:

http://www.google.com/reader/m/view/feed/

Ejemplo:

http://www.google.com/reader/m/view/feed/http://feeds.feedburner.com/blogspot/qygH


Google reader también guarda un historiar de tu feed que puede ser útil para recuperar datos perdidos:

Ejemplo:

http://www.google.com/reader/atom/feed/http://feeds.feedburner.com/blogspot/qygH?r=n&n=999

Cambiar URL de tu feed y numero que quieras ver.

Ver Versión móvil

Código:

<a href="http://www.google.com/reader/m/view/feed/http://feeds.feedburner.com/blogspot/qygH">Versión móvil</a>

Imágenes como marca de agua

Los fotógrafos tiene una lucha constante con la forma de proteger sus fotografías, porque una vez colgadas en internet dejan de ser privadas para ser públicas a no ser que tengan el acceso restringido y las usen para su disfrute personal, aún así sigo pensando que una vez subimos una imagen a internet perdemos el control total sobre ella y debemos asumir las consecuencias.

Hay algunas formas de hacer que no se lleven las fotografías, una de ellas es inhabilitando el botón derecho del ratón, pero no es más que una estrategia para hacer perder el tiempo a la persona que desea llevarse la fotografía porque casi todos sabemos que desde el código fuente del blog podemos acceder a la url de la imagen.

Watermark es uno de esos sitios online al igual que Signgenerator, Picmarkr, Watermarktool o PicGhost con la diferencia que además de añadir texto también podemos añadir como marca de agua una imagen.
La imagen que normalmente descargamos a nuestro PC la obtenemos en un archivo zip, debemos descargarlo y extraer la imagen para hacer uso de ella.


miércoles, 28 de julio de 2010

Tooltips con CSS

Los tooltips son descripciones emergentes que ayudan a dar un mejor entendimiento sobre el contenido que se lee. Algo muy parecido en HTML es el atributo title que hace lo mismo, muestra una descripción de un enlace, una palabra o una imagen, por ejemplo este texto.

Los tooltips son y hacen lo mismo que el atributo title pero a diferencia de éstos últimos se pueden personalizar la forma, el color de fondo, el texto, etc.
Hay muchas maneras de ponerlos, y por la red abundan muchos scripts que incluso pueden darle algún efecto adicional.
En este primer caso vamos a ver cómo crear tooltips usando sólo CSS sin nada de Javascript para no hacer la página más lenta y pesada.
Puedes ver el resultado pasando el cursor aquíEste es un tooltip hecho sólo con CSS. El mensaje se mostrará sólo al pasar el cursor y desaparecerá al quitar el cursor de encima..

El método es muy simple, fácil de hacer y personalizable, sólo entra en Diseño | Edición de HTML y antes de ]]></b:skin> pegas lo siguiente:
a.tooltip { /* Estilos del texto que tiene el tooltip */
position: relative;
z-index: 24;
cursor: help;
text-decoration: underline;
}
a.tooltip:hover {z-index: 25; text-decoration: none;}
a.tooltip span {display: none}
a.tooltip:hover span { /* Estilos de la descripción */
display: block;
position: absolute;
top: 2em; left: 2em;
width: 16em;
border: 1px solid #0cf;
background: #ECE0F8;
color: #000;
text-align: center;
}

Y ahora siempre que quieras usar un tooltip usa este código dentro de tus entradas:
<a class="tooltip">Pasa el cursor aquí<span>Este es el mensaje que se mostrará al pasar el cursor.</span></a>

En el código sólo hay tres cosas a tomar en cuenta, lo que está en negrita siempre se debe poner para que aparezcan los estilos del tooltip; lo que está en azul es el texto al que se le pasará el cursor encima; y lo que está en color rojo es la descripción.

martes, 27 de julio de 2010

Aclarando mis ideas sobre las nuevas plantillas

Desde la salida del diseñador de plantillas muchos optaron por la facilidad que proporciona diseñar la plantilla en unos sencillos pasos, no voy a entrar en detalles sobre si es mejor o peor, más o menos recomendable que personalizar la plantilla uno mismo porque lo que para unos es mejor para otros puede terminar en una odisea.
Naturalmente tengo mi opinión y es que las plantillas creadas con el diseñador no sólo cambian el diseño exterior sino también el interior es decir, que la plantilla es completamente distinta a lo que estamos acostumbrados a ver y los códigos que veremos serán como poco muy extraños.
No hay garantías de poder aplicar los tutoriales o explicaciones que normalmente encontramos para Blogger, si tenemos tiempo de sobra y no sabemos que hacer entonces no hay problema utilicemos el diseñador y a divertirse pero si pensamos que la plantilla es algo que en un futuro vamos a modificar hay que pensarlo dos veces.

¿Por qué digo todo esto? porque llegan preguntas y dudas, muchas dudas sobre la forma de hacer esto o aquello una vez tenemos instalada una de las nuevas plantillas y en la mayoría de casos no tengo respuesta porque para tenerla es necesario dedicar horas a cada caso en concreto y como decía anteriormente sin garantías de encontrar la solución.

Las nuevas plantillas me recuerdan un poco a las plantillas adaptadas de otras plataformas en general son bellas, originales y complicadas de entender porque en la adaptación no se ha tomado la precaución de sustituir los códigos por los originales de Blogger ni de limpiar el código inutilizable.
Me recuerdan también cuando compramos un electrodoméstico, hay que entender el manejo, configurarlo, ponerlo en marcha y siempre pensamos que algo más sencillo nos haría el mismo papel, dos botones uno para encender y otro para apagar y menos historias que nos compliquen la vida.
Las nuevas plantilla son eso, uno simple clikc y un nuevo diseño en menos que canta un gallo, pero es que resulta que antes de darnos cuenta ese electrodoméstico complicado lo usamos todos los días y terminamos configurandolo con los ojos cerrados. Y con el tiempo nos alegramos de tener un aparato con diversas funciones que lo manejamos y configuramos a nuestro antojo, esas son las plantillas originales de Blogger las que se prestan a casi todo y se dejan manejar.

Las plantillas que Blogger proporcionaba antes de aparecer el diseñador y las nuevas plantillas siguen estando a disposición de todos para descargarlas y lógicamente usarlas, las encontraremos si en plantilla de Edición de HTML nos situamos al final del todo donde dice:


Aunque la imagen está cortada justo después de Plantillas antiguas dice:
"Puedes utilizar todavía las plantillas antiguas para tu blog, pero no podrás acceder a muchas de las funciones nuevas como, por ejemplo, el Diseñador de plantillas"

A pesar de lo que dice ahí he probado varias veces a instalar plantillas "antiguas" y en todas aparece la opción de diseñador de plantillas, otras mejoras como el nuevo editor de entradas tiene las mismas funciones y que yo recuerde no hay muchas más.

Como siempre a la pregunta de ¿Qué hago me la instalo de las nuevas? la respuesta es siempre la misma instala la que mejor se ajuste a tus necesidades pero ten en cuenta todo lo anterior y si piensas modificar la plantilla entonces intenta instalarla en un blog de pruebas y juega con ella porque te vas a entretener.
Si pasado un tiempo prudencial te haces con el manejo, la personalizas y consigues que todos los trucos que deseas añadir funcionen entonces ¡Enhorabuena! esperamos tus aportes con ilusión y con ellos se habrá dado un gran paso que seguramente pasará a la historia.

VkuMenuBar: Menú fijo abajo con entrada deslizante By: Vku

Es un proyecto que hace un tiempo empecé y quiero compartir con ustedes, espero que les guste.



Es totalmente personalizable mediante CSS.

Al abrir el blog o página el menu va entrando desde abajo con efecto deslizante.

Ver Imágenes.

Se le puede poner imágenes o texto.

Imágenes junto con texto.

La altura se adapta al tamaño de la imagen.

Se puede elegir el tamaño y colores.

También se puede mostrar en el centro.

Queda siempre fijo en la parte de abajo del blog o página, con un ancho del 100%, adapatandose a la resolución del monitor del visitante.

Se puede cambiar el ancho por un valor fijo, junto con su posición.

A la derecha tiene un botón de cierre del menú.

Al cerrar el menú queda una imagen fija para poder abrirlo nuevamente.


Las imágenes de los botones se pueden cambiar por otras, a su gusto.

Dentro del menú puede ir imágenes junto con texto, solo imágenes o solo texto.

Se le puede colocar distintos tipos de botones sociales.

El tamaño y la ubicación se apaptan mediante códigos CSS individuales.

La altura se adapta a la imagen o se pueden ponerla con una altura fija.

Como vieron en las imágenes de arriba se puede cambiar el color del fondo y del texto.

¿Cómo poner el menú?

El código va dentro del cuerpo del documento entre las etiquetas <body> y </body>


Yo lo puse debajo de <body>

En Blogger también se puede poner en un gadget HTML/Javascript.

Código:
<div id="vkumenubardos" style="padding:4px;position:fixed;z-index:990;right:0;bottom:0;display:none;">
<!-- Acá va el botón para abrir el menú -->
<a href="javascript:abVkuMenuBar()"><img src="http://img44.xooimage.com/files/c/d/a/top-1eb247f.png" style="border: 0; margin-right: 5px; width:24px; height:24px;" /></a>
</div>
<!-- Personalizar menú, color del fondo y borde -->
<div id="vkumenubar" style="padding:0;position:fixed;z-index:999;left:0px;bottom:-100px;width:100%;background-color:#555;border-top: 4px double #ccc;">
<!-- Acá va el botón para cerrar el menú -->
<a href="javascript:closeVkuMenuBar()"><img src="http://img10.xooimage.com/files/0/d/2/1279873511_close_box_red-1e94d34.png" style=" float: right; border: 0;margin-right: 10px;" /></a>

<!-- Acá van las imágenes con sus link -->
<a class='linkvkumenubar' href='http://twitter.com/v_ku' target='_blank'><img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img41.xooimage.com/files/7/9/5/logo_twitter-1eb2409.gif" title='Twitter'/></a>

<a class='linkvkumenubar' href='http://www.facebook.com/loseasi' target='_blank'><img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img49.xooimage.com/files/0/f/f/logo_facebook-1eb23fb.gif" title='Facebook'/></a>

<a class='linkvkumenubar' href='http://www.youtube.com/user/thevku' target='_blank'><img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img41.xooimage.com/files/b/6/1/logo_youtube-1eb240c.gif" title='You Tube'/></a>

<a class='linkvkumenubar' href='http://www.myspace.com' target='_blank'><img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img45.xooimage.com/files/2/b/3/logo_myspace-1eb2423.gif" title='MySpace'/></a>

<a class='linkvkumenubar' href='http://feeds.feedburner.com/blogspot/qygH' target='_blank'><img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img43.xooimage.com/files/3/f/5/rss-1eb2412.jpeg" title='Rss'/></a>

<a style="text-decoration: none; bottom:17px; margin:0 10px;position:relative;color:fff" href='http://loseasi.blogspot.com' target='_blank'>¿Cómo se hace...?</a>
<!-- Fin imágenes con sus link -->
</div>
<script src='http://sites.google.com/site/vkuloseasi/archivos/vkumenubar.js' type='text/javascript'></script>
Lo de Rojo es el contenido que se ve en el menú, ahí muestro el ejemplo con imágenes y texto.

Personalizar cambiando las imágenes, link, etc., o poner sus propios botones.

Si quieren pueden descargar el archivo JS y subirlo a otro servidor, sin modificar los datos.

O sustituir:
<script src='http://sites.google.com/site/vkuloseasi/archivos/vkumenubar.js' type='text/javascript'></script>
Y poner en su lugar el script dentro del archivo.

Del siguiente modo:
<script type="text/javascript">

        // aquí va el contenido del script ...

</script>

Si tienen dudas pueden dejar un comentario.

lunes, 26 de julio de 2010

Mostrar imagen con botón de cerrar y cierre automático

Es el mismo código que la parte 1, lo que esta ves se le va a agregar un tiempo para que se cierre solo.

Ver parte 1:

Ir a Diseño, Edición de HTML y justo arriba de </head>

Poner el siguiente código:
<script type='text/javascript'>
function cerrarelemento(){
div = document.getElementById(&quot;cerrarelemento&quot;);

div.style.display=&quot;none&quot;;
}
setTimeout(cerrarelemento, 90000);
</script>

Cambiar milisegundos 90000 (90 segundos)

1 segundo es igual a 1000 milisegundos.

El contenido a mostrar lo colocaremos abajo de <body>

<div id='cerrarelemento' style='border: 0 !important; background: transparent; left:15px;top:10px;position:fixed;width: 190px;z-index:9999'>
<a href='javascript:cerrarelemento();'>
<img src='URL DE LA IMAGEN CERRAR' style='float: right;border: 0' title='Cerrar'/>
<img src='URL DE LA IMAGEN' style='border: 0'/>
</a>
</div>

Guardamos los cambios.

Códigos CSS para personalizar:

left:15px: distancia desde la izquierda.
top:10px: distancia desde arriba.
position:fixed: se muestra el contenido del div siempre fijo con la posición establecida por left y top.
width: 190px: distancia desde la izquierda para mostrar la imagen de cerrar.
float: right: muestra la imagen de cerrar del lado derecho.

Por otros detalles sobre el código ver: Parte 1.

Botones de cerrar:

Si ya están utilizando el código de la parte 1, solo agregar esta línea arriba de </script>:
setTimeout(cerrarelemento, 90000);

Convertir fuentes con Free Font Converter


Free Font Converter es una herramienta que nos permite convertir la extensión de una fuente en otro.

Usarla es bastante sencillo: subimos nuestra fuente, escogemos la extensión a la que la queremos convertir. Damoc clik en Convert y se abrirá una ventana desde donde descargaremos nuestra fuente convertida.

Free Font Converter

Las siete maravillas del mundo

Clic sobre la imagen para avanzar.

sábado, 24 de julio de 2010

Breadcrumbs en Blogger

Los breadcrumbs o migajas de pan, son una especie de guía que nos indican a lo largo de la navegación dentro de un sitio Web en dónde nos encontramos, funciona como una brújula que nos muestra el camino por el que hemos andado, por ejemplo, si yo lo tuviera puesto arriba de la entrada diría:
Estás en : Inicio » Trucos » Breadcrumbs en Blogger

Para ponerlo en tu blog sólo basta añadir unos códigos, primero entra en Diseño | Edición de HTML y marca la casilla Expandir plantillas de artilugios. Ahora busca este código y agrega lo que está en color rojo justo donde se indica:
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

Luego un poco más arriba busca esta línea:
<b:includable id='main' var='top'>

Y arriba de ella agrega lo siguiente:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Estás en: <a expr:href='data:blog.homepageUrl' rel='tag'>Inicio</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Archivos de <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Todas las entradas
<b:else/>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Entradas etiquetadas bajo <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Por último si quieres darle un poco de estilos como color de fondo, borde, etc, agrega antes de ]]></b:skin> esto:
.breadcrumbs {
border-top: 2px ridge #2E2E2E; /* borde superior */
border-bottom: 2px ridge #2E2E2E; /* borde inferior */
background: #D8D8D8; /* color de fondo */
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
}

Ahí puedes agregarle más estilos si lo deseas, el resultado será este:

breadcrumbs
Si tu entrada tuviera más de una etiqueta mostrará sólo la última etiqueta que aparezca según el orden alfabético.

viernes, 23 de julio de 2010

Mostrar imagen o mensaje con botón de cerrar parte 2

Esta ves el código va a ser con un link, el cual al hacer click, o pasar por el, se va a abrir la imagen, mensaje o lo que pongan dentro del elemento div.

Paso 1:

Ir a Diseño, Edición de HTML y justo arriba de </head>

Poner el siguiente código:
<script type='text/javascript'>
//<![CDATA[
function mostrarelementodiv() {
div = document.getElementById('elementodiv');
div.style.display = '';
}
function cerrarelementodiv() {
div = document.getElementById('elementodiv');
div.style.display='none';
}
//]]>
</script>

Donde elementodiv es el nombre del div, el cual tendra el contenido que mostraremos.

Paso 2:

Crear un div con el nombre elementodiv y ponerlo abajo de de <body>.

Ejemplo con una imagen:
<div id="elementodiv" style="border:0;background: transparent; left:15px;top:10px;position:fixed;width: 190px;z-index:9999;display:none;">
<a href='javascript:cerrarelementodiv();return false;'><img border='0' src='URL de la imagen cerrar' style='float: right;' title='Cerrar'/>
<img src="URL de la imagen a mostrar"/></a>
</div>

Guardar la plantilla.


Paso 3:

Crear el link para abrir el elemento div. (puede ser un texto o imagen)

Ejemplo con una imagen:
<a href="#" onclick="mostrarelementodiv();return false;"><img src="URL de la imagen" style="border: 0;"/></a>

Resultado clic en la imagen:

Resultado clic en texto: Abrir ejemplo

Resultado pasando el cursor:

Códigos CSS para personalizar:


left:15px: distancia desde la izquierda.
top:10px: distancia desde arriba.
position:fixed: se muestra el contenido del div siempre fijo con la posición establecida por left y top.
width: 190px: distancia desde la izquierda para mostrar la imagen de cerrar.
float: right: muestra la imagen de cerrar del lado derecho.
onclick cambiar por onmouseover para abrir pasando el cursor.

Por otros detalles sobre el código ver: Parte 1.

Botones de cerrar:

Pueden ver de la forma que utilizo este ejemplo en el menú superior pasando el cursor por la lamparita.

Agregar el botón de Mi Yahoo!

Mi Yahoo
Mi Yahoo! funciona igual que la página de iGoogle, sirve para tener tu página de Yahoo personalizada en la cual puedes tener acceso al buscador, correo y otros gadgets de tu interés de modo que puedas personalizar lo que quieres tener en tu Mi Yahoo.

Uno de los gadgets que más utilizan los usuarios son los de feed y nosotros podemos sacar ventaja de ello ofreciendo en nuestro blog un botón que instale las últimas entradas del blog en el Mi Yahoo del lector para que pueda enterarse de las actualizaciones del blog.

Para colocarlo sólo entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:
<span>Agrega este blog en Mi Yahoo!</span>
<a href="http://add.my.yahoo.com/rss?url=http://nombre-de-mi-blog.blogspot.com/feeds/posts/default"><img src="http://l.yimg.com/a/i/e1/my/addtomyyahoo4.gif" border="0" /></a>

Cambia donde se indica la dirección de tu blog y listo.


Agrega este blog en Mi Yahoo!

Not in vein, experimento de dhteumeuleu



Los experimentos de dhteumeuleu son espectaculares, pero como bien dijo JMiur en su día no hay explicación, están creados con la idea de pasar el rato y divertirse, simplemente porque sí, por  la satisfacción de conseguir que funcione.

Cómo aumentar el número de suscriptores

rss feed icon
Ganar suscriptores es tan importante como ganar visitas; un número elevado de usuarios en Internet prefieren estar suscritos a los blogs de su preferencia en lugar de estar visitando ocasionalmente el blog para ver si ya hay contenido nuevo, esta es una realidad a la que todos debemos estar preparados para ofrecerles a los lectores las mejores posibilidades de estar al tanto de los que escribimos en el blog.

Estas son algunas recomendaciones para aumentar el número de suscriptores:

Escribe contenido original.
En la actualidad hay millones y millones de sitios Web que ofrecen toda la información que puede haber y un gran porcentaje de esa información es contenido duplicado, es decir, copia de una copia. Entonces ¿por qué habría alguien de suscribirse a tu blog? sólo lo harán si tu información es nueva y original, con tu propio estilo, de tal modo que quieran leerlo siempre de ti.

Pon un enlace visible a tu feed.
Muchos se quejan porque no tienen suscriptores pero ni siquiera se han tomado la molestia de poner un enlace para suscribirse al feed, de ese modo nunca tendrán suscriptores. Este es uno de los métodos más efectivos para conseguir lectores, coloca en la parte superior de tu blog un enlace de suscripción que sea bastante visible y fácil de reconocer. Verás que en poco tiempo aumentará tu número de suscriptores.
Para poner el enlace de de suscripción al feed con una imagen sólo pega en un elemento HTML/Javascript este código:
<a href="http://nombre-de-mi-blog.blogspot.com/feeds/posts/default"><img src="URL del icono" border="0" /></a>

Ofrece distintas formas de suscribirse.
No todos usan la misma forma de leer los feeds así que puedes ofrecer varios métodos para suscribirse como la Suscripción por Email de Feedburner, la suscripción por iGoogle o algún otro que conozcas. Todas las opciones que ofrezcas deben estar arriba del blog (puede ser el primer o segundo gadget de la sidebar) de forma visible.

Agrega un botón debajo de las entradas.
Del mismo modo que has puesto un enlace de suscripción en la mejor parte visible del blog también puedes poner uno un poco más discreto debajo de las entradas, si el lector recién acaba de leer una entrada que le gustó mucho y ve en seguida el botón del feed querrá suscribirse inmediatamente.

Ofrece la suscripción por categorías.
La suscripción por categorías queda perfecta para blogs que tocan muchos temas diferentes, un lector quizá no quiera suscribirse a tu blog para no recibir temas que no le importan pero si tienes la suscripción por categorías seguro lo hará al menos en la categoría que esté interesado.

Promueve el contenido de tu blog.
Aprovecha las redes sociales para promover tu blog, ya sea en Twitter o Facebook. Además de eso deja de vez en cuando un mensaje en tu estado diciendo cuál es la dirección de tu feed sin que se convierta en SPAM.

Obsequia un plus a tus suscriptores.
En Oloblogger nos enseñan dos excelentes formas de ofrecer contenido exclusivo para los suscriptores, de modo que sólo quienes estén suscritos podrán ver el contenido de obsequio; esta es una excelente forma de recompensarlos como agradecimiento.

Se constante con tus publicaciones.
Cuando alguien se suscribe a un blog es como si se suscribiera para recibir la revista que tanto le gusta y sabe que cada determinado tiempo leerá algo nuevo en ella. Lo mismo sucede con tu blog, tus lectores esperan que seas constante, no se suscribirán para no recibir nada en muchos días, es por eso que trata de ser constante, de escribir a cierto ritmo para que tus lectores se acostumbren a que cada determinado tiempo podrán leer las actualizaciones que tanto esperan.

Sé cauteloso con el botón de número de suscriptores.
Feedburner tiene un gadget para mostrar el número de suscriptores que tiene un blog pero esta es un arma de doble filo. No lo pongas si tu número de suscriptores es bajo de lo contrario dará la impresión que nadie quiere suscribirse a tu blog y será poco alentador para los demás. Pero si tienes un gran número muéstralo orgulloso, eso te dará buena reputación y los lectores tendrán confianza al suscribirse.

Explica qué es RSS feed.
Muchos no se suscriben porque simplemente no saben qué el feed y para qué sirve. Escribe una entrada o una página explicando qué es y qué ventajas tienen si se suscriben, esto además de ser informativo será un buen método para promocionar tu feed. Aquí hay información que puedes leer para tener los detalles de qué es un feed.


Con estas recomendaciones tendrás más posibilidades de conseguir suscriptores en poco tiempo aunque por supuesto siempre hay que tomar el primer punto que es que tu blog sea único.

Si deseas conocer más trucos sobre el tema visita la sección Feed de Ciudad Blogger.

jueves, 22 de julio de 2010

Mostrar imagen o mensaje con botón de cerrar


Con esta opción podemos mostrar una imagen, un mensaje de texto o lo que quieran dentro de un elemento div.

Leer esta entrada: Elementos span y div

Paso 1:

Ir a Diseño, Edición de HTML y justo arriba de </head>

Poner el siguiente código:
<script type='text/javascript'>
function cerrarelemento(){
div = document.getElementById(&quot;cerrarelemento&quot;);

div.style.display=&quot;none&quot;;

}
</script>

Paso 2:

Creación del contenido que mostraremos:

1:) Ahora tenemos que crear el div con sus propiedades y con el id "cerrarelemento".

Ejemplo como se ve en la imagen:
<div id='cerrarelemento' style='border: 0 !important; background: transparent; left:15px;top:40px;position:fixed;width: 190px;z-index:9999'>

<!-- Acá va el contenido a mostrar -->

</div>

Cambiar a gusto, en este ejemplo se mostrará en position fija, arriba sobre la izquierda.

El ancho ( widht: 190px ) es igual al ancho de la imagen.

Dentro de este código va a ir los otros códigos: 2, 3 y 4.

2:) El link que llamará a la función de cerrar.
<a href='javascript:cerrarelemento();'>

<!-- Acá va lo que vamos a mostrar y cerraremos al hacer clic -->

</a>

Dentro de este código va a ir los otros códigos: 3 y 4.

3:) Creación del botón para cerrar.

Yo elegí una imagen, pero también puede ser un texto.

Ejemplo:
<img src='URL DE LA IMAGEN CERRAR' style='float: right;border: 0' title='Cerrar'/>

En el ejemplo se muestra la imagen de cerrar del lado derecho, si prefieren pueden cambiarla hacia la izquierda solamente cambiando float: right, por float: left.

4:) Contenido a mostrar que se cerrara con el botón.
<img src='URL DE LA IMAGEN' style='border: 0'/>

Yo puse una imagen con un ancho de 190px. (el ancho de la imagen es igual que el ancho del div [código 1] )

Paso 3:

Juntamos todos los códigos del Paso 2, desde el 1 al 4.

Lo colocaremos abajo de <body>

Queda así:
<div id='cerrarelemento' style='border: 0 !important; background: transparent; left:15px;top:40px;position:fixed;width: 190px;z-index:9999'>
<a href='javascript:cerrarelemento();'>
<img src='URL DE LA IMAGEN CERRAR' style='float: right;border: 0' title='Cerrar'/>
<img src='URL DE LA IMAGEN' style='border: 0'/>
</a>
</div>

Guardamos los cambios.

Códigos CSS para personalizar:

left:15px: distancia desde la izquierda.
top:40px: distancia desde arriba.
position:fixed: se muestra el contenido del div siempre fijo con la posición establecida por left y top.
width: 190px: distancia desde la izquierda para mostrar la imagen de cerrar.
float: right: muestra la imagen de cerrar del lado derecho.

El Paso 2 es para que se entienda el código.

Colocar lo del Paso 1 y 3 personalizando los estilos CSS.

Zoom - Info

En xyberneticos nos muestran un bonito efecto que nos permite añadir una imagen con texto oculto que se muestra al pasar el cursor.
Para el ejemplo he añadido una imagen pero el autor ha creado una galería, es posible añadir cualquier número de imágenes siempre que tengamos en cuenta que la suma del ancho de las imágenes no sea superior al espacio donde vamos a añadirlo.
La galería del autor la podemos conseguir de la siguiente forma.
Si estamos utilizando jQuery seguramente ya tenemos añadido el siguiente script en nuestra plantilla, de no tenerlo lo añadimos antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Y a continuación el siguiente:

<script type='text/javascript'>
$(document).ready(function()
{
$(&#39;.galleryImage&#39;).hover(
function()
{

$(this).find(&#39;img&#39;).animate(
{ width:100,
marginTop:10,
marginLeft:10
}, 500);

},
function()
{

$(this).find(&#39;img&#39;).animate(
{width:325,
marginTop:0,
marginLeft:0
},300);

});
});
</script>

Los estilos los añadimos antes de ]]></b:skin>

.galleryContainer
{
width: 1024px; /* Ancho del contenido */
}
.galleryImage { /* Las imágenes */
background-color:black;
width:325px;
height:260px;
overflow:hidden;
margin:5px;
float:left;
}
.info{ /* Texto adicional */
margin-left:10px;
font-family:arial;
padding:3px;
}
.info h2{ /* Títulos */
color:gray;
}
.info p {
color:white;
}
.clear {
clear:both;
margin-top:10px;
}

Una vez tenemos añadido lo anterior guardamos los cambios y en un gadget de HTML incluimos las imágenes y el texto:

<div class="galleryContainer">
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
</div>

Escape HTML pequeño para nuestro blog

Muchas veces tenemos que incluir en un comentario códigos, los cuales si traen el signo de menor ( < ) o de mayor ( > ), no nos deja y nos aparece un error:


La solución es cambiar el signo de menor ( < ) por: &lt; y el de mayor ( > ) por: &gt;, de esa manera ya podemos publicar sin ningún error.

Hoy incorporé en mi blog, arriba de la caja comentarios un link:

Si tienes que publicar un código antes codificarlo desde acá: Escape XML.

Pueden probar y verán como abre una ventana con un codifícador, el cual al introducir un código apretando el botón "Codifique" cambiará automáticamente el signo de menor ( < ) por: &lt; y el de mayor ( > ) por: &gt;.

(Si necesitan un Escape HTML mas completo lo pueden encontrar en mi sidebar, en la página de Utilidades Varias.)

Si quieren incorporar este link en su blog lo pueden hacer del siguiente modo:

Ir a Diseño, Edición de HTML, Expandir plantillas de artilugios.

Justo arriba de </head> poner el siguiente código:
<script language="JavaScript">
//http://loseasi.blogspot.com/
//<![CDATA[
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=450, height=390, top=35, left=270";
window.open(pagina,"",opciones);
}
//]]>
</script>

Después mas abajo buscar la caja de comentarios, será algo así:
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='260' id='comment-editor' scrolling='no' src='' width='100%'/>

Se encuentra abajo de:
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Entre los 2 códigos, justo abajo de:
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Poner el siguiente código:
<div style='padding:10px 0 5px 20px;width:100%;'>
Si tienes que publicar un código antes codificarlo desde acá: <a class='blank' href='javascript:Abrir_ventana(&quot;http://vku-escape-xml.blogspot.com/&quot;)'>Escape XML.</a></div>

Modificar el padding y el texto a gusto.


Guardar plantilla y ver el cambio desde una entrada.




Me han preguntado por correo unos códigos que incorpore al blog, los que voy a explicar en las proximas entradas, disculpen y tengan un poco de paciencia.

miércoles, 21 de julio de 2010

FELIZ DÍA DEL AMIGO

“Un amigo no da consejos, ayuda, acompaña”, dijo el creador del Día del Amigo.

El día internacional del amigo tiene origen en Argentina, sí, en nuestro país; y se lo debemos a Enrique Ernesto Febbraro, profesor de psicología, filosofía, historia músico y odontólogo. Vivía en Lomas de Zamora, fue socio fundador del Rotary Club de San Cristóbal de Buenos Aires, barrio en donde nació por el año 1924 y en el que vive actualmente. Es socio fundador y ahora honorario del Rotary Club de Once, de dicha ciudad.

“Un amigo no da consejos, ayuda, acompaña”, define Enrique Ernesto Febbraro, el hombre que el 20 de junio de 1969 inventó el “Día del Amigo”. Y completa: “la amistad es casta: si se mezcla con sexo, ya es otra cosa. Y tanto con un hombre, como con una mujer, tiene que estar fundada en el respeto”.
“Un padre que da consejos es un padre, ¡pero jamás un amigo!”, retruca desde su casa del barrio porteño de San Cristóbal al mismísimo Martín Fierro de José Hernández.

Casi como al pasar, asegura que Hernández pifió el renglón cuando puso en boca de Martín Fierro la imagen de un padre consejero y camarada.
Los únicos consejos válidos para Febbraro son aquellos que ayudan a conservar y mejorar la amistad y en el deber humano de tener amigos, empezando uno mismo por ser amigo”, señala.

El 20 de julio de 1969 mientras miraba por tevé la llegada del hombre a la Luna, se prometió a sí mismo que ese sería para siempre el Día del Amigo.
Antes de que la Apolo 11 regresara a la Tierra, desde su consultorio de Lomas de Zamora, donde vivía entonces, envió mil cartas a cien países y, a vuelta de correo con 700 respuestas, había quedado fundado el Día del Amigo.

Cuando Neil Armstrong pisó la Luna y dio “un pequeño paso para el hombre y un gran salto para la humanidad”, consideró que había madurado su idea de dedicarle un día al amigo.. “Escuché que el alunizaje del módulo era un gesto de amistad, desde la humanidad hacía el universo. ¡Ya está, es el día elegido!, dije. Hoy se celebra en unos cien países y esta en la agenda del corazón de los argentinos”.

Febbraro enviudó dos veces de mujeres que empezaron siendo sus amigas y le dejaron lo que él llama su tesoro: dos hijos y cuatro nietos.
El profesor señala que “entre un hombre y una mujer siempre subyace el deseo, pero si se lo supera, la amistad prospera. El matrimonio –aunque es una institución que une intereses diversos— siempre llega al minuto donde surge la amistad”.

En conversación con el director de Prensa Rotaria, Néstor C. Sarandria, el dr. Febbraro, enfatizaba : "Mi amigo es mi maestro, mi discípulo y mi condiscípulo. Él me enseña, yo le enseño. Ambos aprendemos y juntos vamos recorriendo el camino de la vida, creciendo. Sólo el que te ama te ayuda a crecer".

Su tarea se llevaba a cabo con un lema: "Un pueblo de amigos es una Nación imbatible", a la vez que destacaban que sería una celebración ética, sin fines de lucro ni de fomento al consumo.
Visitó organismos nacionales, gubernamentales, municipales, políticos, religiosos, personas notables y amigos para que adoptaran la idea y luego la difundieran en sus áreas de influencia.
Poco a poco fue logrando su cometido, primero fue el Gobierno de la Provincia de Buenos Aires que con su decreto Nº 235/79 autorizó la celebración y le dio un marco legal. Luego se fueron sumando distintas entidades y extendiéndose por toda la Argentina y por algunos países de América Latina.

Para el dr. Febraro, con el día del alunizaje se amplió el horizonte, conquista ésta de la humanidad toda, con la consiguiente posibilidad de estrechar nuevos lazos de amistad.

Su iniciativa tuvo éxito, ya que cada 20 de julio, en muchos países, los amigos esperan reunirse y dedican un día a la Amistad. Pero es importante recordar que la Amistad es vivida cotidianamente, durante los 365 días del año.

Dicha cotidianeidad es expresada claramente por Cunninghan: "Amigos son aquellos extraños seres que nos preguntan cómo estamos y esperan a oír la contestación ".

El dr. Enrique Ernesto Febbraro fue candidato dos veces al premio Nobel de la Paz.

Gigantesco salto para la humanidad
Al apoyar por primera vez su pie en la Luna, Amstrong afirmó: “Éste es un pequeño paso para el hombre, pero un gran salto para la humanidad”. Millones de personas en todo el mundo pudieron ver por televisión cómo el astronauta norteamericano avanzaba cautelosamente por la superficie selenita, cuya consistencia encontró similar a la de la carbonilla pulverizada. Fue el pie izquierdo de Amstrong, el primero que tocó la faz lunar
Lo primero que vieron millones de personas en la Tierra fue una de las patas del “Águila” y luego un pie de Amstrong buscando apoyo en el primero de los peldaños. La imagen era de intensos contrastes entre la deslumbrante luz solar y las sombras negras, pero la vista fue de extraordinaria claridad. Al ensayar cuidadosamente los primeros movimientos en la ignota superficie lunar, Amstrong adelantó: “No habrá dificultades para desplazarse aquí”. Luego, mientras Amstrong se encargaba de la cámara, Aldrin, un coronel de la Fuerza Aérea, de 39 años – se deslizó por la escotilla del “Águila” y descendió también cautelosamente por la vía que había seguido su compañero hasta unirse a él en la superficie.
Mientras Amstrong y Aldrin cumplían su histórica misión, el tercer tripulante del Apolo, Michael Collins, mantenía la nave madre “Columbia” en una órbita circunlunar, a 111 kilómetros de altura, aguardando el momento en que habría de reunirse con sus compañeros de empresa.


Les deseo a todos que este 20 de Julio pasen el mejor día junto a sus seres queridos.

Fuentes gratuitas, urbanfonts.

Más sitios para descargar fuentes gratuitas, urbanfonts ofrece la posibilidad de escoger color de fuente y fondo, como puede verse en la captura también proporciona distintos tamaños de texto de esa forma nos podemos hacer una idea del resultado final antes de utilizarla.

Otra forma de poner la letra capital

Desde que publiqué la plantilla Quo Template me han preguntado cómo he hecho para poner la letra capital a todos los títulos de las entradas pero específicamente cómo puede hacerse para poner la letra capital al inicio de cada entrada.

Anteriormente habíamos visto una manera de poner la letra capital en las entradas usando un poco de CSS y con ayuda de un pequeño código en las entradas que se desee que aparezca la letra capital.
Con esa otra forma el proceso es más simple, pues con sólo un cambio de agregará a todas las entradas de forma automática.


letra capital

Lo único que hay que hacer es agregar el pseudo-elemento first-letter que hará que tome la primera letra del texto y le aplique los estilos que hayamos elegido.

Para realizarlo sólo entra en Diseño | Edición de HTML y antes de ]]></b:skin> agrega lo siguiente:
.post-body:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

A partir de ahí ya aparecerá la letra capital en todas las entradas, pero también puedes agregar otros estilos a la letra, tales como el tipo de fuente, grosor, etc.
Estos son algunos otros atributos que puedes agregar:
font-weight: bold; /* letra en negrita */
font-family: Arial; /* tipo de letra */
font-style: italic; /* letra cursiva */

El procedimiento es muy sencillo y se puede aplicar a muchas áreas, por ejemplo:
Si quieres que los comentarios también tengan letra capital agrega esto:
.comment-body:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

Si quieres que el título de las entradas tenga letra capital agrega esto:
.post h3 a:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

Si quieres que el título del blog tenga letra capital agrega esto:
#header h1:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

Si quieres que los bloques entrecomillados tengan letra capital agrega esto:
.post-body blockquote:first-letter {
font-size: 40px;
color: #0B243B;
padding-right: 2px;
}

Consideraciones finales:
  1. Funciona en todos los navegadores.
  2. Si hubiera una imagen antes del texto entonces no se mostrará la letra capital.
  3. Si la letra capital tuviera un signo antes o después de ella estas también se verán afectadas con los estilos.

martes, 20 de julio de 2010

Opción para que las visitas escojan imagen y color de fondo

En Pczeros he visto una explicación muy sencilla para que las visitas puedan cambiar el color de fondo del blog con un simple click, se trata de un gadget con unas imágenes a modo de cuadritos que bien pueden ser cualquier otra imagen, dicha imagen funciona con el evento onclick y al marcar sobre ella cambia el color de fondo del blog.
Para probar he creado unas imágenes de muestra que como decía pueden sustituirse por otras creadas por nosotros, la forma de añadirlo es muy sencilla simplemente copiamos el siguiente código y lo añadimos allí donde deseamos mostrarlo, si se trata de un gadget escogeremos para añadirlo HTML/Javascript.

<div style="text-align: center;">
<a href="#" onclick="javascript:document.body.style.backgroundColor='#AA0104'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEY7Lzr4vJh6lVDcHTZHwRBAu6MjjB_E3FNjj2TyffiMW72e7bD9pFzTSu3i-VGhKKF7K-B4ByUXnFYFeJwEKiZ_vLwLk_kzKIJrnB4kZnfndSG1GHuSlZ2I9d0N25QdZXOk4K1NXfx1Q/s0/rojo2.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#199686'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEWSfWldhwgxajbcaGwke04dVKRjeNc9D-b4hBWJerG-iSwFHOWZPMtwLBSZAgZ-ZUCZapLofTwBl-7T8EAgFzSPC7YVx9477_xbJOZeyLqNTG51W15ZUXqAkV25Hu7Viavex1G-VG_TI/s0/azul1.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT4N1TcD8mja52CGgA3yTrnLci2Mfeio4ANxnz4WBsFFZ8677Gx_UPFgyKSMqNFhn6hbImvVS13Guq7LepQzW3nq56VqWUnai9n-WRBDd48hzyDzZAcKOs5zlMdmhiYIyC3EcbxGyHaV4/s0/blanco4.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDs4SX-yWTTUzZB5Eyiasm1mbNTfNhmnofU77hODNDRyrU6mbQ-6xKYaoz2aDgynptuf1wUASjaZWEC3g1lfYAuCc2GokUQHP0cSANdvqQ2yuURQYNWmLP9Epzz2BgiVumqIIEpJly-tM/s0/negro3.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#EB6E14'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdXOgyveoesH-I-gBm5ktlFv-ufNOMFEoKALgICdE5e4imdK4OEkoa3fh3O0_lU1t-n_3nAfqJC3_aw0Frkeui9iAfC3Nm9rjIR4wRNuq5Qr4Wkd02oJwrEEqS78W4mLomrego3YL8iXY/s0/naranja6.jp" /></a>
</div>


Esto es una imagen, para ver el ejemplo click sobre ella.

Cada cuadrito es una imagen y la url de cada imagen será el enlace que hará cambiar el color de fondo de body.
Si seguimos jugando descubrimos que también es posible hacerlo con texturas en lugar de colores, lo conseguimos de la siguiente forma:

<div style="text-align: center;">
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvyn9O2Jg1Vph1pVW7wbk1gP3IK2Qsasem6hNGqhtXNjh6Yzjg0fZ6HHiUUaL5oZiVGwBXpUlfdSp9vdYWEyLZPvqzIwhGf-sgrdg9rxsVBNd3gprACJBk0NnivGNhkXs5BRKOCvLafM8/s200/fondo1.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvyn9O2Jg1Vph1pVW7wbk1gP3IK2Qsasem6hNGqhtXNjh6Yzjg0fZ6HHiUUaL5oZiVGwBXpUlfdSp9vdYWEyLZPvqzIwhGf-sgrdg9rxsVBNd3gprACJBk0NnivGNhkXs5BRKOCvLafM8/s200/fondo1.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QmiCRtP3w_FhBI6GjY1FA3hADc-u_FbQs2pTNdS-Mr2CCgsRjESbDS3ox8lIeV5I7VAHz9GVRYUhPJrDmby0M_jBxFZ6jufcwJwXfmB-QCimYGrKZDJRfRHpr4IyUGO24IrJEQfrivo/s200/fondo2.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QmiCRtP3w_FhBI6GjY1FA3hADc-u_FbQs2pTNdS-Mr2CCgsRjESbDS3ox8lIeV5I7VAHz9GVRYUhPJrDmby0M_jBxFZ6jufcwJwXfmB-QCimYGrKZDJRfRHpr4IyUGO24IrJEQfrivo/s200/fondo2.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaZUFtB4avJ5h1fKiatXTdQZqocJazoltVPsZlqhiDjBHfblIdTEouH7PcYZeZbb_xDEmfaVRf3tSTnMuaPSITe2PvNa8Y4CWpffeMTYm5ezvTELxhJ7tE534gMq_daCPg2JlDM3lF6qk/s200/fondo3.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaZUFtB4avJ5h1fKiatXTdQZqocJazoltVPsZlqhiDjBHfblIdTEouH7PcYZeZbb_xDEmfaVRf3tSTnMuaPSITe2PvNa8Y4CWpffeMTYm5ezvTELxhJ7tE534gMq_daCPg2JlDM3lF6qk/s200/fondo3.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4XgWd3R4jSLIDSRU4BGtobTBV4_aSc4CyZqiW6x-MAISkrU5_kRDyMDxONJleY2w8zpVV-uVqYEQUs4kEY84FktXSmc4YUlNeUR989nctD6swGNgVb0VDsMAummBQVpp-8cUS2LnpKw/s200/fondo4.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4XgWd3R4jSLIDSRU4BGtobTBV4_aSc4CyZqiW6x-MAISkrU5_kRDyMDxONJleY2w8zpVV-uVqYEQUs4kEY84FktXSmc4YUlNeUR989nctD6swGNgVb0VDsMAummBQVpp-8cUS2LnpKw/s200/fondo4.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis4kDcAtPjDzRbzBTO5ABHNe2G2Wae1iVs9-8BqVdba8-W4kopL0sCgWc7lrGmvv3imaCTAP6rcLMKWhSd986KGPv54lXiH8sfPtB4M9ktVDfBQ-art5CpgIcWlROFDnyoN18ui5x7kSM/s200/fondo5.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis4kDcAtPjDzRbzBTO5ABHNe2G2Wae1iVs9-8BqVdba8-W4kopL0sCgWc7lrGmvv3imaCTAP6rcLMKWhSd986KGPv54lXiH8sfPtB4M9ktVDfBQ-art5CpgIcWlROFDnyoN18ui5x7kSM/s200/fondo5.jpg" /></a>
</div>

Como se puede ver hemos cambiado backgroundColor por backgroundImage, es necesario añadir la url de la imagen dos veces una para el fondo y otra para la miniatura que mostramos.
El tamaño de las miniaturas lo podemos modificar con width para la anchura y height para la altura.

domingo, 18 de julio de 2010

Elementos span y div

Los elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usarán, a menudo, junto con los atributos class e id.

Estos dos elementos de HTML no añaden nada al documento en sí.

Pero con CSS se pueden usar para añadir características visuales distintivas a partes específicas del documento.

Los elementos <div> y <span>, junto con los atributos id y class, ofrecen un mecanismo genérico para añadir estructura a los documentos. Estos elementos especifican si su contenido es en línea (span) o en bloque (div)

<span> sirve para aplicarle estilo a una pequeña parte de una página HTML.

Con <div> también podemos aplicar estilo a partes de la página HTML.

La diferencia entre <span> y <div> es que con esta última podemos aplicar estilo a una parte más amplia de la página, por ejemplo a tres párrafos. Además que la etiqueta <div> tiene un uso adicional que es el de crear divisiones en la página a las que podremos aplicar una cantidad adicional de atributos para modificar sus comportamientos. Por ejemplo, con el atributo align de HTML podemos alinear la división al centro, izquierda, derecha o justificado.

Recordar que los id's se referencian con el prefijo "#" y las clases con "."

Un id debe ser único y una clase puede ser referenciada por muchos elementos, incluso un elemento puede tener 2 clases.

Dentro de estos elementos <span> y <div> podemos poner distintos contenidos a los cuales se le dara una estructura con ayuda de los atributos class e id o estilos CSS.

Veamos uno ejemplos:

Caja 1 de 200px x 100px

Código utilizado:
<div style="width: 200px; height:100px; border: 1px solid #000000; color: #ffff00; text-align: left; background: #6699FF;">Caja 1 de 200px x 100px</div>

Caja 2 de 200px x 70px





Código utilizado:
<div style="width: 200px; height:70px; border: 2px solid #0000ff; color: #ffffff; text-align: right; background: #ff0000; float: right; ">Caja 2 de 200px x 70px</div>

Caja 3 de 200px x 100px con imagen dentro

Código utilizado:
<div style="width: 200px; height:100px; border: 3px solid #0000ff; color: #ffff00; text-align: left; background: #6699FF;"><img style="float: left;padding:5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAtJOHAS-_TKHZNQyNBcHaOrqXg85PYyEttyTKXg26Z4MQgnhAt0ZAXNuEyDlAqC-fBUKj9w1S2AOrk0iCb8kzEwYiMO1u4uVl5V-TTinI3JAL67H6kHwrBByU8cN7WLwHkX4aQ0eylt36/s1600/vkucfsb.png"/>Caja 3 de 200px x 100px con imagen dentro</div>

Caja 4 de 200px x 150px con menú

Código utilizado:
<div style="width: 200px; height:150px; border: 3px solid #ffff00; color: #ffffff; text-align: center; background: #ccc;">Caja 4 de 200px x 150px con menú
<ul>
<li><a href="#">página</a></li>
<li><a href="#">página</a></li>
<li><a href="#">página</a></li>
</ul>
</div>

En los ejemplos anterires yo puse el estilo directo en el div, pero también se puede poner afuera con los atributos class e id.

Ejemplo:

Caja 5 de 250px x 100px con imagen dentro con los atributos class e id.


Código utilizado:
<div class="caja5"><img id="caja5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAtJOHAS-_TKHZNQyNBcHaOrqXg85PYyEttyTKXg26Z4MQgnhAt0ZAXNuEyDlAqC-fBUKj9w1S2AOrk0iCb8kzEwYiMO1u4uVl5V-TTinI3JAL67H6kHwrBByU8cN7WLwHkX4aQ0eylt36/s1600/vkucfsb.png"/>Caja 5 de 250px x 100px con imagen dentro con los atributos class e id.</div>

CSS:
<style>
.caja5 {
width: 250px;
height:100px;
border: 3px solid #0000ff;
color: #ffff00;
text-align: left;
background: #6699FF;
}

#caja5 {
float: left;
padding:5px;
}
</style>

Si ponemos solo <div class="caja5"></div>

Se muestra la caja vacia sin contenido, pero con los estilos puestos en la clase caja5


También utilicé dos veces la misma clase, si fuese un id, eso no lo podría hacer.

El contenido dentro de un div o span puede ser muchas cosas, hasta otro div o span.


Leer también:

Guía de referencia CSS.
Manual HTML Básico.