Gem@ BLOG

Fondos diferentes para el blog

2009-11-07T19:53:00.000-08:00

Últimamente he visto varios sitios donde proporcionan fondos para el blog, el último es Welcome To My Blog son fondos que se pueden añadir partiendo de un código que son los estilos necesarios para añadir el fondo en body.

body {background-image:url("url de la imagen de fondo");

background-position: center;

background-repeat: no-repeat;

background-attachment: fixed;

}

Seguido de los estilos casi siempre trae otro añadido, se trata de una imagen que se sitúa en un sitio determinado a modo de botón de enlace con la página de fondos que igualmente son los créditos del autor.

<div id="tag" style="position:absolute; left:0px; top:30px; z-index:50; width:150px; height:45px;"><a href="url-página" target="_blank"><img src="url-imagen-botón" border="0" /></a></div>

Los estilos se añaden en un elemento de página o gadget de HTML, para ello es necesario añadir primero <style type="text/css"> luego los estilos y a continuación cerrar con la etiqueta </style>

Todo el código se proporciona en un textarea de forma que con copiar y pegar ya tenemos el fondo añadido a nuestro blog.

La idea es buena porque evita añadir el fondo en la plantilla, aunque no se trate de un gran cambio los que comienzan valoran mucho ese detalle.

En las páginas que he visto los diseños están creados con scrap, una técnica que cosiste en decorar con recortes de fotos, textos, accesorios y papeles decorativos. Al añadirse el fondo fijo el resultado es muy atractivo.

El único inconveniente si es que puede llamarse así es que para que los fondos se adapten adecuadamente se deben añadir en una plantilla Minima o al menos que reúna las medidas de esa plantilla es decir 660px de ancho.

El blog en distintas resoluciones de pantalla

2009-11-07T17:34:00.000-08:00

Que utilizar diferente navegador puede darnos alguna sorpresa que otra de todos es sabido, con la resolución de pantalla ocurre algo muy similar.

Antes me veía en la necesidad de cambiar mi resolución para ponerme en el lugar de otra persona e intentar visualizar el blog igual que ella. A partir de hoy será distinto gracias a Filigrana que a raíz de un comentario aportaba una página para mí desconocida.

Si, yo también desconozco la existencia de muchos sitios interesantes y agradezco que me informen.

La página en cuestión se llama ViewLike.us es un servicio muy útil cuando se trabaja con páginas web. Ingresando la url del blog podemos comprobar como se ve en distintas resoluciones incluso en iphone.

Prepárense algunos para llevarse sorpresas.

Piano stairs - TheFunTheory.com - Rolighetsteorin.se

2009-11-06T15:38:00.000-08:00

REFERENCIA:Quintolandia

Escribiendo sobre una imagen.

2009-11-05T22:09:00.000-08:00

Hace tiempo veíamos la forma de añadir texto sobre una imagen, al parecer el tema no quedó demasiado claro respecto como por ejemplo estilos para la fuente del texto o posicionar ese texto a nuestro antojo.

Lorem Ipsum is simply dummy text of the printing and typesetting industry..

Lorem Ipsum has been the industry's standard dummy text...

Para el ejemplo añadimos lo siguiente:

<div style="float: left; position: relative;">

<img alt="texto-imagen" src="url de la imagen" />

<div style="color: black; font-family: Courier; left: 20px; position: absolute; top: 55px; width: 150px;">

Lorem Ipsum is simply dummy text of the printing and typesetting industry..

Lorem Ipsum has been the industry's standard dummy text...

</div>

</div>

