Tutoriales Blogger

Abrir en nueva ventana la lista de enlaces

noreply@blogger.com (Elisabeth) — Mon, 02 Apr 2012 17:31:24 PDT

Gracias al Blog de Gem@

Cuando deseamos que un enlace abra en nueva ventana añadimos el atributo target="_blank

<a href="url-del-sitio" target="_blank"> ENLACE </a>

En el gadget de lista de enlaces también podemos añadir el atributo target="_blank.
En plantilla edición de HTML marcamos para expandir y buscamos el título que añadimos a nuestro gadget en este caso Mis enlaces encontraríamos algo así:

<b:widget id='LinkList1' locked='false' title='Mis enlaces' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

La línea marcada en negrita la sustituimos por la siguiente:

<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>

Guardamos los cambios y nuestro listado de enlaces abrirá en nueva ventana.

25 bancos de imágenes gratuitos

noreply@blogger.com (Elisabeth) — Mon, 30 Jan 2012 17:45:06 PST

Una lista imprescindible para quien trabaja en la publicación de contenidos:

Stock Xchng
Una galería extremadamente famosa con más de 350.000 fotos de gran calidad hechas por más de 30.000 fotógrafos. También podemos usarlo para divulgar nuestras fotos, así como consultar un foro dedicado a los autores de las imágenes.

Dreamstime

Más de 9 millones de imágenes gratuitas y a la venta. Si eres fotógrafo puedes vender las fotos ganando desde un 30 a un 60% de comisión.

Stockvault.Net

Podemos bajar fotos gratuitas sin necesidad de registro. También contiene una sección de compra y venta.

PhotoXpress

Podemos bajar gratis una foto cada dia sin registrarnos, 5 fotos diarias con registro y 10 si ofrecemos información personal.

Everystockphoto

Busca en varios bancos de imágenes gratuitos, siendo un buscador parecido al famoso Veezle

Free Stock Photos Bank
Parecido a Stock Xchng, donde diseñadores gráficos puedes escoger entre una enorme colección de imágenes en alta resolución completamente gratuita, sin necesidad de registro.

Free Digital Photos

Podemos obtener imágenes de resolución media de forma gratuita poniendo un enlace al banco de imágenes. Las de alta resolución no son gratis.

Morguefile

Uno de los más famosos para compartir este tipo de trabajos. Podemos bajar las fotos sin necesidad de registro, habiendo muchas de excelente calidad.

5000 Free Stock Photos

5000 fotos gratuitas y 8000 cliparts completamente gratis y son necesidad de registro.

Unprofound

Creado por un diseñador gráfico y una serie de colaboradores creadores de las fotos mostradas. Reciben donaciones de todas las partes del mundo.

Freerangestock

Después del registro podemos bajar tantas fotos como queramos. Podemos contribuir con nuestras obras.

Lomography

Especializado en fotografía artística, usando cámaras viejas con colores especiales. Las imágenes no tienen buena resolución, pero se puede entrar en contacto con el artista de cada obra.

Imagebase
Sin necesidad de registro y con muchas categorías para elegir el material necesitado. Podemos ver la galería de trabajos realizados por el autor del sitio aquí.

PixelPerfect

Podemos bajar las fotos de los artistas y entrar en contacto con ellos, así como comentar sus imágenes.

Cepolina Photos

PhotoRack

Muy bien estructurado por asuntos, siendo muy fácil encontrar la imagen de la categoría que le especifiquemos.

Abstract Influence

Fotos en varias resoluciones que pueden obtenerse sin necesidad de registro.

FreeMediaGoo

Fotos, archivos flash y de audio. Aunque no hay mucha cantidad de contenido, la calidad es buena.

FreePixels
4000 fotos de alta resolución para bajar sin necesidad de registro.

ImageAfter

25.000 imágenes y texturas gratis para uso personal o comercial. No es necesario registro.

FreeImages

Enorme cantidad de imágenes que podemos obtener siempre y cuando hagamos referencia al banco de imágenes con un enlace.

InterArtCenter

Tiene imágenes y modelos en 3D, así como animaciones en Flash. No es necesario registro.

Openphoto

Una colección de más de 15.000 fotos disponibles para download gratuito

Photorogue

Aunque están empezando, la idea es buena. Si necesitáis una imagen determinada, podéis hacer la solicitud y esperar a que un fotógrafo lea la petición y haga la foto. Basado en la buena voluntad y en el “hoy por mí mañana por ti”.

Woophy

Las fotos están localizadas geográficamente. No pueden usarse para uso comercial, ya que la licencia no lo permite.

Visto en http://wwwhatsnew.com

Pasar a ser un videobloggers

noreply@blogger.com (Elisabeth) — Thu, 03 Nov 2011 13:37:41 PDT

Transmite lo que estás haciendo .....Ahora podemos ser videobloggers y retransmitir online desde el blog ... quieres saber cómo? ....

1_ Lo primero de todo es entrar en justin.tv
2-Creamos una cuenta de usuario,una vez que la has creado hacemos click en el botón rojo que se encuentra en la parte superior derecha que dice Emite.

Se abrirá una ventana con un mensaje, presiona el botón Permitir para continuar.
A continuación se encenderá tu cámara web, no importa que no transmitas en este momento, estos pasos son sólo para que se cree tu canal.
3-Ahora entra a tu canal, o sea a esta dirección cambiando lo que está en color rojo por el nombre de usuario que usaste para registrarte.

