Consejos Blogger: diciembre 2010

viernes, 31 de diciembre de 2010

Optimizar el título en Blogger

Blogger utiliza el formato en los títulos de las entradas: ''Titulo Blog-Nombre de la entrada'', pero para nuestra desventaja, esto impide que nuestros artículos se agreguen al índice de los buscadores correctamente y por ende estos demoran mucho más en aparecer en los buscadores.

En este tutorial podrán optimizarlo de tal forma que quede tal y como se vé en la imágen superior (Título de la entrada antes del nombre del blog). Esto aumentará las probabilidades de que tus post sean encontrados mucho más facilmente en los buscadores.
Para cambiar el formato de los títulos:

Paso 1: Dirígete a la pestaña “Diseño” y posteriormente ingresa a la opción “Edición HTML”.
Busca el siguiente código:

<title><data:blog.pageTitle/></title>

Sustituye ese código por el siguiente:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Gracias a esto los títulos de tus entradas en blogger se verán correctamente.
Recuerden que esto se aplica a las entradas, en las etiquetas y página principal sigue igual para evitar generar conflictos.
Siempre es conveniente que hagan un respaldo a la plantilla de su blog en caso de errores.

Cualquier problema o alguna duda, haz tu comentario.

.

Feliz 2011!!!

jueves, 30 de diciembre de 2010

Bienvenido 2011

Casi vemos el comienzo de un año nuevo, pronto seremos testigos del final de un año que termina, que pronto quedará atrás, que se va dejando recuerdos de momentos inolvidables que vivimos con mucha alegría, y otros tantos, que en más de una ocasión nos robaron el sueño, o más aún, que nos hicieron correr lágrimas por nuestros rostros. Todos esos momentos quedarán guardados en nuestros corazones, siendo prueba de que vivimos y que somos parte de una realidad que no puede ser ajena a la alegría como tampoco a la tristeza, al éxito como al fracaso, y al amor como al desamor.

Pero seguimos andando, el tiempo no se detiene y aún hay mucho por hacer, muchas cosas que aprender, muchos lugares y rostros por conocer, muchas cosas que soñar, y por supuesto, mucho que compartir y dar a los demás.

Brindemos por todo eso.

Espero sinceramente que este año que se avecina, sea mejor que el anterior en todos los sentidos, que sea una puerta que se abre al amor, a las oportunidades, y que esté colmado de alegrías, salud y éxitos.

¡Feliz año 2011!

Sinceramente tu amiga Karla.

¡Feliz Año Nuevo!

Quedan unas horas para el nuevo año, un año que todos esperamos con ilusión y la esperanza que se cumplan esos deseos que quedaron en el camino durante este año que termina.

Os deseo que este nuevo año sea generoso con todos y que la felicidad, salud, amor, trabajo y PAZ estén presentes cada instante.

Más fuegos pirotécnicos para el blog

Si te gustó la entrada anterior sobre los fuegos pirotécnicos en el blog usando un script, seguramente te gustará aun más esta opción que me ha compartido Emilio, pues las luces artificiales están hechas en Flash por lo que tiene una animación más vistosa y colorida.

Puedes ver el demo en este blog de pruebas.

Para colocarlo en el blog sólo entra en Diseño | Edición de HTML y antes de </body> pega lo siguiente:

<style>
.pirotecnicos {display:block;z-index:90;position:absolute;top:0px;left:0px;width:100%;height:900px;}
.pirotecnicos object{position:fixed;top:0px;left:0px;width:100%;height:900px;}
</style>
<div class="pirotecnicos">
<object type="application/x-shockwave-flash" data="http://dl.dropbox.com/u/647003/fireworks.swf" wmode="transparent">
<param name="movie" value="http://dl.dropbox.com/u/647003/fireworks.swf"/>
<param name="wmode" value="transparent"/>
<param name="quality" value="high"/>
</object>
</div>

Habiendo hecho esto ya podrás disfrutar de estos fuegos pirotécnicos en tu blog, pero si te preocupa la velocidad de la carga del blog (espero que sí) entonces puedes alojar el archivo flash en tu propio hosting para que así el ancho de banda de Dropbox (donde lo he alojado) no se vea afectado y no te perjudique la velocidad de la carga de tu blog.

Sólo descarga el archivo que se menciona más abajo, descomprímelo, súbelo a tu servidor y cambia las 2 URLs que están en color verde por la URL del archivo que subiste previamente.