Y entendemos lo que añadimos.
-Subimos la imagen al editor de entradas, en la pestaña de Edición de HTML copiamos la url de la imagen y la añadimos donde dice "url de la imagen"
-Con la propiedad float estamos adaptando el texto respecto al fondo, al escoger left lo adaptamos a la izquierda, si fuera a la derecha sería right.
-En la propiedad position escogemos absolute para ubicar el texto en un lugar concreto.
-En style="color: black; font-family: Courier; es el sitio que podemos añadir estilos para la fuente siempre separados por por punto y coma ";"
-En la misma línea de los estilos de fuente añadimos el espacio de separación del extremo ya sea izquierdo (left) o derecho ( right) indicando los pixels (left: 20px; para el ejemplo)
-Al igual que dimos un espacio de separación a los extremos lo hacemos del borde superior top: 55px; si el texto cubre todo el espacio de alto de la imagen añadimos espacio inferior con bottom: xx;
-Decidimos también el ancho que medirá el texto, lo haremos añadiendo width: 150px a más o menos anchura para el texto modificamos el valor de 150px

De regreso

2009-11-05T15:43:00.000-08:00

De regreso después de una semana en la que no he podido conectarme y respondiendo a las preguntas interesándose por mi ausencia...

Lamento de veras esos comentarios y mails sin responder que en breve tendrán respuesta.

Enlaces para visitar

2009-11-02T15:17:00.000-08:00

Cambiar una palabra por un logo o una imagen

Aviary edición de imágenes online

Navbar transparente Blogger

Live Banner Maker

FREE CSS - templates y plantillas GRATIS

Guía para ofrecer suscripción por email paso a paso

Destacar los enlaces

Utiliza jQuery & Scriptaculous... simultáneamente

¿Cómo roban las contraseñas de Hotmail, Gmail, Yahoo y Facebook?

Otimizar as imagens - tamanho e formato

Oh, The Temptation

2009-11-01T07:22:00.000-08:00

"Si te doy una nube y no te la comes te regalo otra nube"

Imágenes extra grandes en Blogger

2009-10-29T18:40:00.000-07:00

Leyendo el título cualquiera diría que Blogger está dando pasos agigantados, y es cierto.Pero un día da dos pasos adelante y al otro retrocede tres.

Cuando añadió el formulario incrustado nos sorprendió gratamente a todos, se veía la intención de mejorar las carencias tan necesarias. Paciencia, nos decíamos, ya se dieron cuenta que estamos aquí.

Lo último ha sido algo nuevo, algo inútil y algo que no funciona.

Podemos ver lo nuevo accediendo desde Blogger in draft en el editor de entradas hay una nueva opción cuando subimos una imagen, antes el tamaño mayor era de 400. Ahora, podemos añadir imágenes "Extra grandes" de 640 ojito con ese tamaño que no quiere decir que todos podamos mostrar ese tamaño de imágenes.

¿Por qué? porque si nuestro espacio para las entradas (main-wrapper) es menor de 640px las imágenes tomarán el espacio que les falta y desplazarán aquello que tengan más cercano, la sidebar o el propio contenido de las entradas.

Lo inutil es este aviso que podemos ver accediendo también por Blogger in draft si, ya sé que por ese medio tenemos acceso a las cosas que están en fase experimental ¿sólo lo vemos los usuarios? porque lleva allí más de una semana y nadie hace nada al respecto.

Consultado con J.Miur me aclara que está relacionado con la la Ubicación.

Plantilla de diseño/Entradas del blog/Editar/Ubicación

Pero no se cansen que aunque no esté marcado y eliminen la parte correspondiente a la plantilla seguirá saliendo.

Mucha euforia, bombo y platillo, no dábamos crédito al avatar de comentarios, y en cierto modo no es extraño porque no hay que dar crédito a algo que ha sido un visto y no visto.

El "estamos solucionado el problema" dura ya dos semanas ¿o quizás más?

Ese icono rojo con la ramita blanca soy yo

Iconos sociales y Halloween

2009-10-29T17:03:00.000-07:00

Three Styles

the Iconfactory

artdesigner

Otras formas de añadir estilos a las listas

2009-10-28T19:31:00.000-07:00

Visitando Cosas Sencillas he visto un enlace a Marcofolio donde habla de "8 formas diferentes de añadir bonitos estilos a nuestras listas". Con Explorer el efecto del siguiente ejemplo se pierde, pero aún así no he podido resistirme a probarlo.