http://es.justin.tv/nombredeusuario/

Ahí verás la página de tu canal con la pantalla de video y abajo de ella las opciones para compartir.

4-El primer código es el enlace a tu página, ese puedes dárselo a tus amigos para que entren a tu canal y te vean cuando transmitas, además tendrás tu propio chat para que hables con tus invitados.
El segundo código es para que insertes en tu blog la pantalla y se vea desde ahí tu transmición en vivo. Sólo cópialo, luego entra en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pégalo ahí. O bien, pégalo en una entrada.

Cuando quieras transmitir sólo repite los pasos anteriores, presiona el botón Emitir, presiona el otro botón para acceder a tu webcam y cuando aparezca tu imagen en la pantalla click en START. En ese momento estarás transmitiendo en vivo desde tu webcam.

Así de sencillo podrás transmitir en vivo lo que quieras, sólo recuerda avisarle a tus amigos la hora y el día que transmitirás para que puedan verte a tiempo y no se pierdan de nada.

Gracias a ciudadblogger. por esta fantástica entrada.

Vistas dinámicas en Blogger

noreply@blogger.com (Elisabeth) — Wed, 28 Sep 2011 13:36:23 PDT

Google ha actualizado de nuevo su servicio de blogs, Blogger, mediante una renovación que permite al usuario y a sus lectores cambiar la visualización de su bitácora.

Esta nuevas vistas 'dinámicas, un total de siete, cambian el diseño del blog de forma que prima la imagen sobre el texto y además permiten compartir contenido en los sitios sociales del usuario.

Construido con lo último en tecnología web (AJAX, HTML 5 y CSS 3), las vistas dinámicas ofrecen una moderna experiencia de navegación que busca inspirar a los lectores a explorar nuevas opciones con su blog.

La carga de sus elementos es un 40 por ciento más rápida que las plantillas tradicionales y muestran más entradas en la pantalla, según explica Google en su blog.

El dinamismo de las nuevas plantillas permite desplazarse por el blog de forma sencilla, y la mayoría de las nuevas vistas resume las entradas en pequeños cuadrados a las que se puede acceder en su totalidad simplemente pinchando en ellas.

Podemos activarlo desde la opción de plantillas de blogger y simplemente seleccionar una de ellas, para que se inicie el blog con ella. Luego el lector si lo desea podrá seleccionar una forma de visualización distinta. Los siete tipos de vistas dinámicas disponibles son los siguientes:

Texto predictivo ... lo nuevo de Blogger

noreply@blogger.com (Elisabeth) — Fri, 12 Aug 2011 01:04:05 PDT

Google tiene previsto introducir el texto predictivo en Blogger y ha decidido permitir a los usuarios probarlo antes de implantarlo.
A través de Blogger in Draft, los usuarios pueden experimentar con este sistema de escritura que pretende agilizar la redacción y ahorrar tiempo a los usuarios. La compañía ha denominado a la herramienta 'Google Scribe'.

Blogger in Draft es un portal creado por Google como centro de experimento de futuros productos para su servicio de blogs. Los usuarios pueden experimentar con las novedades futuras en esta página, de forma que para Google es el test definitivo sobre sus herramientas.

El último ingenio de Google a disposición de los usuarios en Blogger in Draft es el texto predictivo. Se trata de un sistema que completa las palabras que están tecleando los usuarios o le sugiere palabras en función del contexto de la frase y de las letras introducidas. Este tipo de sistemas está muy extendido en sistemas móviles, en los que se agiliza la escritura de forma notable.

La idea de Google es llevar la escritura predictiva y el autocompletado a los blogs para agilizar el proceso de publicación. La compañía ha bautizado a su sistema como 'Google Scribe' y está a disposición de los blogger que quieran probarla a través de Blogger in Draft.

"'Google Scribe le ayuda a escribir de manera más eficiente ya que sugiere palabras y frases comunes", explica Google. El servicio se inicia con soporte para inglés, español, holandés, árabe, francés, alemán, húngaro, italiano, polaco, portugués, ruso y sueco. Google ha configurado el sistema para reconocer automáticamente la lengua, de forma que los usuarios no tendrán que preocuparse en configurar nada.

Una vez activado 'Google Scribe', las sugerencias de texto irán apareciendo en la pantalla en todo gris. Los usuarios pueden aceptar las recomendaciones pulsando la barra espaciadora o pueden seguir introduciendo letras si la recomendación no se ajusta al término que buscaba. El sistema también permite al usuario visualizar varias sugerencias por palabra. Para ello, los usuarios deben seleccionar la opción ver múltiples sugerencias, tras lo que se presentará un listado de posibilidades.

El nuevo servicio de 'Google Scribe' ya está disponible para todos los usuarios que quieran probar su velocidad de escritura. A través de Blogger in Draft se puede acceder al nuevo servicio.

Abrir todos los enlaces en una nueva ventana

noreply@blogger.com (Elisabeth) — Tue, 09 Aug 2011 16:51:32 PDT

Si lo que quieres es que todos los enlaces que tienes en tu blog se abran en otra ventana diferente sólo tienes que ....

Ir a Diseño,Edición de html y en el código de la plantilla buscar

<head>

justo después de ella colocamos:

<base target="_blank" />

