Iconos navideños

Silent Night 10 Christmas

REFERENCIA: ArtDesigner.lv

Tutorial de Adobe Photoshop para crear el árbol de Navidad.

Fur.ly » acortar varias URL's en un solo link

Fur.ly es un servicio muy especial, que no sólo sirve para acortar URL's, sino que podremos agregar varias direcciones y todas ellas se acortarán en un sólo link.
Prueba el servicio y verás lo útil que te resulta.

Fur.ly

Gifs animados: Arboles de Navidad

Son 16 imágenes animadas de Arboles Navideños.

Botón derecho del mouse, Guardar imagen como...

Aprendiendo de los niños

Clic en la imagen para ver video.

Las reservas de agua potable de la Tierra se encuentran amenazadas por el consumo excesivo y por la presencia de contaminantes. Todos podemos realizar acciones para cuidar el agua:

• Evitar pérdidas en las cañerías y en el hinodoro
  
• Reparar los cueritos de las canillas que gotean
  
• Usar detergentes biodegradables
  
• No dejar canillas abiertas sin necesidad
  
• Lavarse los dientes con la canilla cerrada, solo abrirla para enjuagarse la boca
  
• No tirar basura a la playa ni a los cursos de agua
  

Luces de Navidad en el blog

El sitio que preveía el script para mostrar las luces de Navidad ha cerrado, por lo que este truco no funciona más. Sin embargo, hay otro método para mostrar Luces de Navidad.

Todavía faltan algunas semanas para que llegue la Navidad y muchos ya desean empezar a decorar el blog con motivos navideños.
Un decorado muy sencillo pero llamativo es este ligero script que muestra luces de Navidad de colores que se prenden y apagan muestrando un destello. Ver blog de pruebas.

Para ponerlo en tu blog entra en Diseño | Edición de HTML y antes de </head> pega lo siguiente:

<script type='text/javascript'>
//<![CDATA[
// Luces de Navidad de Snowy Sites
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(o(){c l=0;c e=0;c 7=k H();c 5=k H();5[0]=k n();5[0].w=m;5[0].h=t;5[0].j=\'11\';5[1]=k n();5[1].w=m;5[1].h=t;5[1].j=\'10\';5[2]=k n();5[2].w=m;5[2].h=t;5[2].j=\'13\';5[3]=k n();5[3].w=m;5[3].h=t;5[3].j=\'X\';L=o(){D(c 6 12 7){c d=(6%4);f(7[6].9.a.p.R(\'P\')==-1){7[6].9.a.p=\'y(z://u.B/7/\'+5[d].j+\'V.A)\'}C{7[6].9.a.p=\'y(z://u.B/7/\'+5[d].j+\'T.A)\'}}};M=o(6){c d=(6%4);c G=((6%2)?\'U\':\'P\');7[6]=k n();7[6].9=8.Y(\'Z\');7[6].9.a.15=\'14\';7[6].9.W=\'J\'+6;7[6].9.a.16=Q;7[6].9.a.I=\'S\';7[6].9.a.F=((6-1)*5[d].w)+\'v\';7[6].9.a.p=\'y(z://u.B/7/\'+5[d].j+\'1a\'+G+\'.A)\';7[6].9.a.1o=\'1n-1m\';7[6].9.a.1k=\'F I\';7[6].9.a.1l=5[d].w+\'v\';7[6].9.a.1q=5[d].h+\'v\';7[6].9.17=5[d].j+\'J\';8.g.1r(7[6].9)};E=o(){1s=1p;f(b.8.O>l)l=b.8.O;f(b.8.s.q>l)l=b.8.s.q;f(b.8.g.q>l)l=b.8.g.q;f(b.8.N>e)e=b.8.N;f(b.8.s.r>e)e=b.8.s.r;f(b.8.g.r>e)e=b.8.g.r;8.g.a.1i=\'1b\';c K=1j.19(e/m);D(c i=1;i<=K;i++)M(i);18(\'L();\',1c)};x=o(){f((1d 8.g!=\'1h\')&&(8.g!=1g))E();C 1f(\'x();\',1e)};x()})();',62,91,'|||||light_types|light_id|lights|document|elm|style|window|var|cur_light|browser_w|if|body|||color|new|browser_h|30|Object|function|backgroundImage|clientHeight|clientWidth|documentElement|31|snowysites|px||_lights_wait_for_body|url|http|png|com|else|for|_start_lights|left|cur_light_status|Array|top|light|top_amount|_blink_lights|_create_light|innerWidth|innerHeight|off|10001|indexOf|0px|_top_on|on|_top_off|id|blue|createElement|DIV|green|red|in|yellow|absolute|position|zIndex|className|setInterval|ceil|_top_|0px|500|typeof|100|setTimeout|null|undefined|paddingTop|Math|backgroundPosition|width|repeat|no|backgroundRepeat|true|height|appendChild|_snowylights_started'.split('|'),0,{}))
//]]>
</script>

Si quieres que las luces queden forma flotante de manera que cuando se baje la página se sigan viendo entonces cambia donde dice absolute por fixed