Estilos CSS antes de ]]></b:skin>


/* LIST #8 */
#list8 {  }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;
  text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover {  -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
  -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
  transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

En HTML:

<div id="list8">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

Bave Circus

2009-10-26T19:22:00.000-07:00

REFERENCIA:Punto geek

Favicon en la sidebar

2009-10-24T17:52:00.000-07:00

k_nelita me ha pedido que explique la forma de añadir un sistema de publicidad creado con esas pequeñas imágenes de 16x16 que conocemos por favicon.

Los favicones están incluidos en una tabla.

<table fcellpadding="0" align="center">

<tbody>

<tr>

<td>

<td>

<td>

<td>

<td>

<td>

<tr>

</tr>

<td>

<td>

<td>

<td>

<td>

<td>

</td></tr>

</tbody>

</table>

</div></div>

La vamos a incluir en un gadget de HTML y las filas de la tabla dependerán de la cantidad de líneas de favicones que deseamos añadir.

En la tabla del ejemplo añadí dos líneas para tres favicones en cada línea, pero podemos aumentar la cantidad de favicones dependiendo del ancho de la sidebar.
El código para cada favicón lo añadimos entre <td> y <td>

Cuando los favicones cubren una línea pasaremos a la línea siguiente, las etiquetas <tr> y </tr> serán las encargadas de producir el salto de línea..

El favicon es un enlace que nos llevará a la url que le indiquemos.

Le añadimos target="_blank" para que abra en ventana nueva, también le podemos añadir la etiqueta rel="nofollow" para que Google no tenga en cuenta esos enlaces, eso ya dependerá de cada uno.

<a href="ur-pagina" target="_blank" rel="nofollow" title="título">
<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

Guardamos los cambios y añadimos los estilos, nos dirigimos a plantilla Edición de HTML y justo antes de ]]></b:skin> añadimos:

.favicon {

padding:2px;

text-align:center;

}

.favicon a img {

background-color: #fff;

border:1px solid #ccc;

padding:2px 2px;width:16px

}

div.side-favicon {

background:#FFFF;

border:1px dashed #C0C0C0;

margin:0 0 20px;

padding:4px 4px;

}

Con "background" podemos cambiar el color de fondo, el tipo de borde y color en "border"

Premio 20 Minutos Mejor Blog 2009 ¡¡para Oloman !!

2009-10-22T19:02:00.000-07:00

Oloman sonriente (y no es para menos) recoge uno de sus premios

Tres premios, no uno, ni dos, sino TRES son los premios que nuestro amigo Oloman ha conseguido.

Mejor blog 2009: Diploma acreditativo, estatuilla, 3.000 euros y una columna del periódico 20 minutos de papel.

Mejor blog de Ciencia y Tecnología: Diploma acreditativo y estatuilla.
Mejor diseño: Diploma acreditativo y estatuilla.

Los premiados de la noche

FELICIDADES Oloman, ahora ya no tienes esa ventaja que decías tener porque te voy a reconocer cualquier día por la calle FELICIDADES también al resto de los galardonados.

Fotografías de Jorge París, fotógrafo oficial del evento, obtenidas en El blog de blogs de Pablo Fernández.

Últimas entradas con miniatura y animación

2009-10-21T18:00:00.000-07:00

Abu Farhan a añadido al widget inicial de entradas con miniatura un afecto animado creado por las API de Google y jQuery eso hace que el efecto sea rápido y a la vez resulta muy atractivo y llamativo pero quiere decir también que si tenemos en nuestro blog otra librería pueden crearse conflictos entre ellas.

En Plantilla de diseño editamos un nuevo gadget de HTML.

En su interior añadimos el código que podemos copiar desde aquí, una vez añadido buscamos donde dice:

home_page = "http://www.raudhatulmuhibbin.org/";

ahí sustituimos la url marcada en negrita por la de nuestro blog.
Guardamos los cambios y lo podemos ver funcionado en segundos.

La personalización no varía de cualquier widget exceptuando que podemos personalizar los colores, fuente y fondo del widget
.