Y guardamos.

**Ojo con esto ya que abrirá TODOS los enlaces, incluyendo los que tengamos de javascript !!!

Si lo que quieres es que se abra solamente un enlace en concreto tendremos que insertar el atributo target="_blank" de esta forma.

<a href="direccion_URL" target="_blank"> ENLACE </a>

Gracias a Vagabundia por todo lo que aprendemos allí.

Cambiar el tamaño de letra en el blog

noreply@blogger.com (Elisabeth) — Thu, 16 Jun 2011 02:15:27 PDT

Hoy he entrado a un blog de un amigo y he visto un truquito que me ha encantado.

Lo he encontrado en Vagabundia y en CiudadBlogger y quiero compartirlo con todos vosotros a ver que os parece.

Bueno hay personas que tienen dificultad para leer en los blogs pq la letra es pequeña o grande,pues bien podemos con dos simples botones hacer que las personas que entren al blog pongan la letra más grande o más pequeña a su elección.

Hay dos formas de poder hacerlo, la primera es insertando un gadget de html/javascript con el siguiente código:

Tamaño de letra: <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='10px'"><span>10</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='12px'"><span>12</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='14px'"><span>14</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='16px'"><span>16</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='18px'"><span>18</span></a>

esto nos daría lo siguiente:

como veis salen diferentes numeros desde el 10 hasta el 18 y podemos elegir el tamaño de letra que queremos.

Otra forma de hacerlo que me parece más bonita es esta:

Nos vamos a Diseño, Edición de html y antes de </head> ponemos este código:



<script type='text/javascript'>

var tgs=new Array('div','td');

var szs=new Array('xx-small','x-small','small','medium','large','x-large','xx-large');

var startSz=2;

function ts(trgt,inc) {

if (!document.getElementById) return

var d=document,

cEl=null,sz=startSz,i,j,cTags;

sz += inc;

if (sz < 0) sz=0;

if (sz > 6) sz=6;

startSz=sz;

if ( !(cEl=d.getElementById(trgt))) cEl=d.getElementsByTagName(trgt)[0];

cEl.style.fontSize=szs[sz];

for (i=0 ; i < tgs.length; i++) {

cTags=cEl.getElementsByTagName(tgs[i]);

for (j=0; j < cTags.length ; j++) cTags[j].style.fontSize=szs[sz];

}

}

</script>

ahora hacemos un gadget de html/javascript, ya sabemos... Diseño,Elementos de página,añadir un gadget.

y pegamos el siguiente código:

<a href="javascript:ts('body',1)"> <img src="http://i177.photobucket.com/albums/w212/josefmaria/fontMas.gif"/> </a>

<a href="javascript:ts('body',-1)"> <img src="http://i177.photobucket.com/albums/w212/josefmaria/fontMenos.gif"/> </a>

Este truco hará que cambie el tamaño de la letra de todo el blog, si deseas que sólo cambie la letra de las entradas cambia donde dice body por main.

así se vería:

Espero que os guste :)

Insertar una galeria de imágenes

noreply@blogger.com (Elisabeth) — Tue, 14 Jun 2011 10:42:40 PDT

Desde el blog de gema nos llega como insertar una galería de imagenes.

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

Allí insertaremos este código:

#galeria ul {
overflow: hidden;
padding-top: 5px;
}
#galeria ul li {
display: inline;
}
#galeria ul li a {
display: block;
float: left;
width: 200px;
margin: 0 10px 20px;
}
#galeria ul li a img {
display: block;
width: 200px;
height: 125px;
margin: -5px 0 0 -5px;
border: 5px solid rgb(250, 250, 250);
}
#galeria ul li a:hover img, #galeria ul li a:focus img {
border-color: rgb(235, 235, 235);
}
#galeria ul li a:active img {
margin: -4px 0 -1px -5px;
}
#galeria ul li a span {
width: 195px;
position:relative;
height: 20px;
display: block;
color: rgb(242, 242, 242);
font-size: 15px;
line-height: 18px;
letter-spacing: 0px;
word-spacing: 3px;
text-transform: uppercase;
padding: 2px;
background-color: #191919;
margin-top: -30px;
text-indent: 4px;
/*+opacity:70%;*/
filter: alpha(opacity=70);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
#galeria ul li.newfaces-icon a span {
display: none;
}
#galeria ul li a:hover span, #galeria ul li a:focus span {
color: rgb(205, 72, 72);
}

Y el HTML allí donde deseamos mostrarlo.

<section id="galeria">
<ul>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
</ul>
</section>

Donde pone URL-IMAGEN lo sustituimos por la url de nuestra imagen a mostrar, en Título añadimos el texto y en URL-ENLACE es el espacio para añadir la url del sitio si deseamos que la imagen sea un enlace.

Las imágenes miden 200 x 150 y son gentileza de Wallpapers a full.

Gracias Gema por enseñarnos tantas cosas :)

Botón "no me gusta", cómo quitarlo en Facebook

noreply@blogger.com (Elisabeth) — Sat, 21 May 2011 01:54:58 PDT

En los últimos días, una nueva amenaza ha atacado a los usuarios en español de la red social. Se trata del botón “No me gusta”, una aplicación fraudulenta de Facebook creada con el fin de robar datos personales de los usuarios.
Como parte de la maniobra, los usuarios reciben un mensaje en el que los invitan a hacer "click" en un enlace para instalar la opción "No me gusta", pero en realidad están recibiendo un "malware" (software malicioso).