Como estas luces son un archivo creado en formato SWF no hay muchas configuraciones que se le puedan hacer pero no habrá necesidad de hacerle nada por lo bien que están hechas y lo vistoso que se verá en tu blog.

NOTA: Las luces por defecto se mostrarán por encima de todo el blog, por lo tanto es muy posible que los links no puedan estar disponibles o que el texto no se pueda seleccionar.

Una opción para solucionar este problema es cambiar donde dice z-index:90; por z-index:-10;

Esto habilitará de nuevo todos los links y la selección de texto, sin embargo las luces se mostrarán detrás de todo el contenido por lo que no se podrán visualizar de manera completa.

Descargar | Archivo SWF

miércoles, 29 de diciembre de 2010

Fuegos pirotécnicos en el blog

Pues ya que está cerca la celebración del año nuevo veamos cómo poner un script que me compartió xulinho que hará que se muestren fuegos artificiales en el blog.

Es un efecto sencillo pero que puede hacer amenas estas fechas de celebración o cualquier otra. Puedes ver el ejemplo en este blog de pruebas.

Colocarlo es muy sencillo, sólo entra en Diseño | Edición de HTML y antes de </head> agrega lo siguiente:

<script type='text/javascript'>
//<![CDATA[
// Fuegos artificiales
var bits=200; // Número de puntos
var intensity=10; // Intensidad de la explosión (recomendado entre 3 y 10)
var speed=30; // Velocidad (a menor numero, mas rapido)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");
// Colores de los fuegos

var dx, xpos, ypos, bangheight;
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var decay=new Array();
var colour=0;
var swide=800;
var shigh=600;
function write_fire() {
var b, s;
b=document.createElement("div");
s=b.style;
s.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
b.appendChild(div("lg", 3, 4));
b.appendChild(div("tg", 2, 3));
for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));
}
function div(id, w, h) {
var d=document.createElement("div");
d.style.position="absolute";
d.style.overflow="hidden";
d.style.width=w+"px";
d.style.height=h+"px";
d.setAttribute("id", id);
return (d);
}
function bang() {
var i, X, Y, Z, A=0;
for (i=0; i<bits; i++) {
X=Math.round(Xpos[i]);
Y=Math.round(Ypos[i]);
Z=document.getElementById("bg"+i).style;
if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {
Z.left=X+"px";
Z.top=Y+"px";
}
if ((decay[i]-=1)>14) {
Z.width="3px";
Z.height="3px";
}
else if (decay[i]>7) {
Z.width="2px";
Z.height="2px";
}
else if (decay[i]>3) {
Z.width="1px";
Z.height="1px";
}
else if (++A) Z.visibility="hidden";
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity);
}
if (A!=bits) setTimeout("bang()", speed);
}