boxwidth = 255; Ancho del widget.	cellspacing = 6; Velocidad del efecto.	borderColor = "#232c35"; Color del borde.
bgTD = "#0000"; Color de fondo del widget.	imgwidth = 50; Ancho de la miniatura de imagen.	thumbheight = 70; Alto de la miniatura.
fntsize = 12; Tamaño de fuente de los títulos	acolor = "#666"; Color del título de entrada.	aBold = true; El título, con false eliminamos el texto negrita.
text = "comments"; El texto de comentarios.	showPostDate = true; Fecha de los post. Si ponemos False no se muestra la fecha.	summaryPost = 40; Número de carácteres del resumen.
summaryFontsize = 10; Tamaño de texto del resumen.	summaryColor = "#666"; Color de texto del resumen.	numposts = 10; Es el número de post que veremos.

Imagen fija para Twitter

2009-10-21T14:55:00.000-07:00

Casi todos tenemos el enlace a Twitter en nuestra sidebar, pero hay otra forma de añadirlo para que siempre esté visible, la idea es la misma de la imagen fija al final del blog. En esa imagen añadimos el efecto deslizante porque se trataba de un efecto pero al tratarse de un simple enlace la podemos añadir sin efecto fijándola en un punto en concreto.

En un gadget de HTML añadimos:

<div id="twitterfijo">

<a style="display:scroll;position:fixed;bottom:345px;right:0px;" href="url-twitter">

<img src="url-imagen"/></a>

</div>

Si en lugar de añadirlo en un gadget preferimos añadirlo a la plantilla, podemos hacerlo justo antes de:
<div id='main-wrapper'>

La altura la escogemos en bottom:345px y la anchura right:0px
Hay que intentar que la imagen quede pegada al blog y no sobre el blog, de lo contrario es posible que se "esconda" detrás de algún bloque que tengamos añadido.
Puede verse funcionando en este ejemplo.
Se puede añadir cualquier otra imagen y enlazar cualquier otro sitio que no sea Twitter.

En Todo Twitter podéis encontrar gran surtido de iconos y lo último en herramientas y utilidades para Twitter.

IE Tab extensión de Firefox

2009-10-19T17:07:00.000-07:00

Con frecuencia nos llevamos una desilusión cuando visualizamos nuestro blog con distinto navegador. Luego viene la pregunta ¿Por qué se ve tan mal con Explorer si en Firefox se ve estupendo?

Que ningún usuario de Explorer se ofenda pero es así, se pueden contar las veces que me comentaron lo contrario, no vamos a hacer un debate sobre navegadores, ni una encuesta tampoco.

Lo que puede ser estupendo para unos es desastroso para otros y viceversa. Si usas Explorer y eres de los que piensan que es más rápido y seguro estupendo, sigue usándolo. Yo soy usuario de Firefox y me gusta, no pienso cambiar a un navegador que no refleja los cambios en mi blog tal y como los hago.

Hay opiniones variadas y todas tienen sus argumentos así que este es el mío, aclaro esto porque pienso que cada uno puede usar el que mejor le convenga respetando siempre la decisión y opinión de los demás.

Los usuarios de Firefox tenemos a nuestro alcance una extensión llamada IE Tab, la extensión agrega un botón en la barra de estado para cambiar el motor de renderización de la página que estamos visitando, nos permite de esta forma visualizar la página con Explorer y con un click regresar a Firefox.

De todas las extensiones pienso que es la más útil cuando hacemos cambios en el blog, ya no es necesario cambiar de un navegador a otro cerrando y abriendo ventanas.

Si eres de los que espera al día siguiente para ver su blog desde la oficina también debes saber que puedes tener Explorer instalado en tu PC y al mismo tiempo instalarte Firefox, de esta forma los puedes usar simultáneamente o mejor aún con la extensión IE Tab.

Efecto Toggle en los gadgets de la sidebar

2009-10-17T17:02:00.000-07:00