Esa aplicación -que no es un virus en sí misma- descarga un software que envía mensajes de correo electrónico masivo no solicitado, en su mayoría de tipo spam, desde la página de Facebook.

Según la firma de seguridad Trend Micro, la trampa logró alcanzar a unos 50.000 usuarios, gran parte de ellos son argentinos y la cifra sigue creciendo.

Además de esto, también se ha lanzado una nueva aplicación que contiene codigo malicioso llamado“escanea tu perfil”.Esta aplicación también tiene acceso a tu cuenta y envía mensajes molestos e infecciones a tus amistades del facebook.

Para quitarlo hay que ingresar al propio perfil en Facebook y hacer lo siguiente:

1- Ir a "Cuenta" y allí seleccionar la opción "Configuración de la privacidad".

2- Dirigirse a "Aplicaciones y sitios web" y presionar en "Editar tu configuración".

3- Clickear en la opción "Aplicaciones que utilizas" y luego "Editar la configuración".

4- Allí aparecerán las aplicaciones maliciosas, que deben eliminarse presionando el botón que presentan una cruz ("Eliminar").

Un consejo no aceptéis ni pongáis ninguna aplicación sin saber antes de que se trata,vuestra información personal puede estar en peligro.

Insertar un Buscador personalizado en tu Blog

noreply@blogger.com (Elisabeth) — Wed, 18 May 2011 08:00:11 PDT

Este truco es muy facilito, puedes insertar un buscador en tu blog con un icono personalizado.

Lo único que tienes que hacer es ir a Diseño,Elementos de la página,Añadir un gadget de Html/Javascript

Una vez hecho esto insertamos el siguiente código ahí:

<form id="searchthis" action="/search" style="DISPLAY: inline" method="get">
<input id="search-box" name="q"/>
<input border="0" alt="Buscar" src="Aqui la dirección de la imagen" type="image"/></form>

Donde pone Aquí la Dirección de la imagen insertaremos la dirección de nuestra imagen, yo por ejemplo he utilizado esta:

Espero que os guste

Blogger detalla por qué suspendió el servicio

noreply@blogger.com (Elisabeth) — Sun, 15 May 2011 03:02:53 PDT

Blogger explica las fallas técnicas que sufrió en la noche del jueves (12 mayo).

"Fue un día frustrante. Estamos muy apenados que no pudieran publicar sus entradas en Blogger en las últimas 20.5 horas."

Estamos muy cerca de operar de forma normal para que puedan publicar nuevamente entradas en sus blogs. Y en las próximas horas regresaremos los post (entradas nuevas al blog) y los comentarios que removimos de forma temporal, para “componerlos” (técnicamente).

Gracias por su paciencia mientras resolvemos esta situación.

En la empresa usamos este servicio para gestionar nuestros propios blogs, así que sentimos lo que ustedes están sufriendo”, dijo Eddie Kessler, director del equipo técnico de Blogger, a través del blog oficial de Google.

Según se explica, en una rutina de mantenimiento técnico, realizado el miércoles 11 de mayo por la noche, se detectaron algunas fallas de datos que alteraron el funcionamiento de Blogger.

Desde ese momento, algunos bloggers y lectores (quizás sólo 0.16% de ellos, según Blogger) empezaron a detectar algunas fallas, como interrupciones intermitentes del servicio, la desaparición de algunos post y algunos mensajes de error.

El jueves 12 de mayo, Blogger siguió en estado de pre-mantenimiento y siguió operando sólo en modo de lectura (no se podían publicar nuevos blogs), ya que algunos post fueron removidos.

Dichos post son los que aún estamos restaurando”, dijo Kessler, quien prometió a los usuarios de Blogger que trabajarán para que situaciones de este tipo no vuelvan a ocurrir.

CÓMO SE DETECTÓ EN MÉXICO

Algunos usuarios de Blogger en México detectaron que todavía hoy a las 11:30 horas, todos los “post” subidos al sitio a partir de las 7 de la noche del jueves 12 de mayo, habían “desaparecido”.

Casi de forma inmediata, algunos usuarios de Twitter empezaron a alertar de esta situación, asegurando que no podían entrar a sus blogs. Algunos, un tanto más alarmistas, empezaron a especular si este servicio ya habría sido hackeado, como sucediera con la red de PlayStation Network.

Blogger ya ha vivido situaciones similares este año, las cuales se han logrado resolver sin mayor contratiempo. Por ejemplo, registró un corte temporal de su servicio el 12 de abril de este año y semanas antes, el 17 de marzo. En ambos casos el servicio volvió a la normalidad, sin provocar pérdidas de información a los usuarios.

QUIEN ES BLOGGER

Blogger fue creado en marzo de 1999 por Pyra Labs, una compañía estadounidense de emprendedores expertos en informática. Con el auge de los blogs a finales de los años 90, Google decidió comprarlo en el 2003.

Para el 2006, fue considerada dentro el ranking de los 50 sitios web más visitados del mundo.

Borrar el cartel "Mostrar todas las entradas" en nuestro Blog

noreply@blogger.com (Elisabeth) — Sat, 14 May 2011 07:51:00 PDT

Para borrar el cartelito de "Mostrar todas las entradas" debemos irnos a Diseño, Edición de Html y expandimos artilugios.