Tipografías gratuitas

Angelic War

Birth of a Hero

VAL Stencil

Please Show Me Love

Champagne & Limousines

Justice

Gorros de Papa Noel para esta navidad en formato PNG

Botón derecho del mouse, Guardar imagen como...

Las ideas son infinitas.


Ejemplos:

Ver más gorros y otras entradas para la Navidad

Iconos RSS -Twitter- Facebook

Mullidos, esponjosos, confortables, familiares...

Algunos les llamamos cojines, otros almohadones y casi todos tenemos en casa uno favorito.

RSS, Facebook y Twitter tres iconos que podemos obtener simplemente guardando la imagen en nuestro PC.

También podemos usarlos en casa y adquirirlos en Craftsquatch

Crear una página de fans en Facebook

Hoy vamos a ver cómo crear una página de fans para nuestro blog.

1.§ Lo primero que hacemos es acceder a Facebook con nuestro correo y contraseña de siempre y luego entramos a esta página de Facebook.

2.§ Veremos que aparece una página con dos formularios, uno llamado "Página de la comunidad" y otro "Página oficial". Usaremos el que dice "Página oficial".

3.§ Ahora marcamos la opción Marca, producto u organización y de la lista desplegable damos click en Sitio web; llenamos el apartado llamado Nombre de la página con el nombre de nuestro blog y marcamos la opción donde indicamos que somos representantes del blog, en este caso, tal como lo muestra la siguiente imagen:

Click en la imagen para ampliar

4.§ Damos clik a Crear una página oficial y con eso termina el proceso; nuestra página ya ha sido creada ahora sólo debemos cargar alguna imagen (puede ser la cabecera de nuestro blog) llenar algunos datos y, claro, darla a conocer en nuestro blog para que los seguidores de nuestro blog puedan hacerse fans.

Mostrar la fecha en todas las entradas

Cuando escribimos más de una entrada el mismo día Blogger por defecto nos muestra la fecha sólo en la última entrada, el resto de ellas queda sin fecha.

Para "corregir" esto podemos aplicar un sencillo script que nos explica Rosa y que hará que aparezca la fecha en todas las entradas, incluyendo las que se publicaron el mismo día.

Sólo basta con entrar en Diseño | Edición de HTML marcar la casilla Expandir plantillas de artilugios y buscar este código:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Lo eliminamos y en su lugar ponemos este otro:

<b:if cond='data:post.dateHeader'>
<script>var mismaFecha = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(mismaFecha);</script>
</h2>
</b:if>

Guardamos los cambios y listo. Tendrás la fecha en todas las entradas.

Ojo, si tu problema es que no ves la fecha en ninguna entrada entonces necesitas activarla entrando en Diseño | Elementos de la página, click en Editar sobre el elemento Entradas del blog y ahí marcar la casilla de la fecha.

Referencia | El escaparate de Rosa

Mejorar fotografías online

Improve Your Images es una herramienta de las que a mi me gustan es decir online, para no tener que descargar e instalar nada. En un minuto o menos podemos mejorar el contraste y color de las fotografías, lo único que hay que hacer es subir la imagen y una vez nos da el resultado guardarla en nuestro PC. Prueba y me dices si estoy exagerando.

Poner fondo gradiente en el título de la columna lateral en las nuevas plantillas y más

Ahora que estuve trabajando en el diseño de la plantilla Atheros, use fondos gradientes en los títulos de las columnas, usando una propiedad CSS3.



Es muy fácil de aplicar, no necesitarás usar una imagen (menos peso de almacenamiento), ahora es posible usarlos sin ningún inconveniente, ya que pueden ser visualizados en todos lo navegadores, gracias a un filtro disponible para internet explorer.



Así se veí la pantilla de prueba, antes de aplicar los gradienes:

Ventajas de esto:

• No necesitas entrar al código de tu plantilla y volverte loca(o) con tantos códigos

• No necesitaras crear una imagen

• Te ahorras la imagen y por lo tanto no requerirás de alojamiento externo

• Destacarás el titulo de cada elemento de la columna(s) lateral(es)

• Podrás modificarlos cada vez que se te antoje, siguiendo los mismos pasos

• Verás los resultados mientras estés agregando los estilos

• Lo aplicarás de una manera rápida, sencilla y con bonitos resultados

¿Te gusta?,  entonces ¡manos a la obra!, para lograrlo vamos a aprovechar la existencia de este generador de gradientes,  del cual ya estoy perdidamente enamorada, (que le vamos a hacer) y luego teniendo el código,  lo colocarás dentro de los estilos, las características o las propiedades (como lo quieras llamar) del título de la(s) columna(s).



Nota: te recomemiendo eliminar las medidas de ancho y alto del gradiente en el generador.



COMO APLICARLO EN LAS NUEVAS PLANTILLA DE BLOGGER