Parece que últimamente todos nos pusimos de acuerdo en preguntar de qué forma se consigue el efecto deslizante en los gadgets de la sidebar, en concreto el de Directorios. Así que vamos a explicarlo y los interesados ya pueden ponerse manos a la obra.

El efecto deslizante se consigue con las API de Google. El API de bibliotecas AJAX carga las bibliotecas JavaScript de software libre más populares entre ellas Prototype y Scriptaculous, eso nos evita buscar alojamientos externos y su funcionamiento es mucho más rápido.

Vamos a necesitar Prototype y Acriptaculous y las añadiríamos justo antes de </head> lo siguiente:

google.load("prototype","1.6.0.3");

google.load("scriptaculous", "1.8.2");

</script>

Con anterioridad lo añadimos en los siguientes ejemplos (si ya lo tuviéramos no es necesario volver a añadirlo)

Ir a inicio con efecto deslizante
"Imagen multiusos"
Subir y bajar con efecto deslizante
Efecto deslizante en los archivos de la sidebar

Para crear el efecto deslizante en los directorios o cualquier otro gadget lo que haremos será añadir un título al gadget para localizarlo con más facilidad.

En plantilla de Edición de HTML los gadgets se muestran como widgets más o menos así:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML1' locked='false' title='Directorios' type='HTML'/>

<b:widget otro gadget/>

<b:widget otro gadget/>

<b:widget otro gadget/>

</b:section>

</div>

Si marcamos para expandir la plantilla veremos que a cada widget le preceden unas líneas, en ellas veremos la etiqueta <data:title/> es la que genera el título del gadget.

Añadiremos Effect.toggle de Scriptaculous que nos permite mostrar y ocultar con distintos efectos cualquier contenido.

En nuestro código añadiremos lo marcado en negrita:

<b:widget id='HTML1' locked='false' title='Directorios' type='HTML'>

<b:includable id='main'>

<a href='#' onclick='Effect.toggle(&quot;Directorios&quot;,&quot; appear &quot;); return false'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'>[+/-]<data:title/></h2>

</b:if>

</a><div align='center' id='Directorios' style='display: none;'>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

 Debemos tener en cuenta que cada id debe ser único, si ya tenemos un id llamado Directorios no podemos crear otro con el mismo nombre.
 El título, hace las veces de enlace, no hay problema si no deseamos añadir [+/-]porque seguirá funcionando. Si preferimos sustituirlo por una imagen es conveniente sea tipo icono para que el tamaño no se vea desproporcionado.
<img src="url-imagen"/>
También podemos situarlo a la derecha del título, es decir a la derecha de <data:title/>

Rosa  explicó en su momento la forma de añadir el efecto slide en cualquier gadget incluidas las etiquetas.
Visitando a J.Miur podemos ver en sus ejemplos los distintos efectos que podemos añadir  appear, slide  o blind .
 appear  es el que viene definido en los pasos que seguimos anteriormente si deseamos cualquier otro simplemente debemos sustituir el nombre del efecto que en el código está marcado con fondo azul, como ejemplo sería algo así:
DEMO con appear

No hay dos sin tres

2009-10-16T18:18:00.000-07:00

Tengo la sensación que el fin de semana se presenta largo, el avatar de los comentarios no está funcionando. Por lo pronto yo recomendaría no tocar nada referente al avatar, a lo mejor hasta consiguen solucionarlo.

Por otra parte Fileden sitio donde algunos de nosotros decidimos alojar nuestros archivos está de mantenimiento, un mantenimiento que dura ya dos días.He optado por sustituir la url de los archivos por los que tenía en otro alojamiento, aún así si veis algo que no funciona o algún archivo que no podéis descargar me lo podéis comunicar que inmediatamente los sustituiré por otro.
Por esto y por lo que pueda surgir, paciencia...

Paginación en Blogger » Widget

2009-10-14T17:19:00.000-07:00

Hace unos días añadíamos el sistema de etiquetas relacionadas con miniaturas de imagen, más conocidas por Thumbnails.