Ahora buscamos la siguiente línea:

<b:include data='top' name='status-message'/>

Borramos esa línea y Guardamos.

Ya estaría.

Numerar comentarios en el blog

noreply@blogger.com (Elisabeth) — Sun, 08 May 2011 07:49:45 PDT

Lo he probado y funciona muy bien el truco.

Nos vamos a Diseño, Edicición de Html y expandimos artilugios.

Buscamos la siguiente línea,ya sabes que para buscar debes pulsar Ctrl+f, bien pues buscamos lo siguiente:

<b:loop values='data:post.comments' var='comment'>

Una vez encontrado justo encima de esa línea insertamos esto:

<script type='text/javascript'>var num_comm = 1;</script>

y debajo de la línea esto:

<a class='num_comments' expr:href='data:blog.url + "#comment-" + data:comment.anchorName' expr:id='"comment-" + data:comment.anchorName' expr:title='"Comentario hecho por " + data:comment.author'><script type='text/javascript'>document.write(num_comm); num_comm=num_comm+1 ;</script></a>

con lo cuál nos quedaría algo así:

Para acabar debemos buscar lo siguiente :

]]></b:skin>

y pegamos justo encima el siguiente código:

/* Numeracion de comentarios

================================== */

.num_comments {

color:#0101DF;

float:right;

text-decoration:none;

font-size:24px;

}

En color: podemos insertarle el color que mejor vaya con nuestro blog.
En font-size podemos cambiarle el tamaño.
En float podemos poner los números a la derecha o a la izquierda.

Guardamos y ya estaría.

Espero que os guste...

un comentario

noreply@blogger.com (Elisabeth) — Sat, 23 Apr 2011 03:26:43 PDT

Perdonar esta entrada pero he tenido un problema con un comentario que me ha dejado una persona pidiendome ayuda en una entrada, no ha salido el comentario y ahora no sé donde me ha pedido ayuda.
Creo que su nombre era algo así como los cromos de tu vida ... por favor dejame otra vez el comentario y te ayudaré,vale?

Gracias.

Texto con fondo de color sobre imagen

noreply@blogger.com (Elisabeth) — Sun, 10 Apr 2011 03:54:37 PDT

Desde El blog de Gema nos llega este truquito para imágenes que me ha encantado, es realmente fácil y queda muy bien.

Aquí podemos ver un ejemplo de cómo quedaría

La forma de conseguir ese efecto es muy sencilla y una vez añadidos los estilos sólo debemos añadir un pequeño código cada vez que deseamos mostrar una imagen.
Localizamos ]]> y justo antes añadimos:

CSS:

/* Sin color */
ul { overflow: hidden; padding: 5px; }
ul > li {
position: relative;
float: left;
list-style: none;
margin: 0 20px 20px 0;
font-size: 10px;
}
ul a { text-decoration: none; display: block; }
ul li img { display: block; position: relative; z-index: -1; } /* IE8 fix, background colour appears behind img for uknown reason set negative z-index */
ul li:not([class=na]) img { position: static; } /* Reset relative position, as this plays havoc with good browsers */
ul a:hover, ul a:focus { display: block; outline: none; -moz-box-shadow: 3px 3px 5px #000; -webkit-box-shadow: 3px 3px 5px #000; box-shadow: 3px 3px 5px #000; }
ul a:hover img, ul a:focus img { outline: 3px solid #ccc; }

ul a:hover:after,
ul a:focus:after
{
content: attr(title);
color: #000;
position: absolute;
bottom: 0;
height: 30px;
line-height: 30px;
text-align: center;
font-weight: bold;
width: 100%;
background: rgb(255,255,255);
background: rgba(255,255,255,0.7);
background: -moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(204,204,204,0.7)); /* Firefox 3.6+ */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.7)), to(rgba(204,204,204,0.7))); /* Safari */
display: block;
text-shadow: 1px 1px 1px #fff;
}
ul a.reverse:hover:after,
ul a.reverse:focus:after { top: 0; right: 0; }

ul a.offset:hover:after,
ul a.offset:focus:after { top: 50%; margin-top: -15px; }

ul a.alternate01:hover:after,
ul a.alternate01:focus:after
{
top: 0;
width: 50%;
height: 100%;
line-height: normal;
text-align: left;
padding: 4px;
font-size: 12px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Con color */
ul.color a:hover img, ul.color a:focus img { outline-color: #1E528C; }

ul.color a:hover:after,
ul.color a:focus:after
{
background: rgb(30,82,140);
background: rgba(30, 82, 140, 0.7);
background: -moz-linear-gradient(top, rgba(30, 82, 140, 0.7), rgba(43, 117, 200, 0.7)); /* Firefox 3.6+ */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 82, 140, 0.7)), to(rgba(43, 117, 200, 0.7))); /* Safari */
color: #fff;
text-shadow: 1px 1px 1px #000;
}

A continuación en un gadget de HTML añadimos:

<ul>
<li><a href="url-enlace" class="offset" title="Título"><img src="url-imagen" width="559" height="283" alt="Título" /></a></li>
</ul>

Si preferimos mostrar el fondo del texto y borde de color entonces debemos añadir la clase "color" para que adquiera los estilos establecidos.