Estuve inspeccionando el código de las plantillas nuevas, y en casi todas,  no tienen estilos asignados específicamente para los títulos de las columnas laterales (en cualquier posición), solamente los tienen en las etiquetas de título en general (heading tags), y excepto en una que otra plantilla, donde los asignan como:  .main-inner .widget h2 sin embargo han sido muy pocos los estilos añadidos, así que aprovecharemos para crear los propios a nuestro antojo.



Veamos como lograrlo:



Paso 1. Ve a este generador de gradientes y crea tu gradiente, puedes usar las bases que ya existen o crear el propio.

Paso 2. Copia el código de tu gradiente (donde dice CSS) en el porta papeles.



Paso 3. Ve Diseño►Diseñador de plantillas y luego selecciona la opción avanzado, después añadir CSS

Paso 4. Escribe en el bloque disponible para agregar CSS, los estilos para los títulos de las columnas:



.sidebar h2 {

height: 32px; /* puedes cambiar el alto qu abarcará el fondo */

line-height: 190%;  /* para centrar el texto con respecto al fondo*/

padding-left: 5px; /* para separar un poco el texto desde la izquierda */

}

Ahí mismo, pega el código para agregar el gradiente, que obtuviste con el generador, quedaría parecido a esto:

.sidebar h2 {

height: 32px;

line-height: 200%;

padding-left: 5px;

background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );

}

Aprovechando que estamos ahí, y que es muy sencillo crear texto hundido en los gradientes, agreagremos esto:

text-shadow: 1px 1px 1px #eee; 

Nota: Puedes agregar todos los estilos que se te vengan a la menta y que conbinen con tu plantilla, para ver tablas de todos los atributos visita w3schools ;).



Paso 5. guarda los cambios, haciendo click en  APLICAR EN EL BLOG.



COMO APLICARLOS EN OTRAS PLANTILLAS (VIEJAS, PLANTILLAS EDITADAS) :



Harás lo mismo, con la diferencia de que tendrás que ver como esta asignado o identificado, el nombre del título de la(s) columna(s).



Generalmente lo encuentras como:



.sidebar h2, #ads wrapper h2, siempre llevará la etiqueta h2.

Añadir fuentes de Google Font API al blog

Son muchos los que cuando ven una entrada con fuentes para descargar lo primero que preguntan es la forma de añadirlas al blog, no es posible hacerlo ya que son fuentes para utilizar con algún editor sin embargo  hace unos meses llegaron las fuentes de Google Font API una de las sorpresas menos esperadas y más gratificantes por parte de Google y que podemos ver en el directorio de Google Font .

JMiur nos explicaba de forma detallada los pasos a seguir para aplicar las fuentes a nuestro blog y nos descubría la posibilidad de previsualizar las fuentes de forma dinámica antes de tomar la decisión de añadirlas con Google Operating System.

Siguen llegando dudas sobre la forma de añadirlas al blog, la respuesta es que las añadimos con la propiedad font-family donde deseamos mostrarlas y ahí es dónde empieza el juego.

Nos situamos en plantilla justo antes de <b:skin>: y añadimos lo siguiente:

<link href=' http://fonts.googleapis.com/css?family=NOMBRE-DE-LA-FUENTE' rel='stylesheet' type='text/css'/>

Donde NOMBRE-DE-LA-FUENTE lo sustituimos por el nombre de fuente que escogimos en el directorio para el ejemplo escogí Tangerine así que añadimos el nombre en el código anterior y podemos guardar los cambios.

<link href=' http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'/>

Si nuestra fuente tiene espacios en el nombre sustituimos esos espacios con el signo + y si deseamos añadir más de una fuente las separamos con |

<link href=' http://fonts.googleapis.com/css?family=Tangerine|Droid+Sans' rel='stylesheet' type='text/css'/>

Ahora utilizaremos la propiedad font-family pero debemos saber dónde se encuentra esa fuente que deseamos cambiar. Seguimos con ejemplos siempre sobre una plantilla Minima.

Para el título del blog:

#header h1 {
font-family: 'Tangerine', century gothic, verdana;
......
}

Títulos de las entradas:

.post h3 {
font-family: 'Tangerine', century gothic, verdana;
......
}

Títulos de la sidebar:

.sidebar h2 {
font-family: 'Tangerine', century gothic, verdana;
......
}

Si tenemos columnas en el footer:

#col1 h2{
font-family: 'Tangerine', century gothic, verdana;
......
}

#col2 h2{
font-family: 'Tangerine', century gothic, verdana;
......
}

#col3 h2{
font-family: 'Tangerine', century gothic, verdana;
......
}

Desde ayer el diseñador de plantillas dispone de 40 nuevas fuentes así lo publica Blogger in draft y Oloman nos lo cuenta con todo detalle.

Etiqueta body en plantillas nuevas

No es la primera ves que me comentan: "no encuentro <body>"

El problema en las nuevas plantillas es que le han agregado unas clases.

No he estudiado todas las nuevas plantillas, así que puede variar.




Cuando tengan que buscar <body> y no se encuentre para poner un código debajo o dentro del cuerpo HTML buscar lo siguiente:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

O busquen solo:

<body

La etiqueta body es unica y no van tener problemas en encontrarla.

body = cuerpo