El autor de ese widget y de este que hoy veremos es Aneesh de Blogger Widgets, en su entrada nos proporciona el widget con esta imagen y podemos añadirlo con un simple click. El wuiget se adapta a los colores del blog, es decir adquiere los colores que tengamos determinados respecto a los enlaces.

También ofrece las explicaciones para añadirlo manualmente y de esta forma poder acceder a los estilos, en este caso haremos lo siguiente.
Nos situamos justo antes de ]]></b:skin> y añadimos los estilos:

.showpageArea a {

text-decoration:underline;

}

.showpageNum a {

text-decoration:none;

border: 1px solid #cccccc;

margin:0 3px;

padding:3px;

}

.showpageNum a:hover {

border: 1px solid #cccccc;

background-color:#cccccc;

}

.showpagePoint {

color:#333;

text-decoration:none;

border: 1px solid #cccccc;

background: #cccccc;

margin:0 3px;

padding:3px;

}

.showpageOf {

text-decoration:none;

padding:3px;

margin: 0 3px 0 0;

}

.showpage a {

text-decoration:none;

border: 1px solid #cccccc;

padding:3px;

}

.showpage a:hover {

text-decoration:none;

}

.showpageNum a:link,.showpage a:link {

text-decoration:none;

color:#333333;

}

No te olvides que, cuando marcamos

para expandir la plantilla

los errores

nos juegan
malas pasadas

¿tienes ya una copia?

Seguidamente buscamos </ Body> y justo antes añadiremos:

<!--Page Navigation Starts-->

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<script type='text/javascript'>

var pageCount=5;

var displayPageNum=5;

var upPageWord =&#39;Previous&#39;;

var downPageWord =&#39;Next&#39;;

</script>

<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v2.js' type='text/javascript'/>

</b:if>

var pageCount=5; Determina la cantidad de post a mostrar.
var displayPageNum=5; Aquí determina la cantidad de números adicionales que se mostrarán

var upPageWord ='Previous'; El texto Previus (Anterior)
var downPageWord ='Next'; El texto Next sería (Siguiente)

Una vez realizados estos cambios nos encontraremos con un problema, Blogger muestra 20 post por página y tenemos que reducir esta cantidad para que la paginación sea variable.Para solucionarlo nos situamos en plantilla Ediciónde HTML y marcamos para expandir la plantilla.

Buscamos <a expr:href='data:label.url' rel='tag'> y lo sustituimos por

<a expr:href='data:label.url + "?&max-results=5"' rel='tag'>

en max-results= 5 será el número de post en cada página.

Si fuera el caso que estamos usando el widget de nube de etiquetas de phydeaux3, también debemos buscar: a.href = '/search/label/'+encodeURIComponent(t);
y sustituirlo por:

a.href = '/search/label/'+encodeURIComponent(t)+'?&max-results=5';

Bietemplates plantillas para Blogger

2009-10-12T16:50:00.000-07:00

REFERENCIA:Bietemplates

Iconos EMAIL

2009-10-12T15:21:00.000-07:00

Format: 1 eps/svg, 1 png
Resolution: png @ 550dpi (7639×7639)
Size: 9,4 Mb
Vectors + PNG
Descarga: DragonArtz Designs

Traductor y buscador en menú del header

2009-10-08T18:48:00.000-07:00

Añadir un menú en el header es algo sencillo, pensé que personalizarlo con la herramienta de fuentes y colores lo haría aún más sencillo y así fue.

A petición de Javi vamos a añadir a ese menú un traductor con imagen de banderitas.

Primeramente añadimos el menú siguiendo los pasos de esta entrada, una vez lo tenemos añadimos el traductor.

Buscamos en plantilla Edición de HTML el lugar de los enlaces y añadimos lo que está en negrita.
ver código

Para enlazar las imágenes nos dirigimos a Google traductor y allí introducimos la url de nuestro blog, escogemos por ejemplo español-inglés, marcamos en Traducir y copiamos la url de la barra del navegador. Si tenemos problemas con la url porque es muy extensa podemos acortarla en http://liurl.com/