<ul class="color">
<li><a href="url-enlace" class="offset" title="Título"><img src="url-imagen" width="559" height="283" alt="Título" /></a></li>
</ul>

-En url-imagen añadimos la url de la imagen que vamos a mostrar.
-Donde url-enlace es el lugar para añadir la url del sitio a enlazar.
-Con width establecemos la anchura de la imagen y con heigh la altura.

Otros cambios que podemos hacer.
En los estilos que añadimos a la plantilla podemos cambiar los estilos de texto y color de fondo, buscaremos /* Con color */ y a partir de ahí modificamos:

-Con text-shadow: 1px 1px 1px #000; modificamos la sombra del texto.
-En color: #fff el color de texto.
-Si añadimos a continuación font-size: 14px; aumentamos el tamaño de fuente.
-Para el color de borde buscamos:
ul.color a:hover img, ul.color a:focus img { outline-color: #4682B4; }

-A continuación el segundo background es el color de fondo:
ul.color a:hover:after,
ul.color a:focus:after
{
background: rgb(30,82,140);
background: rgba(30, 82, 140, 0.7);

Gracias Rosa por todo lo que me has enseñado

noreply@blogger.com (Elisabeth) — Fri, 01 Apr 2011 14:32:29 PDT

Quería desde aquí dar mi homenaje a alguien que para mi ha sido y será una de las mejores blogger que he "conocido".Empecé en este mundo de blogger hace mucho tiempo y cuando conocí su blog fue una pasada,gracias a ella y a personas como ella que intentan ayudar a los que como yo se van metiendo en este mundo loco de los bloggers.
Gracias Rosa por haber compartido con nosotros todo lo que sabias sobre este mundo y ayudarnos en todo lo que podías, yo era una gran admiradora de tu trabajo.
Un beso muy fuerte y te recordaré siempre.

Su blog : El escaparate de Rosa el mejor sitio de ayuda para blogs que he visto en internet.
Y quisiera poner el último de sus post y compartirlo con todos vosotros.

Es la de añadir un enlace que de la posibilidad a nuestras visitas de hacerse seguidor de nuestro blog, sin necesidad de mostrar el gadget de Seguidores.
Podemos hacerlo con un simple enlace de texto, una imagen o, como en mi caso, usando ambos.

El código iría colocado en un Gadget HTML en la sidebar, footer, etc.

Con enlace de texto:
<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXX" target="_blank"> Seguir el Escaparate</a>

Con enlace en una imagen:

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXX" target="_blank"><img src="AQUI LA URL DE LA IMAGEN"/></a>

Con enlace en texto e imagen:

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXX" target="_blank"><img src="AQUI LA URL DE LA IMAGEN"/> Seguir el Escaparate</a>

Notas:

Lo que vemos resaltado en rojo, es en cada caso lo que hemos de modificar por nuestros datos.

En el caso de blogID, tenemos que colocar sustituyendo a las XXXXXXXXX, la ID de nuestro blog, es decir, el número que se muestra en la url del navegador cuando estamos dentro de nuestro panel de Blogger en la pestaña Diseño

Muchisimas Gracias Rosa.

Efectos en una imagen

noreply@blogger.com (Elisabeth) — Wed, 23 Mar 2011 14:33:24 PDT

Vamos a trabajar con esta imagen:

Puedes Descargarla Aquí

Una vez la tengamos vamos a photofiltre /Archivo / Abrir y cargamos la foto.

Botón derecho del ratón y Duplicamos una 5 o 6 veces la imagen.

En la última capa (capa6),pulsamos sobre Capa/Transparencia/Gradiente Transparente y vamos a elegir entre Izquierda a derecha,Derecha a Izquierda,Arriba hacia abajo,Abajo hacia arriba,Radial.

Yo he elegido Izquierda a derecha y le aplico un Filtro/color , y una textura:

Ahora debes hacer lo mismo con cada una de las capas que tenemos, primero la transparencia,despues color y por ultimo textura.

Tú puedes ir probando los distintos efectos a tu gusto.

Imagen con brillos

noreply@blogger.com (Elisabeth) — Sat, 19 Mar 2011 08:50:18 PDT

Para esta primera imagen necesitas el filtro Xenofex 2

Acuerdate antes de seguir estos pasos Pincha aquí

Ahora buscamos una imagen que no tenga más de 500 de ancho, como por ejemplo:

Abrimos nuestro Photofiltre studio,

Archivo/Abrir (buscamos nuestra foto de flores) y aceptamos.

Duplicamos la imagen varias veces (por ejemplo 4) (para que funcione)

En la primera imagen:

Filtros/Filtros 8BF/Alien Skin Xenofex 2/Constellation

y lo ponemos de esta manera:

Haga clic en aceptar.

En la segunda imagen:

Repetimos el filtro

Filtros/Filtros 8BF/Alien Skin Xenofex 2/Constellation

y lo único que cambiamos es esto:

PInchamos en Random seed para cambiar la posición de los brillos.

Aceptamos

En la tercera imagen, lo mismo,repetimos el filtro y sólo cambiamos Random Seed. y así con la cuarta.

Una vez creada,guardamos la imagen Herramientas/Gif animado

en retardo le ponemos el tiempo por ejemplo 14 y le ponemos paleta optimizada:

y pulsamos en exportar y aceptamos.

Ya tenemos nuestra imagen con brillitos, espero que os haya gustado.

Sitios de Descarga de Filtros 8BF para Photofiltre

noreply@blogger.com (Elisabeth) — Sun, 27 Feb 2011 13:32:28 PST

Para poder ver los distintos efectos de los filtros puedes visitar estas páginas:

Ver efectos de Filtros

Ver efectos de Filtros

Para descargar los Filtros puedes hacerlo en estas páginas:

http://www.creationsylvie.net/psp/filtres_psp.html

http://bibis-grafikoase.de/Frameset_1/Plugin.html

http://www.petrapsppalace.nl/images/EH% 20Filters.html

http://ressources-psp.chez-alice.fr/mes_filtres.htm

http://membres.multimania.fr/creationjodoflo/filtres.htm

http://creationfanouch.free.fr/mesfiltres.html

http://membres.lycos.fr/pspabc/filtres.htm

http://www.tynareagen.com/filtres/lesfiltres.htm

http://www.lundentreux.info/infographie/filtres/Aentree.htm

http://janaly.com/Filtres/Filtre.html

http://funanbule01.free.fr/

http://www.meguilgraphic.com/filtres2/filtre2.htm

http://www.zonelib.com/filtres/gratuits/free.htm

http://www.fleursauvage.be/utilitaire/filtres/filtres.htm

http://www.chezzoumba.com/filtres.htm

http://www.shipon.ch/listedesfiltres.htm

http://bbrunoo.free.fr/graphisme/8bf.php

http://www.mehdiplugins.com/pages/wavylab.htm

http://www.creationsylvie.net/psp/filtres_psp.html

http://capucine83.ifrance.com/filtres.htm

http://s142205882.onlinehome.fr/filtres/filtres.htm

http://www.vicanek.de/

http://www.linktipper.nl/leden/start.php?lid=1055

http://www.chtitefleur.com/psp/filtres.html

http://amouretfleurspsp.free.fr/freeware.htm

http://www.richardrosenman.com/software/downloads/

http://www.forum-toshop.com/forum/viewtopic.php?f=87&t=23156

http://membres.lycos.fr/filtres1/filtres.html

http://www.littleinkpot.co.uk/FreePlugins.htm

*************

Redfield: http://www.redfieldplugins.com/Downloads.htm

Paso importante para la instalación de 8BF en Photofiltre

noreply@blogger.com (Elisabeth) — Sun, 27 Feb 2011 13:25:22 PST

Es necesario instalar dos archivos dll para ejecutar los filtros 8BF en photofiltre

Tiene que hacerlo en System y en System32

1.Descargar y guardar el archivo que contiene los 2 archivos DLL :

Descargar Aquí

2.Abra el archivo que está en Zip y descomprima.

3. Verá que tiene dos archivos y a continuación pongo como instalarlos:

Vaya a Inicio / Disco local C / windows / system

- Abrir el sistema de archivos: copiar / pegar estos 2 archivos dll.

A continuación, vaya a Inicio / C/windows/system32
- Abra la carpeta del sistema, copiar y pegar estos 2 archivos dll.

Una vez hecho esto ya puede empezar a descargar Filtros 8BF

Nuevo Blog que comparto con vosotros

noreply@blogger.com (Elisabeth) — Sat, 19 Feb 2011 09:21:29 PST

Hoy os traigo un nuevo Blog con imágenes Gratuitas creadas por mi, espero que os guste, podeis utilizarlas tanto para decorar blogs, como para vuestras entradas ... o donde querais.

Muchos Besitosss a todos

Blog Imagenes Gratuitas Elisabeth

Anuncios rotativos en el blog con jQuery

noreply@blogger.com (Elisabeth) — Wed, 16 Feb 2011 13:20:55 PST

Con jQuery y el script InnerFade podemos crear anuncios no sólo con imágenes sino también con textos y además podemos elegir si aparecen de forma secuencial o aleatoria. En cualquiera de los casos es posible mostrarlos con un efecto de desvanecimiento entre cada uno de ellos.

En el caso de los anuncios de texto quedan perfecto para resaltar entradas que quizá están un poco olvidadas o que simplemente queremos destacar.

Y en el de las imágenes podemos usarlo también para mostrar entradas destacadas, para publicitar alguna otra cosa más, o simplemente para mostrar las imágenes que te gustan.

En ambos casos la instalción es muy sencilla. Primero hay que descargar este archivo, descomprimirlo y subir el script a un alojamiento.

Luego entra en Diseño y despues en Edición de HTML y antes de </head> pega lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='URL del archivo jquery.innerfade.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(
function(){
$('#news').innerfade({
animationtype: 'slide',
speed: 850,
timeout: 3000,
type: 'random',
});

$('ul#portfolio').innerfade({
animationtype: 'fade',
speed: 1000,
timeout: 4000,
type: 'sequence',
});
});
</script>

Agrega donde se indica en color azul la URL del archivo que subiste previamente.
Ahora antes de ]]></b:skin>