function stepthrough() {
var i, Z;
var oldx=xpos;
var oldy=ypos;
xpos+=dx;
ypos-=4;
if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {
for (i=0; i<bits; i++) {
Xpos[i]=xpos;
Ypos[i]=ypos;
dY[i]=(Math.random()-0.5)*intensity;
dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;
decay[i]=Math.floor((Math.random()*16)+16);
Z=document.getElementById("bg"+i).style;
Z.backgroundColor=colours[colour];
Z.visibility="visible";
}
bang();
launch();
}
document.getElementById("lg").style.left=xpos+"px";
document.getElementById("lg").style.top=ypos+"px";
document.getElementById("tg").style.left=oldx+"px";
document.getElementById("tg").style.top=oldy+"px";
}
function launch() {
colour=Math.floor(Math.random()*colours.length);
xpos=Math.round((0.5+Math.random())*swide*0.5);
ypos=shigh-5;
dx=(Math.random()-0.5)*4;
bangheight=Math.round((0.5+Math.random())*shigh*0.4);
document.getElementById("lg").style.backgroundColor=colours[colour];
document.getElementById("tg").style.backgroundColor=colours[colour];
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
window.onload=function() { if (document.getElementById) {
set_width();
write_fire();
launch();
setInterval('stepthrough()', speed);
}}
//]]>
</script>

En color verde he puesto las indicaciones de la configuración del script.
Al igual que muchos de estos scripts las luces no llegan hasta abajo del blog; para modificar qué tanto abarcarán las luces se puede modificar donde está en negrita

var swide=800;
var shigh=600;

El primer valor es el ancho y el segundo es el alto.
¿Otra opción? Qué tal esta explosión de estrellas.

martes, 28 de diciembre de 2010

Suscribirse a entradas ATOM ocultar o cambiar por una imagen

Eliminar texto o enlaces que no vemos útiles en el blog es parte de la personalización. Quizás sea ese uno de los temas que más me gustan, la de personalizar o cambiar el aspecto del blog y que bueno tener la posibilidad de poder hacerlo.

Una de esas cosas que tenemos prisa por cambiar es el texto-enlace que nos ofrece la posibilidad de suscribirnos y está al final del blog algo así:

Normalmente decimos ocultarlo y para ello nos limitamos a buscar en los estilos lo siguiente y añadiendo lo marcado en negrita:

.feed-links {

clear: both;

line-height: 2.5em;

visibility:hidden;
display:none;

}

Con la llegada de las nuevas plantillas el proceso era el mismo sólo que se reflejaba de forma distinta con la misma solución.

.blog-feeds, .post-feeds {

margin: 1em 0;

text-align: center;

color: $(feed.text.color);

visibility:hidden;
display:none;

}

En lugar de ocultar esa parte podemos darle un aspecto distinto y mostrar una imagen o texto recordando que pueden suscribirse a nuestras entradas.
Nos situamos en plantilla edición de HTML y marcamos para expandir la plantilla.
Buscamos lo siguiente:

<b:includable id='feedLinksBody' var='links'>

<div class='feed-links'>

<b:loop values='data:links' var='f'>

<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'> <data:f.name/> (<data:f.feedType/>) </a>

</b:loop>

</div>

</b:includable>

Sustituimos lo marcado en negrita por un texto cualquiera, una imagen o las dos cosas:

Suscribirse a las entradas <img src='url-imagen'/> 

El resultado sería algo así:

No es nada del otro mundo pero se ve distinto como más personal ¿no?

Crear un peeling (esquina doblada) a la izquierda

Ya vimos en otra entrada cómo crear el efecto en la parte superior derecha.

Ahora veremos cómo se hace para mostrar el efecto en la parte superior izquierda.

Ver ejemplo:

Los cambios con el anterior son los siguientes:

Se muestra a la izquierda.
Podemos elegir la distancia a mostrar desde arriba y desde la izquierda.
Podemos dejarla fija arriba y que se deslize con la página.
Podemos mostrar un texto desplazandose por la imagen chica.
Podemos mostrar un texto desplazandose por la imagen grande.

¿Cómo se hace...?

Ahora copiaremos todo el contenido del siguiente código:

Peel-top-left.txt

Lo copiaremos en un editor de texto. (puede ser el Bloc de notas)

Lo personalizamos de la siguiente forma:

// Distancia desde arriba
var top = "0px"
//
// Distancia desde la izquierda
var left = "0px"
//
//
// cambiar: absolute: fijo arriba - fixed: se mueve con la página
var position = "position:fixed;"
//
// Flash pequeño
var smallflash ="http://img61.xooimage.com/files/1/9/4/smalltopl-23d29d8.swf"
//
// Imagen pequeña
var smallimg ="http://img61.xooimage.com/files/1/2/6/rss-0-23d2a54.png"
//
// Texto en la imagen pequeña
var scrolltxtsmall = "Suscribete"
//
// Tamaño del texto en imagen pequeña
var txtsizesmall = "20"
//
// Color del texto en imagen pequeña
var textcolorsmall = "FFFFFF"
//
// IMAGEN GRANDE CUANDO ABRIMOS
//
// Flash grande
var bigflash = "http://img51.xooimage.com/files/7/7/0/bigtopl-23d29cb.swf"
//
// Imagen grande
var bigimg = "http://img52.xooimage.com/files/8/5/4/rss-1-23d2a4f.jpg"
//
// URL al darle clic a la imagen grande
var urlval = "http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qygH"
//
// Forma de abrir
var owindow = "blank" // blank: nueva pestaña - self: en la misma
//
// Texto en imagen grande
var scrolltxtbig = " Suscribete para estar siempre actualizado..."
//
// Tamaño del texto en imagen grande
var txtsizebig = "50"
//
// Color del texto en imagen grande
var textcolorbig = "ff0000"
//

Los archivos flash pueden descargarlos y subirlos a su propio servidor:

Ya terminado de personalizar cambiando imágenes, texto, link, etc..., lo guardamos.

Al guardarlo ponerle el nombre con terminación "js"

Ejemplo: peel-top-left.js

Ahora lo subimos a un servidor.

Puede ser Xooimage.com

Si no saben como, ver el siguiente manual: Tutorial Xooimage

Ya subiro el archivo "js"

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

Poner el código así:

<script src='URL del archivo.js'/>

Cambiar: URL del archivo.js por el link propio.

Hacer Vista Previa y si todo quedo bien Guardar.

Tener en cuenta que la URL tiene que terminar en .js y no en .js/

Si lo suben a xooimage.com es el link generado al hacer clic sobre "Télécharger".

lunes, 27 de diciembre de 2010

Las mayúsculas y las minúsculas en las URLs

Las URLs son poco flexibles cuando se trata de que funcionen de manera correcta, ya sea para una imagen o un enlace deben de ser escritas de forma textual respetando cada caracter que contiene, incluso si estos caracteres son mayúsculas o minúsculas.

Por ejemplo, esta es la URL de una imagen:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio50QCJb0B7O6I-9qNN-6Wtm-MxAuf36QI0Vl6MTdar7Kut6x7e8WiEZmRG628bMUlgGaa5enN3kMMz3QsTqQdeQSeOise2fzrVoP0DF8EACSCizNb7rOULBQVCnQaeErl1b52yNjgPF3t/s320/Skate.JPG

Esa URL contiene signos, letras y números. Y en el caso de las letras hay tanto mayúsculas como minúsculas. ¿Qué pasaría si cambiara todas las letras a minúsculas? No mucho excepto que la URL simplemente dejaría de funcionar.

http://4.bp.blogspot.com/-aj4g31qffvg/utddwffr8-i/aaaaaaaai-s/1x6f9quakqq/s320/skate.jpg

Lo mismo sucede con las URLs de los enlaces, aunque no aplica para todos los casos sí aplica para las URLs de Blogger. Por ejemplo, yo tengo en el blog la etiqueta Plantillas con P mayúscula, por lo tanto esta URL funcionará:

http://ciudadblogger.com/search/label/Plantillas

Pero esta no:

http://ciudadblogger.com/search/label/plantillas

¿Qué ha cambiado? Sólo una simple y casi insignificante letra que pasó de mayúscula a minúscula, pero ese pequeñísimo cambio ha hecho que la URL deje de funcionar y ahora Blogger me dice que no hay ninguna entrada con esa etiqueta.

Sin embargo, aunque hayamos tenido el cuidado de escribir la URL respetando las formas de las letras seguro muchos notarán que en sus blogs algunas imágenes o enlaces no funcionan, y esto es porque sin importar cuántas veces lo intentemos al momento de guardar los cambios Blogger cambia todos los caracteres de la URL a letras minúsculas.

Ignoro a qué se deba esto y porque en algunos blogs suceda y en otros no, pero por suerte Aresil me compartió un tip.

Si eres de los que están teniendo problemas con las mayúsculas de las URLs al momento de guardar los cambios sólo hay que hacer una pequeña modificación en el código del enlace o de la imagen.

Las URLs las encerramos siempre entre comillas, simples o dobles, usualmente esto no importa, pero esta vez sí, ya que si usamos las comillas simples (') Blogger nos cambia todos los caracteres a minúsculas.

Pero si usamos comillas dobles (") misteriosamente Blogger respeta las mayúsculas y las minúsculas.

Por ejemplo, en lugar de usar la URL así:

<a href='URL de la imagen o del enlace'>

Hay que usarla entre comillas dobles, así:

<a href="URL de la imagen o del enlace">

Y habiendo hecho eso no habrá ningún problema con las mayúsculas y las minúsculas de las URLs por lo que podrán funcionar correctamente. Una solución bastante sencilla ¿no creen?

Y seguimos decorando

Aunque ya estamos llegando casi al final de la Navidad y quien más quien menos tiene decorado su blog no puedo dejar pasar esta oportunidad de mostrar la idea de Blogger Plugins añadir unas campanitas en cada extremo del blog y un efecto muy sutil de nieve.

Las dos cosas las podemos añadir con un simple click si accedemos a su blog y marcamos sobre el widget que él mismo ha preparado gracias a jQuery.

Si lo preferimos también podemos añadirlo accediendo a nuestro blog y en plantilla de diseño editamos un nuevo gadget de HTML, en su interior añadiremos lo siguiente:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> $("body").append($("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3i7g5aLW398-GQT4SnxyOlt9nvV2xryvu0HNs0-34gxIEaLePiGJ0p4iWw0vxRtg8yP_UdqPI4_uAXsdt9M4ByY2OSXYAwvYTpC2vrVb3Piq-YOfyI4eihFEKVwrl_24cXejhznT4sas/s1600/christmas-bells-icon.png' style='position:absolute; top: 0px;left:0px;border:none;'/><img id='xmasleftbell' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNisiItawZwzIyvuQBnIriKAmx_yH2PYaYPg7Z2Uwg5vQkF5G8RWdL4ION-FiuZX4uJD8QKn4UHdJ82yAILvqO8CgEC6i-ZzIDFf6ZHC_aysZVfr2vgqCDpaiiMvkCRIAWpT4VsC3bbiE/s1600/christmas-bells-icon-right.png' style='position:absolute; top: 0px;right:0px;border:none;'/>")); </script> <script src='http://blogergadgets.googlecode.com/files/snowfall.min.jquery.js' type='text/javascript'></script> <script type="text/javascript"> $(document).snowfall({flakeCount:199}); </script>

La url de las imágenes marcadas en negrita las podemos sustituir por cualquier otra.

sábado, 25 de diciembre de 2010

El almacén de los regalos perdidos

Si Noel pasó y olvidó dejar algún regalo el siguiente vídeo les mostrará a los niños donde están esos juguetes que nunca llegaron..

Ideal para estos días que los peques están en casa

viernes, 24 de diciembre de 2010

¡Feliz Navidad!

De todo corazón les deseo que tengan una Navidad llena de dicha, armonía y salud en compañía de sus seres queridos.

Les dejo un pequeño regalo, espero que lo disfruten y que se rían tanto como yo.

Click para abrir

¡Feliz Navidad!

jueves, 23 de diciembre de 2010

¡ Feliz Navidad !

Quiero en esta fecha tan especial desearles toda la felicidad del mundo y que una lluvia de bendiciones cubra sus hogares.

¡Feliz Navidad!

Les dejo un regalo: un video navideño.

miércoles, 22 de diciembre de 2010

13 Materiales para crear envolturas ecológicas para tus regalos de Navidad

¿Envolviendo regalos en últimos momentos?, tal vez hayas olvidado pasar a la tienda para comprar papel de regalo para los regalos que me faltan envolver. No te preocupes, tal vez entre las cosas que tienes en casa, puedes armar unas bonitas y originales envolturas para tus regalos.

¿Qué puedemos usar para envolver nuestro regalo de navidad y que a su vez no genere más desperdicios?

Puedes usar muchas cosas que ya tienes, entre ellas se encuentran

Papel del supermercado.

Periódico, ese que ya leíste

Yute, ese que te sobró de algún proyecto o manualidad, etc.

Tela de cortina transparente

u otra bonita que pueda servir

Ramas de pino o algo que se le parezca, esas que puedes cortar de tu jardín o del vecino, jojo

Rafia, esa que usas en tus manualidades.

Tiras de Canela, además tu regalo expedirá un bonito olor.

Hojas de tamal, esas que tenemos listas para la tamaliza :P

Piñas de pino, esas que te sobrarón cuando decoraste tu arbolito.

Ramas secas de cualquier árbol, esas del árbol que ya se quedo sin hojas, claro, busca un corte estético.

Cuerda de sisal delgada, esa fibrosa color café.

Listón de tela que pueda ser reutilizado, o bien que tu hayas reusado, por ejemplo, ese que te sobró de una manualidad, cuando decoraste tu arbolito, o que quitaste de algún objeto que tenías abandonado.

Cintas de tenis, esas que compraste y nunca usaste, tal vez, el que las reciba pueda usarlas :))

Y el resultado podría verse así:

Además, que tu regalo se verá muy original, natural, y por supuesto muy ecológico.

Así que no salgas de casa, y ponte a buscar en la alacena, en el garage, en tu closet o en cualquier otro rinconcito que uses para almacenar tus cosas ;)