Esa url es lo que pegaremos en lugar de url-página--traductor1 lo haremos así con cada uno de los idiomas.

Añadimos ahora el buscador justo después del traductor.Lo haremos de la siguiente forma:
ver código

Donde gemablog-.blogspot.com/ lo sustituimos por la url de vuestro blog (sin http)
Con el traductor y el buscador nos resultaría más o menos así:

ver código

Para que el buscador luzca le añadimos unos estilos donde incluiremos una imagen de fondo, los añadimos justo antes de ]]></b:skin>

#b-query {

background:transparent url(http://1.bp.blogspot.com/_q4j3j-JA2ro/Ss5n3W3TLxI/AAAAAAAAL-E/euOu4R2WC4k/s320/search.gif) no-repeat scroll 0 0;border:medium none;

color:#000;font-family:Georgia,serif;font-size:15px;

width:210px;

float:right;

margin-right:16px;

margin-bottom:10px;

}

Al añadir una imagen, la de este buscador o cualquier otro es posible que tengamos que dar más altura al menú en:

.menu {

width:660px;

height:27px; /* Probar con más altura */

background: $menubgColor;

border: 1px solid $menumainBorderColor;

}

Wallpapers » Rojos

2009-10-07T16:53:00.000-07:00

Descarga:

Una historia XL

2009-10-07T10:19:00.000-07:00

Próximamente Seat lanza una campaña publicitaria, como muchas campañas el objetivo es dar a conocer un producto, en este caso se trata de el nuevo Altea XL para ello ha decidido pisar a fondo y crear un spot publicitario titulado Oh, Brother cuya duración es de algo más de 2 minutos.

Debido al argumento y la duración más bien se podría catalogar de un corto donde se cuenta la historia de una familia que adopta a un tierno e inofensivo monstruo que un buen día aparece en su hogar. Todo va bien hasta que el nuevo miembro de la familia va adquiriendo un tamaño gigantesco y se ven en la necesidad de dejarlo en casa en lugar de acompañarles como hacía habitualmente.

Al terminar el anuncio descubrimos el motivo de esta campaña publicitaria dejando buen sabor de boca debido al final feliz.

En mi opinión se trata de un anuncio que tendrá éxito, no es el clásico anuncio que vemos del coche circulando por la carretera con un guapo y trajeado conductor, aunque el producto está dirigido a adultos creo que el argumento y la música gustará a grandes y pequeños.

Quizás se haga un poco pesado si lo reproducen con demasiada frecuencia, es un error que suele cometerse.

¿Qué os parece a vosotros?

Blog2Print imprimir el blog en un libro

2009-10-04T19:05:00.000-07:00

Leyendo a Alejandro de Spam Loco me llamó la atención su entrada sobre Blog2Print.
En Blog2Print tenemos la posibilidad de imprimir nuestro blog de Blogger.com, podemos obtener un vista previa y los resultados en mi opinión son excelentes. El procedimiento es muy sencillo, añadimos la url del blog y marcamos las siguientes opciones.

Imprimir todos los temas, o sólo algunos.
Escoger en el almanaque las fechas comprendidas en nuestro blog que deseamos imprimir.
Si deseamos imprimirlo por orden cronológico (El más antiguo hasta la fecha actual)o del más reciente al más antiguo.
Nos ofrece una serie de texturas para las tapas así como subir una imagen desde nuestro PC, y un espacio donde incluir un máximo de 350 carácteres para el prólogo.

¿Nos estamos preguntando el precio? el más económico cuesta $14.95, es de tapa blanda y 20 páginas, si deseamos tapa dura hay un incremento de 10 dólares, cada nueva página cuesta $0.35.

Por $7.95 podemos ordenarlo en formato PDF.

El capricho sale caro dependiendo claro está de las páginas a imprimir, si nuestro blog es como la biblia se trata de pensarlo aunque también podemos hacer una selección de los temas que más nos interesen.

De todas formas me parece muy curioso y como comenté a Alejandro un detalle original para regalar y que nos regalen.