#news-div {
height:50px; /* Altura del contenedor de los anuncios de texto */
background:#FFFEB8; /* Color de fondo de los anuncios de texto */
border:1px solid #ccc;
}
#news li {list-style-type:none;}
#portfolio li {list-style-type:none;}

Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega uno de estos códigos:

Para los anuncios de texto:

<div id='news-div'>
<ul id='news'>
<li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
<li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
<li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
<li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
<li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
</ul>
</div>

**Agrega donde se indica la URL del enlace que tendrá el anuncio así como el texto correspondiente.

Para los anuncios de imágenes:

<ul id='portfolio'>
<li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
<li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
<li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
<li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
<li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
</ul>

De igual modo agrega las URL de los enlaces así como las URL de las imágenes.

Dentro del primer código hay unas opciones que podemos personalizar y son las que están en color azul.
animationtype Es el efecto, con slide aparecerá como diapositiva y con fade con desvanecimiento.
speed es la velocidad en milisegundos.
timeout es el tiempo en milisegundos que se muestra cada anuncio.
type define en qué orden se muestran, random es aleatorio y sequence es consecutivo.

Sacado de ciudadblogger

Enviar contenido de Facebook a Twitter

noreply@blogger.com (Elisabeth) — Tue, 18 Jan 2011 15:01:12 PST