La imagen la obtuve de: homemakers.

¡Feliz Navidad!

Feliz Navidad 2010

Que esta Navidad sea el principio de un sin fin de buenos momentos.

¡¡Feliz Navidad!!

100+ Animaciones navideñas para tu blog

Sé que a muchos les gustan las animaciones, y que son muy buscadas en ésta época navideña para engalanar el blog. Si has buscado y buscado, y nada parece convencerte, ve a éste sitio, en donde encontrarás una colección con más de 100 animaciones navideñas gratuitas y sin derechos de autor, para que puedas usar en tu blog siempre y cuando no sea un sitio comercial.

Puedes encontrar ángeles, arboles navideños, coronas navideñas, guias navideñas, velas con motivos navideños, monos de nieve, bolas de nieve, duendes, Santa Clous's, luces navideñas, bueno, de todo.

Algunas animaciones (gif's), además de prestarse para ser usadas en cualquier columna de tu blog, también pueden ser usados dentro de una marquesina, como el caso de santa_driving_car.gif, o el santa_sleigh2.gif.

Hay animaciones tan simpáticas, que inevitablemente soltarás la carcajada cuando las veas...sí que las hay para todos los gustos y sustos :)

¿Cómo pongo la animación en mi blog?

Paso 1. Primero, haz click en enlace del gif (en la columna de enlaces de los gif's a tu izquierda), para visualizar la animación .

Paso 2. Si usas Firefox, haz click en el botón derecho de tu mouse y seleccionas la opción guardar imagen como. Luego la guardas en una carpeta de tu computadora. Si usas Internet Explorer, igual haces click en el botón derecho de tu mouse, luego seleccionas copiar y luego lo pegas en una carpeta de tu computadora.

Paso 3. Sube la imagen a Blogger, para luego obtener su enlace. Si no sabes como obtener la URL de una imagen que has subido a Blogger, echa un vistazo a esta entrada.

Paso 4. Introduce la URL de la imagen, dentro del siguiente código:

Paso 5. Pega el código donde lo quieras mostrar dentro de los elementos de página, eligiendo la opción HTML/Javascript.

Paso 6. Guarda los cambios.

Nota: Si lo prefieres, puedes subir la imagen a la columna lateral u otra sección de tu plantilla, eligiendo la opción "Imagen" que Blogger ofrece al añadir un gadget.

¿Cómo poner la imagen dentro de una Marquesina?

S quieres poner el gif dentro de una marquesina, para que éste se desplace, deberás hacer lo mismo, sólo que ahora vas a usar este código:

Ejemplos

Usando el código anterior, y usando como ejemplo este Santa Moderno, al que el trineo ya no le funciona, y a optado por usar carro por aquello del tiempo (ah, eso sí, es híbrido), tu animación se desplazará así...

santa moderno

Atributos para la etiqueta marquee

♦ Si al código anterior, le agregas scrollamount="50" .

<marquee direction="right" scrollamount="50" ><img src="URL_DEL_GIF" alt="DESCRIPCION_CORTA_DEL_GIF"/></marquee>,

A Santa, parecerá que se le acaba el tiempo para entregar los regalos,... ¿o lo estarán siguiendo...?

santa moderno

♦ Si en lugar de direction="right" , pones direction="left" , o simplemente lo eliminas, ya que el valor "left" es por default...

o simplemente...

Santa, se desplazará hacia la izquierda. Ahora Santa anda de reversazo:

santa moderno

♦ Si en lugar de direction "right", agregas behavior="alternate"

<marquee behavior="alternate"><img src="URL_DEL_GIF" alt="DESCRIPCION_CORTA_DEL_GIF"/></marquee>,

Santa parecerá no decidirse a donde ir primero...

santa moderno

Puedes usar todos los atributos que quieras para tu marquesina; aunque no todos son soportados por todos los navegadres. Para aprender otros atributos de la etiqueta marquee, visita: Tutorialspoint o visita esta página en español.

Muy bien, ahora, relajate, acercate un buen café o cualquier otra bebida caliente ó bien helada ¿por qué no?, pon una buena almohada en tu silla y elige la animación que más te guste para ponerla en tu blog, que la Navidad casi se nos adelanta :D

Nota: Recuerda que lo resultados pueden variar de navegador a navegador.

Enlace del sitio: webdeveloper.com

martes, 21 de diciembre de 2010

A todos los que visitan el Blog

La Navidad

es una ocasión propicia,

para buscar
los mejores
Sentimientos
del corazón
y enviarlos
a las
personas
queridas.

La propiedad white-space

Una buena propiedad poco utilizada.

white-space: valor
Valores permitidos: normal | pre | nowrap | pre-wrap | pre-line
Definición: La propiedad white-space establece el tratamiento de los espacios en blanco.

normal: los espacios en blanco sobrantes y los saltos de línea se eliminan. No obstante, el texto se muestra en tantas líneas como sea necesario para que sus contenidos no se salgan del elemento contenedor.

Ejemplo:

[white-space: normal] Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.