Paseando por Oloblogger vi un post q me ha llamado mucho la atención y precisamente es lo q estaba buscando y seguro q a más de uno le vendrá bien.

Resulta que es fácil conseguir que tus tweets se publiquen en tu muro de Facebook mediante la aplicación que podeis encontrar en el segundo: http://apps.facebook.com/twitter
Sin embargo, la tarea inversa (Facebook -- Twitter) no es que sea difícil ¡es que parece imposible!

La cosa es que desde finales de Agosto del año pasado, accediendo a http://www.facebook.com/twitter, se puede encontrar una aplicación para hacer esto con vuestras páginas de fans. Ojo, sólo con páginas.

Para ir más rápido, nos logueamos en Twitter y en Facebook y tras acceder al enlace anterior, la primera pantalla que aparece es la de arriba. Con pinchar en Vincula una página a Twitter, pasamos a la siguiente. Y esta es la del problema. Aquí se supone que selecionamos la página a vincular, pero debido a un bug, os podeis tirar toda la vida pinchando que ahí se queda.

La resolución es de lo más peregrina: se pincha en Vincular con Twitter -- No pasa nada --Se pincha otra vez pero con botón derecho -- Abrir en nueva pestaña -- ¡Voilá! Ya estamos en la pantalla para seleccionar qué cosas queremos que se publiquen en nuestro Twitter.

Muchas Gracias a Oloblogger por este post.

Mostrar la Lista de Blogs en movimiento

noreply@blogger.com (Elisabeth) — Tue, 04 Jan 2011 04:14:34 PST

Desde el Escaparate de rosa nos llega esta interesante entrada.

Es un efecto no muy complicado de conseguir, utilizando la etiqueta "marquee".

[1] Antes de nada tendremos que añadir el gadget "Lista de blogs" y configurarlo tal como vemos en la imagen para añadir el código necesario, una vez conseguido el efecto del movimiento podremos editar el gadget de nuevo si así lo queremos.

[2] Una vez añadido y configurado el gadget de esta manera, vamos a Diseño - Edición HTML y marcamos la opción de "Expandir las plantillas de artilugios".
Tendremos que localizar el código del gadget y añadir el código necesarios tal como veis destacado en color:

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"'>
<center><marquee direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='5' bgcolor = '#faf0e6' style='border: #cdaf95 2px solid;padding-left: 10px;' width='260'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == "true"'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>
<div class='item-content'>
<b:if cond='data:showItemThumbnail == "true"'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == "true"'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != ""'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == "true"'>
<b:if cond='data:showItemTitle == "true"'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == "true"'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>

<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems > data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + "_show-n"' style='display: none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + "_show-all"' style='margin-left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>
</marquee></center>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Modificaciones:
height='300' Es el alto del gadget, a mayor valor, más altura y viceversa.
width='260' Es el ancho del gadget, a mayor valor, más anchura y viceversa.
bgcolor = '#faf0e6' Color de fondo del gadget. Si no queremos usarlo eliminamos ese código (bgcolor = '#faf0e6'). Para cambiar el color, sustituimos el código del color (#faf0e6) por el escogido.
border: #cdaf95 2px solid; El borde del gadget. Si no queremos borde, ponemos su valor (2px) en 0, si lo queremos más o menos ancho, aumentamos o disminuimos ese valor. Para cambiar su color, colocamos en #cdaf95, el código del color escogido.
scrollamount='5' Velocidad de desplazamiento, aumentamos o disminuimos el valor (5) para variar la velocidad.
direction='up' Dirección del desplazamiento, en este caso hacia arriba, si ponemos down en lugar de up, el desplazamiento será hacia abajo.

Muchas Gracias a Rosa por enseñarnos tanto

Nuevo Foro By Elismur ;)

noreply@blogger.com (Elisabeth) — Mon, 03 Jan 2011 15:43:58 PST

Hola a todos, quería haceros partícipes de mi nuevo proyecto, he creado un foro sobre informática, es del nuevo módulo que estoy haciendo, Administración de sistemas en Red, en ella vamos poniendo apuntes del curso, ejercicios,tutoriales .... y vamos subiendo muchos programas interesantes para que se puedan descargar y utilizar

Bien pues esta es la dirección :

http://foroasir.tk/ o en esta otra http://asir-alcantara.foroactivo.com/

Si os interesa este mundo ya sabeis, os invito a participar en el foro, registrarse y listo !!!

Besitos a todos y FELIZ NAVIDAD !!!!