BlogandWeb.com

Blog and web

2007-08-01T00:58:00.000-06:00

blogandweb.com

Blog and Web

2007-06-14T13:13:00.000-06:00

Esta todo listo, ahora Blog and web en:

BlogandWeb.com

Blogyweb a Wordpress

2007-06-12T19:05:00.000-06:00

Habrán notado que estos últimos días no ha existido mucha actividad en Blogyweb, la razón es que nos estamos mudando a Wordpress. Creo que blogger tiene mucho potencial, pero hace falta algo de control y optimización.

Estoy corrigiendo algunos errores producto de la exportación, espero en unos horas más darles la dirección e iniciar esa nueva etapa de Blog&web.

Por el momento cierro los comentarios en este blog y ya podremos continuar cualquier cuestión pendiente en la nueva dirección. También podrá ser accesible aun el blog, pero en tiempo más se redireccionará y la dirección del feed seguirá siendo la misma de feedburner.

Un saludo y gracias por visitar Blog&web.

Votación de artículos para Blogger y Wordpress

2007-06-07T22:38:00.000-06:00

Hace un tiempo te mostramos un sistema de raiting fácil de conseguir pero no tan sencillo de implementar, bueno pues Spotback es un sistema que si tienes ambas características, pues ya te provee de el código tanto para blogger como para wordpress y otros sistemas.

Ahora te mostramos como implementarlo en Blogger:

Entra a spotback y da click en "get a widget"

Aca tendras dos opciones, entrar a una galeria con varios diseños para el raiting de tus entradas o bien, usar el sistema clásico de estrellas. Yo te recomiendo entres a la galaria y uses el widget "Just Stars" (Sólo estrellas) que es sencillo y eficiente.

Seleccionado tu widget, ahora copia el código correspondiente a tu versión de blogger. Para el caso del widget "Just star" y el nuevo Blogger el código es:

<!-- Raiting de entradas -->
<b:if cond='data:post.dateHeader'><script>var sb_post_date = "<data:post.dateHeader/>";</script></b:if>
<script>var sb_url_to_rate = "<data:post.url/>";</script>
<script>var sb_rated_title = "<data:post.title/>";</script>
<script>try { var sb_dp = Date.parse(sb_post_date + ' ' + "<data:post.timestamp/>"); var sb_rated_creation = isNaN(sb_dp)? new Date() : new Date(sb_dp); } catch (e) { sb_rated_creation = new Date(); }</script>
<script src='http://spotback.com/scripts/widgets/load.js?wid=3183' ></script>
<noscript><a alt='Rate everything widget' href='http://spotback.com'><img alt='user rating' expr:src='"http://spotback.com/images/rating.gif?q=" + data:post.url'/></a></noscript>

Ahora entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML" y activa la casilla "Expandir plantillas de artilugios".

Después busca el siguiente código:
```
<p class='post-footer-line post-footer-line-3'/>
```
Y arriba de este código pega el del widget.

Guarda y listo!

La desventaja de estos sistemas es que sí la página o su base de datos se cae, también lo hará tu sistema de raiting pero en sistemas gratuitos sin acceso a bases de datos no hya muchas opciones.

Otro widget interesante de Spotback es Top Rated Sidebar para crear un recuadro con tus entradas mejor votadas.

Inspiración para crear botones

2007-06-07T21:51:00.000-06:00

Sí tienes pensado crear botones y necesitas algo de inspiración para crearlo, puedes consultar este par de colecciones, con muchos y muy variados diseños de varios sitios web. Obviamente no te dan un archivo fuente para crear el botón pero la cantidad de diseños pueden darte una idea para el estilo que quieres.

Colección general de botones
Sitio: http://www.dragnet.se

Colección de botones de carritos de compra
Sitio: http://www.getelastic.com

Vía: Intenta

Brushes para Photoshop de alta resolución

2007-06-07T02:19:00.000-06:00

Un set de 10 Brushes para Photoshop de alta resolución han sido puestos para descargar de forma gratuita en BittBox. Los brushes están disponibles para CS1, CS3 y en PNG, tienen un tamaño de 2500 pixeles y todos son hojas naturales.

Descargar librería para Photoshop CS3 (13.45MB)
Descargar librería para Photoshop CS1 (13.44MB)
Descargar en formato PNG (15.69MB)

Sitio: http://www.bittbox.com
Vía: Delirio Web

Remplazar texto con imagenes usando CSS

2007-06-06T00:57:00.000-06:00

Muchas veces tenemos la necesidad de remplazar texto con imagenes pero sin tener la posibilidad de hacerlo directamente o porque no nos resulta conveniente, caso frecuente en los sistemas de gestión de contenido (CMS) y en los logos.

En este artículo de mostraremos algunas técnicas para remplazar el texto con imagenes mediante CSS.

Remplazo mediante una identación alta.

La base de esta técnica es esconder el texto dando una idetación muy alta, de modo que el texto tenga que salir de la pantalla y se dimensiona la etiqueta al tamaño de la imagen y esta se declara como fondo.

Veamos un ejemplo, común en los encabezados de un sitio.

Código XHTML:
```
<h1 class='logo'>Título de la página</h1>
```
Código CSS para hacer el remplazo:
```
#logo {
/* dimensiones de la imagen */
widht: 150px;
height:100px;
/* identar el texto */
text-indent:-9000px;
/*mostrar la imagen*/
background:url(logo.gif) no-repeat 0 0;
}
```
Las desventajas de este método son que los usuarios con imagenes deshabilitadas en el navegador, no veran ni el texto original ni la imagen. Otra desventaja es que no es posible poner un link a la imagen.

Remplazo mediante un renglón alto

Al igual que la técnica anterior se busca esconder el texto sacándolo de la pantalla, pero la forma de hacerlo en esta es dando un tamaño exagerado al renglón, el texto en su posición por defecto es mandado al fondo y por tanto ya no es visible.

Veamos un ejemplo:

Código XHTML:
```
<h1 class='logo'>Título de la página</h1>
```
Código CSS para hacer el remplazo:
```
#logo {
/* dimensiones de la imagen */
widht: 150px;
height:100px;
/*agrandando el renglón*/
line-height: 1000px;
/*escondiendo el renglón*/
overflow: hidden;
display: block;
/*mostrar la imagen*/
background:url(logo.gif) no-repeat 0 0;
}
```

Remplazo por superposición

Esta técnica se basa en la superposición de capas de CSS y no oculta el texto, sino que le coloca una capa encima con la imagen de fondo.

Veamos un ejemplo:

Código XHTML:
```
<h1 class='logo'><span>Título de la página</span></h1>
```
Código CSS para hacer el remplazo:
```
#logo {
/* Dimensionar capa */
position:relative;
widht: 150px;
height:100px;
/* Evitar se agrande la capa */
overflow:hidden;
}

#logo span {
/* Encimar capa */
z-index:1;
display:block;
position:absolute; 
left:0; 
top:0; 
/* Dimensiones de la imagen */
widht: 150px;
height:100px;
background:url(logo.gif) no-repeat 0 0;
}
```
Esta técnica tiene la ventaja de mostrar el texto original cuando el usuario tiene desabilitadas las imagenes y la desventaja de que pueder tener problemas en versiones antigüas de IE.

Puedes encontrar más en Diseñorama

Como crear un widget para que agreguen un enlace a tu blog

2007-06-05T19:12:00.000-06:00

En este artículo te mostraremos como crear un widget(segmento de código) para que tus visitantes sólo tengan que pulsar un botón para agregar un enlace a tu blog en el suyo.

Entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio.

Da click en "Añadir un elemento de página" en la sección donde deseas tener el botón y selecciona "HTML/Javascript" como tipo de elemento.

Coloca en el título "Agreganos" o el mensaje que desees este sobre el botón o bien, deja en blanco (el botón ya traerá texto).

En el campo de "Contenido" pega el siguiente código:
```
<form action="http://beta.blogger.com/add-widget" method="post" target="_blank">
<input value="" name="widget.title" type="hidden" />
<textarea style="display: none;" name="widget.content">

<a href="http://TUBLOG.blogspot.com">TU BLOG</a>

</textarea>
<input value="Agrega a NOMBRETUBLOG a tu Blogroll" name="go" type="submit">
<input type="hidden" name="infoUrl" value="http://blogyweb.blogspot.com/2007/06/crear-un-widget-para-que-agreguen-un.html"/>
</form>
```
Donde tendras que hacer las siguientes sustituciones:

http://TUBLOG.blogspot.com - Por la dirección de tu blog.
TU BLOG - Por el nombre de tu blog o el código de una imagen. Esto será lo que aparesca en el blog de quien te agregue.
Agrega a NOMBRETUBLOG a tu Blogroll - Por el mensaje que quieras aparesca en el botón.

Este código funciona también para otros sistemas de blog y cualquier web, pero sólo podran agregarte los usuarios de Blogger.

Guarda y listo.

Y ya de paso:

Con lo que agregas un pequeño botón antipixel como el siguiente:

Espero no tengan problema.

Curriculum Vitae de un Blogger

2007-06-05T09:08:00.000-06:00

El boom de los blogs ha traído consigo una gran cantidad de formas de interacción y relaciones y entre ellas están las relaciones laborales, ya no es extraño ver puestos de trabajo solicitando un Blogger con dominio de cierta área o con ciertos intereses y aficiones.

Para ayudarte en la tarea de insertarte a la parte laboral como Blogger, los de Blogger profesional te proponen una plantilla para crear tu curriculum vitae, donde plasmas tu conocimiento sobre los sistemas de blogueo que dominas, los temas sobre los cuales podrías escribir con soltura, cuales son tus blogs, los idiomas en los que podrías escribir y tus datos personales.

El formato esta disponible en varios idiomas y en formato para Word, tal vez le falta un poco de diseño pero esta completo. Sí te interesa este tipo de trabajo existen buscadores especializados como Find a Blogger, trabajotech y Digital Jobs o buscar directamente en Google.

Sitio: http://bloggerprofesional.com/bloggers-cv-template

Concurso Blogueando hacia la fama

2007-06-04T20:01:00.000-06:00

Vía Blogmundi me entero de un concurso que podría interesarles a varios de ustedes, se trata de Blogging to Fame Awards 2007, que pretende premiar a Blog de buena calidad no tan conocidos, los requisitos para participar son:

Debes ser el propietario del blog para poder proponerlo.
El blog no debe tener más de 3 años de antigüedad.
Debe tener algunos meses en la web o por lo menos 10 artículos de calidad.
Sí es seleccionado por su equipo, sólo será exhibido una vez
El blog debe tener al menos 1 o 2 artículos por mes.

Y los premios no están nada despreciables, el primer lugar recibirá $25 000 USD, los siguientes 3 obtendrán $10 000 USD y los 5 mejores bloggers $5 000 USD. Y todos los ganadores una estatuilla y los gastos pagados para asistir a la entrega de premios.

Sí deseas participar tienes que registrarte.

Poner encabezado en las etiquetas de Blogger

2007-06-02T23:22:00.000-06:00

La introducción de la categorización por etiquetas en Blogger, sin duda fue una gran ayuda para la clasificación de la información de nuestro Blog, aun así creo que hay detallitos que harían un poco más amigable la navegación de los usuarios, Una de ellas es tener un encabezado en las etiquetas más importantes, es decir, que si tienes una sección llamada tecnología, sobre las entradas de la página de esta etiqueta halla una leyenda como "Estas en la sección de tecnología". Por ejemplo en nuestra sección de plantillas:

Veamos como hacerlo.

Entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML" donde activamos la casilla "Expandir plantillas de artilugios".

Buscamos el siguiente código:
```
<b:includable id='status-message'>
```
Debajo de este código colocaremos cada uno de los mensajes o imagenes que usaremos como cabecera en cada etiqueta, para lo que usaremos el siguiente esquema:
```
<b:if cond='"http://TUBLOG.blogspot.com/direccion-de-etiqueta" == data:blog.url'>


</b:if>
```

http://TUBLOG.blogspot.com/direccion-de-etiqueta

Ejemplo:

<b:if cond='"http://blogyweb.blogspot.com/search/label/CSS" == data:blog.url'>
<!-- Código de cabecera aquí -->
<h2>Estas en la sección de CSS</h2>
</b:if>

<b:if cond='"http://blogyweb.blogspot.com/search/label/Photoshop" == data:blog.url'>
<!-- Codigo de cabecera aqui -->
<img src='http://sitio.com/direccion-de-la-imagen'/>
</b:if>

http://sitio.com/direccion-de-la-imagen

Ahora busca el siguiente código:
```
]]></b:skin>
```

Justo arriba pega los siguientes estilos:

/*Estilos del contenedor de cabeceras de etiquetas*/
.status-msg-wrap { 
width:100% !important;
margin:0px !important
}
.status-msg-bg { 
background:transparent !important
}
.status-msg-border { 
border:none !important;
}

Guarda y listo!

Cualquier duda en los comentarios. Espero les sirva y no tengan problema.

Plantilla Blogy-Minyx

2007-06-02T21:15:00.000-06:00

Esta plantilla esta basada en "Minyx 2.0" de Storelicious para Wodpress, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons. Puedes utilizarla para fines personales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Storelicious.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='menu'>
  <ul id='mnuList'>
 <li id='current'><a href='#'>Inicio</a></li>
 <li class='page_item'><a href='#'>Blog</a></li>
 <li class='page_item'><a href='#'>Fotos</a></li>
 <li><a href='#'>Perfil</a></li>
 <li><a href='http://blogyweb.blogspot.com'>Soporte</a></li>
  </ul>
</div>

En ese código, cambia los signos # por tus links y guarda.

Para cambiar la dirección del feed lateral busca:

<p class='feed_icon'><a href='http://TUBLOG.blogspot.com/feeds/posts/default'>RSS2.0</a></p>

Y sustituye "TUBLOG" por esa parte que corresponde a la dirección de tu blog.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Plantilla Blogy-Dead

2007-05-31T14:08:00.000-06:00

Esta plantilla esta basada en "Decayed" de Arcsin, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Arcsin.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Plantilla Blogy-Puerto

2007-05-31T02:00:00.000-06:00

Esta plantilla esta basada en "Port Central" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id="menu">
  <ul>
 <li><a href="#">Inicio</a></li>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Fotos</a></li>
 <li><a href="#">Perfil</a></li>
 <li><a href="http://blogyweb.blogspot.com">Soporte</a></li>
  </ul>
</div>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Activar tu cuenta Adsense

2007-05-30T23:48:00.000-06:00

Te mostramos como Obtener una cuenta Adsense y si todo salio bien, debes tener en tu cuenta de correo una mail de bienvenida. Desde este mail tendras encontraras un enlace para activar tu cuenta que te lleva a la página principal de Adsense donde ya podras entrar con los datos de usuario y contraseña dados durante el registro.

Al entrar, se te mostrara el contrato de terminos y condisiones del servicio, donde después de revisarlos, marca la casilla y da click en "Acepto", bastante formal hacen el proceso, porque en realidad se trata de una relación de negocios.

Los aspectos principales en el panel de entrada son:

Informes. Como el nombre lo dice, son los informes del rendimiento de tu cuenta en un día, una semana, un mes o como tu lo desees. Generalmente desde la opción "visión general" se tienen la mayoria de los datos que uno de desea conocer.

Configuración de AdSense. Especificamente se trata de la configuración de los anuncios que deseamos mostrar, seleccionando que tipo de producto deseamos publicitar y su formato.

Mi cuenta. Desde aquí puedes manejar todos las datos referentes a tu cuenta, como tu información personal, la moneda y la forma de pago, tu información fiscal (escencialmente para EUA y Europa) y tu historial de pagos.

En siguientes artículos te mostramos como configurar tus anuncios y algunas recomendaciones.

Como pasar del Blogger clásico al nuevo Blogger

2007-05-30T19:13:00.000-06:00

En este artículo te mostraremos como pasar del Blogger clásico al nuevo. Es un método rápido y sencillo pero estoy seguro que servirá a más de uno.

Como sabrán algunos, Google dijo "El viejo Blogger ha muerto, larga vida a Blogger(nuevo)", artículo en que mencionan que el equipo de Blogger clásico esta practicamente desmantelado, con lo que se terminan las mejoras, correcciones y actualzaciones a este sistema. Esto nos obliga a que tarde o temprano tengamos que migrar al nuevo Blogger. Entonces, veamos como hacer el cambio.

Entra a la pestaña "Plantilla" (mismo nombre desde el escritorio) y después a la opción "Personalizar diseño". Aquí te aparece un cuadro de advertencia, donde te hablan del nuevo blogger y te invitan actualizarte, da click en "Actualizar la plantilla".

Lo siguiente es seleccionar un diseño, seleccionala y da click en "Guardar plantilla"

Y listo, ya estas en la nueva versión! Ahora estas en el panel de elementos de página donde al dar click en "Añadir un elemento de página" podras agregar widgets (trozos de código) con diferentes funciones en tu blog. La forma de uso es muy intuitivo y seguramente no tardaras mucho en manejar este nuevo Blogger.

Como decia en un artículo anterior, lo más sencible al hacer el cambio es la plantilla, en nuestra sección de plantillas encontraras varias opciones y Gema muestra otras más.

Creo que el cambio es de lo más necesario, espero no tengan problema.

Libro: Como hacer dinero en linea

2007-05-30T01:15:00.000-06:00

"Como hacer dinero en linea" es un libro de John Chow, quien afirma obtener ingresos mayores a los 10 000 dolares mensuales. Este libro esta enfocado al blogger y explica las técnicas que empleo para llegar a dicho nivel de ganancias, además hace un revisión de los principales sistemas para obtener recursos.

La descarga del libro es gratuita, se encuentra en ingles, en formato PDF, pesa 1.8 MB y esta dividido en 8 capítulos.

Descargar libro

Vía: Puntogeek

Plantilla Blogy-Webby

2007-05-29T21:45:00.000-06:00

Esta plantilla esta basada en "Webby blue" de Just Skins para Wodpress, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons. Puedes utilizarla para fines personales (no comerciales) con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Just Skins.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id="navi">
  <ul id="nav">
    <li class="page_item"><a href="#">Inicio</a></li>
 <li class="page_item"><a href="#">Blog</a></li>
 <li class="page_item"><a href="#">Fotos</a></li>
 <li class="page_item"><a href="http://blogyweb.blogspot.com">Soporte</a></li>
  </ul>
</div>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Google Maps a nivel de calle

2007-05-29T15:39:00.000-06:00

Hace unos años quede maravillado con Google Earth, en aquel entonces aun llamado KeyHole, desde entonces se ha venido mejorado bastante incorporando gráficos en 3D, estado de la circulación vial y ahora hasta una vista a nivel de calle. Como siempre, esta disponible sólo para algunas ciudades de los Estados Unidos como Las Vegas, San Francisco, Denver, Miami y Nueva York.

Sitio: http://maps.google.com/maps

Icono de alimentación (feeds) estandar

2007-05-29T13:13:00.000-06:00

Hace unos días buscaba el famoso botón naranja de alimentación o feeds y pretendía tomarlo de cualquier página, pero resulta que tiene su propio sitio de descarga: feedicon. Ahí puede encontrar este icono en los siguientes tamaños: 10x10 px, 12x12 px, 14x14 px, 16x16 px, 24x24 px, 32x32 px y algunos otros. Y en los siguientes formatos: PSD, PDF, PNG, JPG y GIF. Todo en un sólo archivo.

Particularmente útiles los archivos PSD con los cuales podemos personalizar el color del botón desde Photoshop. Aquí les dejo unos ejemplos que pueden usar en sus web o blogs.

Sitio: http://www.feedicons.com

Cambiar el link al feed de Blogger por el de Feedburner

2007-05-28T01:26:00.000-06:00

Blogger por defecto crea un enlace al feed de las entradas del blog en la parte inferior, pero sí usamos Feedburner para monitoriar y gestionar nuestros feeds, ese enlace no resulta de mucha ayuda, sin embargo el enlace de los feeds de los comentarios de cada post si lo es. En este artículo te mostraremos como cambiar el enlace del feed de las entradas sin afectar el enlace al feed de los comentarios.

Entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML" donde activamos la casilla "Expandir plantillas de artilugios".

Buscamos el siguiente código:

  <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>

Sustituye ese código con el siguiente:

<b:if cond='data:blog.pageType == "item"'>
<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>
<b:else/>
<b:loop values='data:links' var='f'>
   <a class='feed-link' expr:href='"http://feeds.feedburner.com/MIFEED"' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</b:if>

En ese código sustituye http://feeds.feedburner.com/MIFEED por la dirección de tu feed en feedburner. Es importante que mantengas las comillas como se muestra en el código.

Guarda y listo.

Ahora ese link será más útil. Ya de paso, sí quieres suscribirte a nuestro feed usa la siguiente dirección:

http://feeds.feedburner.com/RecursosBlogyWeb

Crea botones Web 2.0 en linea

2007-05-28T00:50:00.000-06:00

En nuestro artículo "Creación de botones en Photoshop" te mostramos como crear botones estilo Web 2.0 con Photoshop (además de brindarte el archivo PSD), pero si no usas el Photoshop y/o necesitar crear botones de forma rápida My cool buttom puede ayudarte. My cool buttom es un sitio con un generador de botones al que puedes escoger color, tamaño, icono e incluir tu texto, como el de la siguiente imagen:

Mientras lo usas te recomendamos uses el botón "Aply changes" para ir observando los cambios y al final sólo hay que dar click en "Download" para tener nuestro botón en formato PNG.

Vía: Digital Inspiration

Mejorar imagenes con niveles e igualación de colores en Photoshop

2007-05-27T23:32:00.000-06:00

Este es otro sencillo pero útil videotutorial de Jorge Llantén para mejorar el aspecto de imagen con el uso de niveles e igualación de colores en Photoshop. Son métodos rápidos pero muy efectivos, ahora sólo enciende tus bocinas.

Menú lateral fijo en Blogger

2007-05-27T21:59:00.000-06:00

La navegación de nuestro web o blog es un importante aspecto a cuidar, los menús son elemento importante de esta y aquí te mostraremos como colocar en tu web o blog un menú lateral fijo, es decir, que al bajar el scroll el menú continua en la misma posición.

El menú del que te hablamos es muy popular en blogs, además de práctico. Puedes verlo en la siguiente imagen.

Entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Buscamos el siguiente código:
```
]]></b:skin>
```
Para otros sistemas de blog diferente a blogger o en una web, ubica el lugar de tus estilos o tu archivo CSS.

Y justo arriba coloca:

#menulateral{
   position:fixed;
   text-align:left;

/*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
         margin-top:100px;
   margin-left:-28px;
}

* html #menulateral{  /*para IE*/
 position:absolute;
 }

#menulateral a img{
 opacity:1;
 -moz-opacity:1;
 filter:alpha(Opacity=100);
}

#menulateral a:hover img{
 opacity:0.8;
 -moz-opacity:0.8;
 filter:alpha(Opacity=80); 
 position:relative;top:0px;left:2px;
}

* html #menulateral a img{
 filter:alpha(Opacity=100);  
 }

#menulateral img{
 margin-bottom: -5px;
 }

* html .menulateral{
 margin-bottom: -3px;
}

Ahora buscamos el siguiente código:
```
<div id='content-wrapper'>
```
Para algunas plantillas podría ser mejor ubicar "<div id='outer-wrapper'><div id='wrap2'>". Para otros sistemas de blog o en una web ubica el div del contenedor principal.

Y debajo de ese código colocamos el siguiente:

<div id='menulateral'>
 <span>
 <a href='http://TUBLOG.blogspot.com/' style='border:0;' title='Inicio'><img alt='Inicio' class='menulateral' src='http://4.bp.blogspot.com/_Zuzii37VUO4/RlpT2Zya1AI/AAAAAAAABoI/6EXVwJ-0xxc/s1600/menu-lateral-inicio.png'/></a>
 <br/><a href='#BlogArchive1' style='border:0;' title='Archivo'><img alt='Archivo' src='http://3.bp.blogspot.com/_Zuzii37VUO4/RlpT2Jya08I/AAAAAAAABno/fEetH56Ftgw/s1600/menu-lateral-archivo.png'/></a>
 <br/><a href='mailto:TU-MAIL@servidor.com' style='border:0;' title='Contactame'><img alt='Contactame' class='menulateral' src='http://4.bp.blogspot.com/_Zuzii37VUO4/RlpT2Zya0-I/AAAAAAAABn4/F5Ax7A_8rLA/s1600/menu-lateral-contacto.png'/></a>
 <br/><a href='http://TUBLOG.blogspot.com/feeds/posts/default' style='border:0;' title='Suscribete a nuestro Feed'><img alt='Suscribete a nuestro Feed' class='menulateral' src='http://4.bp.blogspot.com/_Zuzii37VUO4/RlpT2Zya0_I/AAAAAAAABoA/HgSHFryV6kc/s1600/menu-lateral-feed.png'/></a>
 <br/><a href='#' style='border:0;' title='Arriba'><img alt='Arriba"' class='menulateral' src='http://4.bp.blogspot.com/_Zuzii37VUO4/RlpT2Zya09I/AAAAAAAABnw/38HqImjH21E/s1600/menu-lateral-arriba.png'/></a>
 </span>
</div>

En ese código haz las sustituciones siguientes:

http://TUBLOG.blogspot.com/ - Por la dirección de tu blog.
TU-MAIL@servidor.com - Por tu dirección de correo
http://TUBLOG.blogspot.com/feeds/posts/default - Sustituye "TUBLOG" por esa parte de la dirección de tu blog.

Guarda y listo.

Plantilla Blogy-Lindodía

2007-05-27T17:24:00.000-06:00

Esta plantilla esta basada en "Beautiful Day" de Arcsin, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Arcsin.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div class="navigation">
  <a href="#">Inicio</a>
  <a href="#">Blog</a>
  <a href="#">Fotos</a>
  <a href="#">Perfil</a>
  <a href="http://blogyweb.blogspot.com">Soporte</a>
  <div class="clear"></div>
</div>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Dar estilo a los links visitados con CSS

2007-05-26T20:01:00.000-06:00

Como muchos saben, mediante CSS es posible manejar la apariencia de los links, ya sean activos, al pasar el mouse encima y los visitados. Y en este artículo te mostraremos algunas opciones de estilos para los links ya visitados en nuestro sitio y de este modo ayudar a nuestro usuarios a diferenciar lo que ya vio de lo que no.

Efecto: Tachado
Ejemplo: Link visitado
Código:

a:visited {
text-decoration: line-through;
}

Es un efecto sencillo pero efetivo.

Efecto: Subrayado personalizado
Ejemplo: Link visitado
Código:

a:visited {
border-bottom: 1px dotted #6c6c6c;
text-decoration: none;
}

Sencillo y personalizable.

Efecto: Icono lateral
Ejemplo: Link visitado
Código:

a:visited {
padding-right: 12px;
background: url(http://1.bp.blogspot.com/_Zuzii37VUO4/RliVkJya0kI/AAAAAAAABks/zwQFwD937-g/s1600/icono-visitado.gif) no-repeat 100% 50%;
}

Es una forma más gráfica y muy personalisable.

Efecto: Texto indicativo.
Ejemplo: Link visitado YA VISITADO
Código:

a:visited:after {
content: " (YA VISITADO)";
font-size: 60%;
text-transform: uppercase;
color: #777;
}

Este método usa pseudoelementos, por lo que no funciona en las versiónes anteriores de IE7.

Son métodos faciles de utilizar y muchas veces muy utiles.

Encuentra más sobre esto en maratz

Plantilla Blogy-Tierra

2007-05-26T03:14:00.000-06:00

Esta plantilla esta basada en "Earthling" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<ul>
  <li class="first"><a title="" accesskey="1" href="#">Inicio</a></li>
  <li><a title="" accesskey="2" href="#">Blog</a></li>
  <li><a title="" accesskey="3" href="#">Fotos</a></li>
  <li><a title="" accesskey="4" href="http://blogyweb.blogspot.com">Soporte</a></li>
</ul>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Plantilla Blogy-Polen

2007-05-26T02:03:00.000-06:00

Esta plantilla esta basada en "Pollinate" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='menu'>
  <ul>
 <li class='active first'><a href='#' title=''>Inicio</a></li>
 <li><a href='#' title=''>Blog</a></li>
 <li><a href='#' title=''>Fotos</a></li>
 <li><a href='#' title=''>Perfil</a></li>
 <li><a href='http://blogyweb.blogspot.com' title=''>Soporte</a></li>
  </ul>
</div>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Dos veces más capacidad en adjuntos de Gmail

2007-05-25T20:59:00.000-06:00

Más Productos Google haciendo noticia, esta vez Gmail, quien ha duplicado su capacidad para enviar y recibir archivos adjuntos de 10 a 20 MB algo que va más acorde con la capacidad de los buzones y las necesidades de nosotros los usuarios.

Seguramente otros servicios imitaran esta estrategia y sólo con un resultado: mejor servicio a los usuarios. Mientras tanto, ya estrene esta mejora y me será de mucha utilidad.

Fuente: Blog Google México

Crea tu propio marcador de favoritos (social bookmarking)

2007-05-25T11:57:00.000-06:00

Estamos en pleno "boom" de los sitios de marcación de favoritos o social bookmarking como Technorati, del.icio.us o meneame. Desde hace un tiempo el sistema meneame libero su código para que todo mundo pudiera crear un sitio de este tipo, pero demanda un servidor, base de datos, un dominio, etc. En base a este código, noticia.es lanza un sistema totalmente gratuito en lo que sólo necesitas registrarte para obtener tu propio web de marcación de favoritos.

Puedes escoger entre cuatro diseños, además que lo puedes personalizar subiendo una archivo de estilos (CSS) e imagenes, puedes crear y eliminar categorías y todas las opciones del sistema meneame.

La idea es muy buena y me cae muy bien porque hace tiempo que quería iniciar un proyecto como este.

Vía: Fernan.com.es

Animación en tus imagenes

2007-05-25T11:39:00.000-06:00

Vía Xyberneticos encuentro Blingee, una sitio con una herramienta para agregar efectos animados en tus imagenes. El proceso es muy sencillo, sólo hay que subir una imagen desde nuestra PC o índicar su url, después escogemos entre los efectos (la mayoría muy femeninos) y cuando este lista la guardamos y descargamos, no sin antes registrarnos.

Además de dar efecto a tus imagenes puedes ver las que han creado otros usuarios y exponer las tuyas.

Sitio: http://blingee.com/blingee

Plantilla Blogy-Zen

2007-05-25T01:02:00.000-06:00

Esta plantilla esta basada en "Zenlike" de Nodethirtythree, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons. Puedes utilizarla para fines personales y comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Nodethirtythree.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id="menu">
 <ul>
  <li><a class="active" href="#">Inicio</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Fotos</a></li>
  <li><a href="#">Perfil</a></li>
  <li><a href="http://blogyweb.blogspot.com">Soporte</a></li>
 </ul>
</div>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Plantilla Blogy-Azul

2007-05-24T21:01:00.000-06:00

Esta plantilla esta basada en "Blueblog" de Free Css Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons. Puedes utilizarla para fines personales y comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free Css Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

     <div id='menu'>
   <ul>
  <li class='page_item'><a href='#'>Inicio</a></li>
  <li class='page_item'><a href='#'>Blog</a></li>
  <li class='page_item'><a href='#'>Fotos</a></li>
  <li class='page_item'><a href='http:'>Soporte</a></li>
   </ul>
 </div>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Plantilla Blogy-Portfolio

2007-05-24T14:28:00.000-06:00

Esta plantilla esta basada en "OnlinePortfolio" de Design4 para Wodpress, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons. Puedes utilizarla para fines personales (no comerciales) con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Design4.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div class="menuitems">
  <ul>
    <li class="page_item"><a href="#">Home</a></li>
    <li class="page_item"><a href="#">Blog</a></li>
    <li class="page_item"><a href="#">Fotos</a></li>
 <li class="page_item"><a href="http://blogyweb.blogspot.com">Soporte</a></li>
</ul>
</div>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Ganar dinero probando Blogger

2007-05-24T02:32:00.000-06:00

En el blog oficial de Blogger te proponen ganar $100 USD por "jugar en Blogger" o dicho en otras palabras, hacer una test (estudio) sobre su servicio.

Este test puede ser realizarse en las siguientes formas:

Desde tu computadora. Para lo que debes tener una conexión de banda ancha

Una visita a tu domicilio

Un examen en linea. (No sé que diferencia halla con el primer punto)

Visitar las oficinas en California. Sí vives cerca de estas.

Para postularte como candidato tienes que registrarte aquí y posteriormente llenar un cuestionario acerca de tu uso del internet, todo en ingles.

De acuerdo con el tipo de estudio que vallan a realizar, seleccionaran los perfiles que probaran Blogger en alguna de las formas listadas arriba. No es impedimento no vivir en los Estados Unidos para participar.

Por el momento ya me registre y habrá que esperar para ser alguno de los afortunados :D.

Fuente: Blogger Buzz

Usar Google Sitemap en Blogger

2007-05-24T00:33:00.000-06:00

Una forma de ayudar en la indexación de nuestro web o blog en Google es diciéndole que páginas tenemos, cuando las modificamos y cuando tenemos artículos nuevos. Esto se puede hacer con una herramienta creada específicamente para ello: Google Sitemap. Además de ayudarnos en la indexación, esta herramienta nos brinda estadísticas de nuestro web y un reporte de posibles errores.

Gracias al sistema que maneja Blogger y otros sistemas de gestión de contenido, usar esta herramienta es relativamente fácil y a continuación te la mostramos.

Ve a la página principal de Google sitemap y entra con tu cuenta Google (Blogger, Gmail, etc).

Encontraras un campo de texto, ahí escribe la dirección de tu blog: "http://tublog.blogspot.com".

Entraras a un panel con una advertencia, diciéndote que el paso siguiente es verificar que el sitio te pertenece. Entra a ese enlace.

Ahora te mostrará un cortina con dos opciones para verificar tu sitio, selecciona "Añadi una etiqueta META" (La otra no es posible con Blogger, pero si para cualquier otro sistema).

Después haber hecho click, en la misma página te muestra el código de la etiqueta META, copia este código (No cierres la página aun). En tu blog, entra a Plantilla ("Diseño" desde el escritorio) y de ahí a "Edición HTML". Ahí busca el siguiente código:
```
<head>
```
Y justo abajo, pega el código que copiaste para verificar.

En la página de Google sitemaps da click en el botón "Verificar". Sí hiciste todo bien te dirá que tu sitio a sido verficado.

Ahora, en la parte superior da click en la pestaña "Sitemaps" y dentro de esta, al enlace para "Añadir un Sitemap", ahora te pedirá seleccionar el tipo de sitemap, selecciona "Añadir un Sitemap web general". Al hacer esto te muestra un campo de texto para añadir la dirección url de tu sitemap, para blogger es:

http://TUBLOG.blogspot.com/atom.xml

Sustituye "TUBLOG" por esa parte de la dirección de tu blog y da click en el botón "Añadir un sitemap web"

Con esto queda activado el servicio y basta esperar algunas horas para que Google empiece a recolectar información de tu sitio.

El hecho de no tener que crear el sitemap a mano es una gran ventaja, para sitios web sin un sistema de publicación crearlo puede llevar un buen tiempo, como he tenido que hacer con algunos sitios. Pero vale la pena y es útil por la indexación y las estadísticas desde el punto de vista de un buscador como Google.

Feed Burner a manos de Google

2007-05-23T23:26:00.000-06:00

Uno de los sitios que gestionan feed más grandes de la red, FeedBurner, ha sido comprado por Google, lo que seguramente a mediano plazo representará en una mejora del sistema y del servicio a los usuarios.

Por ahora Google esta haciendo las cosas bien, pero su control crece y crece y cambios en su filosofía, sin duda tendrían consecuencias serias para todos.

Vía: Techcrunch

Plantilla Blogy-Árbol

2007-05-23T23:17:00.000-06:00

Esta plantilla esta basada en "Tree" de Headsetoptions para Wodpress, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons. Puedes utilizarla para fines personales (no comerciales) con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Headsetoptions.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Plantilla Blogy-Blix

2007-05-23T15:33:00.000-06:00

Esta plantilla esta basada en "Blix 0.9.1" de Sebastian Schmieg para Wodpress, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons. Puedes utilizarla para fines personales (no comerciales) con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Sebastian Schmieg.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='navigation'>
  <ul>
 <li class='selected'><a href='#'>Inicio</a></li>
 <li><a href='#'>Blog</a></li>
 <li><a href='#'>Fotos</a></li>
 <li><a href='#'>Perfil</a></li>
 <li><a href='http://blogyweb.blogspot.com'>Contacto</a></li> 
  </ul>
</div>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Libros de desarrollo web gratis

2007-05-23T12:25:00.000-06:00

Libros Web es una muy buena iniciativa que pretende traer al español libros sobre desarrollo web de forma gratuita, en este momento ofrece 3 libros para leer online.

Symfony, la guía definitiva

Traducción autorizada de "The Definitive Guide to Symfony". Conoce a fondo el mejor framework de desarrollo de aplicaciones web para PHP. Más de 450 páginas y cientos de ejemplos.

Introducción a CSS

Guía completa para aplicar estilos a las páginas web. Cubre la mayoría de propiedades de CSS 2.1. Incluye decenas de ejemplos.

Introducción a XHTML

.

Guía completa para diseñar páginas web. Explicaciones sencillas y más de 60 ejemplos. Crea páginas web accesibles y que validen.

Sitio: http://www.librosweb.es

Vía: Webmaster Libre

Que es lo que más se busca en Google día con día

2007-05-22T18:54:00.000-06:00

Sin duda que la información de lo que más se busca en Google es oro, muchas empresas orientan sus productos de acuerdo a esto y a nosotros como webmaster y/o blogger nos da valiosa información sobre usuarios potenciales.

Google hace un reporte anual con lo más buscado en cada país, el famoso Zeitgeist y recientemente inicio con Google Hot Trends un informe diario con los 100 términos más buscados día con día en su buscador.

Además que te muestra de forma gráfica el comportamiento de cada término durante el día. Por el momento sólo se encuentra disponible en ingles y para términos buscados en los Estados Unidos.

Sitio: http://www.google.com/trends/hottrends

Plantilla Blogy-Cajas

2007-05-22T18:00:00.000-06:00

Esta plantilla esta basada en "BoxedType" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id="pages">
 <h2>Páginas</h2>
 <ul>
  <li class="active"><a id="page1" href="#">Inicio</a></li>
  <li><a id="page2" href="#">Blog</a></li>
  <li><a id="page3" href="#">Fotos</a></li>
  <li><a id="page4" href="#">Perfil</a></li>
  <li><a id="page5" href="http://blogyweb.blogspot.com">Soporte</a></li>
 </ul>
</div>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Generadores de images de tu email

2007-05-22T00:17:00.000-06:00

Con todo el spam que ya hay en la web, con los cientos de spyders buscando mail para agregar a bases de datos de este tipo de basura, ya no es nada seguro dejar nuestro mail con el tipico:

<a href="mailto:mail_directo@al_spam.com">Mi@mail.com</a>

Y el uso de imagenes para remplazar el mail resulta una buena medida para evitarlos (al menos por ahora). A continuación te mostramos algunas web que generan estas imagenes al ingresar tu mail y el servicio al que pertenece.

E-Mail Icon Generator
Sitio: http://services.nexodyne.com/email
Genera imagenes de más de 20 servicios de correo, entre ellos los principales (GMail, Hotmail, MSN, Yahoo!, AOL, etc.) y la aloja en su servidor para usarla directamente.

E-mail Sigs
Sitio: http://esigs.brightdev.com
Genera imagenes de los principales servicios de correo y también la aloja en su servidos para usarla directamente.

Gmail Signature Generator
Sitio: http://www.email-x.net/gmailsig/gmail-signature.php
Como su nombre lo indica, genera imagenes unicamente de Gmail.

Edita y previsualiza HTML y CSS en linea

2007-05-21T22:43:00.000-06:00

Rendur es un sitio web que te permite editar tu código HTML y CSS pero con la particularidad de poder visualizar ese código conforme lo vamos escribiendo, además que puedes mover o redimensionar la subventana del editor para mayor comodidad.

Sitio: http://rendur.com

Vía: Leandono´s Blog

Los otros colores de la Web

2007-05-21T22:37:00.000-06:00

Los usuarios del internet son muy diversos, entre ellos, muchos usuarios con discacidad para captar colores, lo que hace dificil su navegación. Color Oracle es una herramienta que simula como ven ellos tu página y de este modo puedes ayudarle a tener una mejor definición, la herramienta es un freeware y se encuentra disponible para Windows, Linux y Mac

Sitio: http://colororacle.cartography.ch

Los mejores logos de la Web 2.0

2007-05-21T21:20:00.000-06:00

La web 2.0 ha tenido un impacto directo en la creación de logos para sitios, la diversidad en estos momentos es enorme y logotwo reune a varios de los mejores para que elijas los que más te agraden y votes por ellos. También es un buen lugar para agarrar inspiración (y no necesariamente piratear eh!) y darle un cambio a tu logo.

Sitio: http://www.logotwo.com

120 000 Formas (shapes) para Photoshop

2007-05-21T21:13:00.000-06:00

Las formas (shapes) de photoshop siempre me fueron útiles para crear siluetas o mascaras y ahora, me encuentro con este paquete de 120 000de ellas, dificilmente no encontrar lo que busquemos.

Descarga rapidshare

Vía: Xyberneticos

Optimiza los títulos de Blogger

2007-05-19T01:51:00.000-06:00

Habrás notado que al navegar en un blog de Blogger los títulos de la ventana siempre son "Nombre del blog: nombre de la entrada", algo poco importante para el usuario, pero si importante para los buscadores.

Los buscadores suelen dar mayor importancia a las primeras palabras del título, por lo que estamos en desventaja ante blog que tenga primero el nombre del artículo o etiqueta y después el título. Así que aquí te vamos a mostrar como optimizar los títulos de las entradas de tu blog.

Entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".
Buscamos el siguiente código:
```
<title><data:blog.pageTitle/></title>
```

Sustituye esa linea con el siguiente código:

<!-- Optimización del título en Blogger -->
<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='comments' var='post'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'><title><b:loop values='data:posts' var='post'><b:include data='post' name='post'/></b:loop> : <data:blog.title/></title></b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='status-message'/>
<b:includable id='feedLinks'/>
<b:includable id='nextprev'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='post' var='post'><data:post.title/></b:includable>
</b:widget>
</b:section>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<!-- Termina título optimizado -->

Guarda y listo!

Ahora todas tus entradas serán del tipo "título entrada: nombre del blog".

NOTA: Este código ocaciona que no se pueda guardar desde el panel de "Elementos de página". Puede ser muy útil y sí quieres usarlo, te recomendamos que lo hagas cuando hallas definido el arreglo de tu blog y volverlo a quitar cuando necesites hacer un cambio.

Vía: Widget-based

Como estar al tanto de los comentarios de tu Blog

2007-05-19T01:19:00.000-06:00

Uno de los problemas con los que te puedes topar en tu blog o web, saber donde y cuando se publican comentarios para poder responderlos, pero hay una herramienta que practicamente todos los sistemas de blog tienen y que pueden ayudarnos en esto: los rss.

La mayoría de los blogs crean estomáticamente rss de nuestros artículos, pero también lo hacen con los comentarios, por lo que podremos accesar a ellos desde nuestro lector de feed favorito, en mi caso, Google reader.

Para el caso de Blogger, la dirección rss de los comentarios es:

http://TUBLOG.blogspot.com/feeds/comments/default

Donde "TUBLOG" es precisamente, esa parte de la dirección de tu blog. Así por ejemplo, para agregarlo en Google Reader, entro al sistema, doy click en "Add subscription" y cada vez que ingrese podre ver los comentarios que se hagan en cualquier artículo de mi blog.

Juegos clásicos de Nintendo

2007-05-19T00:36:00.000-06:00

En Nintendo8 encontraras una gran cantidad de juegos de una de las primeras consolas de nintendo (la de 8 bits) para jugar en linea, sin bajar roms ni emulador. Tiene juegos super clásicos como Super Marios Bros 1, 2 y 3, Contra, Zelda, entre muchos más. A los que igual que yo, les toco esta consola, seguro les traerá gratos recuerdos.

Plantilla Blogy-Natural

2007-05-18T20:17:00.000-06:00

Esta plantilla esta basada en "Nature Nouveau" de Marten Timan para Wodpress, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons. Puedes utilizarla para fines personales (no comerciales) con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Marten Timan.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<li id='current'><span><a href='#'>inicio</a></span></li>
 <li><span><a href='#'>blog</a></span></li>
 <li><span><a href='#'>fotos</a></span></li>
 <li><span><a href='#'>soporte</a></span></li>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Actualización: Corregida status bar y color de título.

Plantilla Blogy-Neoneon

2007-05-18T12:57:00.000-06:00

Esta plantilla esta basada en "Neoneon" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='menu'>
  <ul>
 <li class='active'><a accesskey='1' href='#' title=''>Inicio</a></li>
 <li><a accesskey='2' href='#' title=''>Blog</a></li>
 <li><a accesskey='3' href='#' title=''>Fotos</a></li>
 <li><a accesskey='4' href='#' title=''>Perfil</a></li>
 <li><a accesskey='5' href='http://blogyweb.blogspot.com' title=''>Soporte</a></li>
  </ul>
</div>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Dar efecto aqua a una forma con Photoshop

2007-05-18T02:20:00.000-06:00

El efecto aqua consiste en darle a una forma volumen e iluminación que lo hagan lucir más vistoso. Y nos lo explica Jorge Llantén con este videotutorial para hacer crearlo en Photoshop (prende tus bocinas).

Crear efecto multipunto con Photoshop

2007-05-18T02:09:00.000-06:00

El efecto multipunto es la descomposición de una forma cualquiera en una diversidad de puntos con una diferencia de tamaños gradual. Jorge Llantén muestra con este muy buen videotutorial la forma de hacer este efecto con Adobe Photoshop

Convierte tus archivos a PDF

2007-05-17T23:47:00.000-06:00

Muchas veces necesitamos tener nuestros archivos de word, excel o hasta nuestro sitio web en PDF para tenerlo en un formato más amigable a la lectura, más accesible en la web y también un poco más difícil para modificar. Por lo que aquí te damos algunas opciones para hacer estas conversiones con éxito:

Convertir vía mail

KoolWIRE es una innovadora forma de conversión de archivos, sólo tienes que enviar un mail a pdf@koolwire.com con lo archivos que quieres convertir adjuntos y esperar el mail de respuesta con los archivos en pdf. Los tipos de archivos admisibles son: Word (.doc), Powerpoint (.ppt), Excel (.xls), Jpeg, GIF, Rich Text Format (.rtf) y TXT.

Convertir vía software

Una de las formas más comunes y, desde mi punto de vista, más practicas son los software para convertir archivos en pdf, en especial aquellos que te permite convertir desde cualquier aplicación donde se pueda imprimir, como es el caso de PrimoPDF, una aplicación gratuita que al instalarla se agrega como una impresora, así desde el programa que deseas convertir, le das imprimir, seleccionas esta aplicación y te pedira la ubicación para guardar tu archivo en PDF. (Yo en lo personal uso este método)

Convertir vía Firefox

La capacidad de firefox para agregarle plugins nos dan la posibilidad de usar LOOP, un plugin que al instalarlo en nuestro navegador y reiniciarlo tenemos la posibilidad de convertir nuestro documentos a PDF, sólo hay que pulsar el botón de la aplicación en la barra de menús. Al usarlo por primera vez necesitas registrarte.

Descarga plugin

Convertir vía Google docs

Google Docs te permite gestionar tus archivos en linea con tu cuenta Google y entre estas herramientas, transformar a PDF. Sólo hay que ingresar a GoogleDocs con nuestra cuenta, donde encontraras la opción "upload", subir el archivo a convertir, en la página donde te muestra este archivo buscamos la cortina de opciones "File" y seleccionamos "Save as PDF" para tenerlo en nuestra PC.

Convertir vía web

ExpressPDF es una web para la conversión de archivos de word y excel (únicamente) a PDF, al entrar al sitio selecciona cual de estos dos formatos deseas convertir, posteriormente señalas la ubicación de tu archivo en la pc, das tu mail, seleccionas la calidad y en unos minutos lo tendrás en tu mail.

Patrones (patterns) para tu Blog o Web

2007-05-17T22:08:00.000-06:00

Kollermedia te ofrece una extensa gama de patrones de buenos diseños y muy variados, utilidades para usar como fondo en tu sitio o en un banner o para otro tipo de proyecto de diseño. Los patrones están clasificados en las siguientes categorías:

Lined (38 patrones)
Dotted (43 patrones)
Squares (41 patrones)
Classic (57 patrones)
Dirty (19 patrones)
Funky (34 patrones)
Real (14 patrones)

Vía: Xyberneticos

Comunidad de ayuda para tu blog

2007-05-17T21:38:00.001-06:00

La Comunidad de ayuda para tu blog es un proyecto de varios bloggers dedicados a auxiliarte en la personalizasión, diseño y mejoramiento de tu blog, principalmente dirigido a los usuarios del sistema Blogger. Entre ellos puedes encontrar los siguientes blogs:

Y a Recursos blog & Web también, seguro podrán sacarte de más de un apuro.

Blogger guarda borradores automaticamente

2007-05-17T21:27:00.000-06:00

Hoy al momento de escribir una entrada en Blogger, me aparece una pequeño globito en la parte inferior del editor avisándome de una nueva utilidad del sistema. Ahora Blogger guarda automáticamente lo que escribes como borrador, aproximadamente cada minuto, es una buena noticia, ahora ya no habrá que preocuparse por perder una entrada que llevábamos media hora redactando ni de andar guardando borradores manualmente.

Plantilla Blogy-neosapien

2007-05-17T14:37:00.000-06:00

Esta plantilla esta basada ean "Neosapien" de Small Potato para Wodpress, adaptada para Blogger por BlogyWeb y esta bajo una licencia GNU. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Small Potato.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='menu'>
<ul>
 <li><a href='#'>Inicio</a></li>
 <li><a href='#'>Blog</a></li>
 <li><a href='#'>Fotos</a></li>
 <li><a href='http://blogyweb.blgospot.com'>Soporte</a></li>
</ul>
</div>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Plantilla Blogy-Pizza

2007-05-17T11:21:00.000-06:00

Esta plantilla esta basada en "Pizza Parlor" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<ul>
  <li class='active'><a href='#' id='page1'>Blog</a></li>
  <li><a href='#' id='page2'>Fotos</a></li>
  <li><a href='#' id='page3'>Perfil</a></li>
  <li><a href='http://blogyweb.blogspot.com' id='page4'>Soporte</a></li>
</ul>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Guia legal del Blogger

2007-05-17T01:42:00.000-06:00

¿Han encontrado algo interesante en algún blog y no saben si pueden citarlo en el suyo? ¿Se han preguntado donde se puede acudir cuando se tienen problemas legales con su blog? Bueno, pues esta y otras preguntas de importancia pueden encontrar una respuesta en la Guia legal del Blogger, donde te explican que facultades, derechos y obligaciones tienes como Blogger, sin duda un documento para tener presente.

Consultar en linea
Descargar en PDF

Obtener una cuenta Adsense

2007-05-16T22:56:00.000-06:00

El primer paso con adsense es obtener una cuenta y es de lo más sencillo, lo único a tener en cuenta es que tu blog o web tiene que cumplir con las políticas del programa, principalmente no deben tener:

Contenido violento, intolerancia racial o defensa de un particular, grupo u organización
Pornografía y contenido no apto para menores
Drogas o artículos relacionados ilegales
Cantidad excesiva de lenguaje inapropiado.

En algunos casos, Google Adsense verifica que cumplas con estos lineamientos y en otros más te da una entrada automática al programa. Para sacar una cuenta entra a la página adsense desde el link que te mostramos en el menú lateral del sitio o bien, entra directamente a su página principal. Y desde aquí, da click en el botón "registrarse ahora".

Lo siguiente es rellenar el formulario de registro, te recomendamos llenes todos los campos con datos reales, con certeza puedo decirte que Google respeta esta información y no te llena con publicidad de ellos o de otros anunciantes. En la selección de productos te recomendamos dejes ambos seleccionados, al momento de trabajar con tu cuenta podrás usarlos o no, libremente. Al final, en políticas, tienes que indicar que cumples con estas para poder acceder a una cuenta y de dales una revisada.

Lo siguiente es verificar que los datos estén correctos, si no lo están regresa a corregirlos y en caso contrario, ahora selecciona si dispones de una cuenta Google (Gmail, Blogger, Picassa, etc), si dispones de una podrás usarla para Adsense y si no tendrás que obtener una ahí mismo. Con esto terminas el proceso de registro y ahora tendrás que esperar a obtener la confirmación para ser aceptado, que puede ser de unos minutos hasta un par de días.

Como ves, registrarse es muy sencillo, muchas personas recomiendan no registrarte hasta tener una sitio ya muy bien ubicado y con muchos usuarios, pero tener una cuenta adsense no cuesta y se puede ir creciendo de la mano de esta y ser un buen indicativo de que lo que hacemos bien o mal, que nos servirá de experiencia para hacer un mejor uso de esta, en el futuro.

Plantilla Blogy-cut

2007-05-16T16:53:00.000-06:00

Esta plantilla esta basada ean "Wordcut" de Gio para Wodpress, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Gio.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<ul id='nav'>
 <li><a class='current' href='#'>Inicio</a></li>
 <li><a href='#'>Blog</a></li>
 <li><a href='#'>Fotos</a></li>
 <li><a href='http://blogyweb.blogspot.com'>Soporte</a></li>
 <li class='rss'><a href='http://TUBLOG.blogspot.com/feeds/posts/default'>RSS</a></li>
</ul>

En ese código, cambia los signos # por tus links, cambia "TUBLOG" por esa parte de la dirección para hacer funcional el links de rss y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Disponible Wordpress 2.2

2007-05-16T13:15:00.000-06:00

Ya esta disponible la versión 2.2 de Wordpress. Que en esta actualización corrige algunos bugs, soporta widget por defecto y te permite mudarte de Blogger de forma muy rápida.

Para actualizar tu wordpress existe una extensión con la que necesitaras sólo de un click: InstantUpgrade

Descargar WordPress 2.2 | zip | tar.gz

10 Cosas que todo diseñador debe saber

2007-05-16T12:19:00.000-06:00

"10 Cosas que todo diseñador debe saber" es el nombre del artículo publicado en alzados, son 10 consejos que hacen pensar en como debes ser valorado tu trabajo por lo demás y por ti mismo.

Sitio: http://www.alzado.org/articulo.php?id_art=652

Poner iconos en Blogger

2007-05-15T23:45:00.000-06:00

Como te mostramos en el artículo "Poner iconos con CSS", podemos colocar iconos en cualquier parte que tenga definida alguna clase CSS, por suerte, el sistema Blogger tiene practicamente una clase para cada elemento y aquí te mostraremos como poner uno en los lugares de mayor interes.

Entramos a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Ahi buscamos el siguiente código:
```
]]></b:skin>
```
Justo antes de ese código estan los estilos CSS y es donde que habra que colocar las clases para nuestros iconos.

Ahora te mostraremos el código para diferentes partes de la plantilla, selecciona cuales deseas colocar y pegalos donde te señalamos.

Lugar: Fecha de las entradas o post
Icono:

.date-header {
padding-left: 20px;
padding-top: 5px;
background: url(http://3.bp.blogspot.com/_Zuzii37VUO4/Rkn-DuMBU_I/AAAAAAAABN0/CNp5q8l_KY8/s1600/time.png) center left no-repeat;
}

Lugar: Etiquetas en las entradas
Icono:

.post-labels {
padding-left: 20px;
padding-top: 5px;
background: url(http://3.bp.blogspot.com/_Zuzii37VUO4/RfI1_yAns8I/AAAAAAAAAYI/5m8K2kkqYRw/s1600/etiqueta_naranja.gif) center left no-repeat;
}

Lugar: Autor entradas
Icono:

.post-author {
padding-left: 20px;
padding-top: 5px;
background: url(http://2.bp.blogspot.com/_Zuzii37VUO4/RfebZS0300I/AAAAAAAAAcw/dBZjEJ39hDE/s1600/autor.gif) center left no-repeat;
}

Lugar: Comentarios en las entradas
Icono:

.comment-link {
padding-left: 20px;
padding-top: 5px;
background: url(http://2.bp.blogspot.com/_Zuzii37VUO4/Rkqpd5yax8I/AAAAAAAABQg/tu-ANuj9tvo/s1600/icono-comentarios.gif) center left no-repeat;
}

Lugar: Feed al pie del blog
Icono:

.feed-links {
padding-left: 20px;
padding-top: 5px;
background: url(http://1.bp.blogspot.com/_Zuzii37VUO4/Rj7ME-MBRJI/AAAAAAAAAwM/IOo-YUYR5aM/s1600/icono-feed.gif) center left no-repeat;
}

Lugar: Widget de Etiquetas
Icono:

#Label1 ul, #Label2 ul {
list-style-type:none;
}

#Label1 li, #Label2 li {
padding-left: 20px;
padding-top: 5px;
background: url(http://2.bp.blogspot.com/_Zuzii37VUO4/Rkqpd5yax-I/AAAAAAAABQw/GgkWpItuen4/s1600/icono-etiqueta-azul.gif) center left no-repeat;
}

Lugar: Título de la entrada
Icono:

.post-title {
padding-left: 20px;
padding-top: 5px;
background: url(http://4.bp.blogspot.com/_Zuzii37VUO4/RkqqPZyayBI/AAAAAAAABRI/nNwfNreK6xM/s1600/icono-documento.gif) center left no-repeat;
}

Lugar: Fecha de comentario
Icono:

.comment-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(http://1.bp.blogspot.com/_Zuzii37VUO4/Rkqpdpyax7I/AAAAAAAABQY/lPj-wAcTrRM/s1600/icono-calendario.gif) center left no-repeat;
}

Lugar: Backlinks
Icono:

#backlinks-container h4 {
padding-left: 20px;
padding-top: 5px;
background: url(http://1.bp.blogspot.com/_Zuzii37VUO4/Rkqpdpyax6I/AAAAAAAABQQ/g0c6ItO8SaQ/s1600/icono-backlinks.gif) center left no-repeat;
}

Lugar: Lista de links
Icono:

#LinkList1 ul, #LinkList2 ul {
list-style-type:none;
}

#LinkList1 li, #LinkList2 li {
padding-left: 20px;
padding-top: 5px;
background: url(http://4.bp.blogspot.com/_Zuzii37VUO4/RkqqDZyayAI/AAAAAAAABRA/Dils27GC_tU/s1600/icono-links.gif) center left no-repeat;
}

Una vez hallas pegado todos los que deseas usar, guarda y listo.

Recuerda que puedes cambiar algún icono especifico cambiando la ruta (dirección) del mismo, por la del que desees usar. En nustra recopilación de iconos web gratuitos puedes encontrar algunas opciones o en este buscador de especializado

Los iconos usados aquí son de famfamfam.

Poner iconos con CSS

2007-05-15T23:10:00.000-06:00

Los iconos se están volviendo cada vez más parte importante de blogs y webs. Son demostrativos y ayudan visualmente en el diseño nuestro sitio. Una forma de ponerlos automaticamente en ciertas partes es por medio de estilos (CSS), adjudicandole ciertas propiedades a clases o selectores. Veamos estas propiedades.

Por ejemplo, sí quiero colocar un icono a cada elemento de una lista del tipo:

<div id="links">
<ul>
  <li>Google</li>
  <li>Yahoo!</li>
  <li>Altavista</li>
</ul>
</div>

Hacemos uso de las etiquetas que envuelven a cada elemento, en este caso <li> y entonces a esta etiqueta habrá que adjudicarle el icono de este modo:

li {
padding-left: 20px;
padding-top: 5px;
background: url(http://4.bp.blogspot.com/_Zuzii37VUO4/RkqWoZyax5I/AAAAAAAABQI/iZGqR034T-U/s1600/link.png) center left no-repeat;
}

El padding izquierdo es cuando deseamos que el icono se coloque a la izquierda del texto y 20px porque el icono que usaremos en el ejemplo tiene 16x16px y así dejar un margen de 4 px, entre el icono y el texto. El padding arriba es porque muchas veces el tamaño del texto es inferior al tamaño del icono y habrá que cubrir esa holgura para que no se corte el icono.

El background o fondo es en sí, la propiedad que muestra el icono, la ruta del icono se especifica entre los parentesis, center es la alineación vertical, left es de acuerdo a la ubicación deseada (la misma que el padding) y especificamos que el icono no se repita con un "no-repeat".

Con esto, todos los elementos entre las etiquetas <li> traeran con sigo el icono en su lado izquierdo.

Cuando se trabaja con listas, también es necesario eliminar la viñeta que se trae por defecto editando la etiqueta <ul> de este modo:

ul {
list-style-type:none;
}

Resultado del ejemplo:

Google
Yahoo!
Altavista

La primer experiencia Adsense

2007-05-15T22:36:00.000-06:00

Hoy el trabajo en mis blogs & webs paso de kilobits a dolares, pues hoy me llego el primer cheque proveniente de la publicidad Adsense. Un poco sorpresiva la llegada, dado que vivo en un pequeño pueblo de México y la accesibilidad no es, para nada, la de una ciudad.

LLevo ya un tiempo haciendo proyectos web por hobbie y hace unos 4 meses me entro la curiosidad por probar los sistema de publicidad para obtener un recurso extra, de los que probe, sin duda fue adsense el que mejor y más rápido me dio resultados (por cuestiones de adsense no puedo decir cantidades, pero si fue más de lo que pense)

En un inicio colocaba mis anuncios de forma un tanto aleatoria, poco a poco me empece a dar cuenta que existen grandes estudios sobre como mejorar el rendimiento de mis blogs y webs y realmente son notorios los resultados al implementarlos.

Con este post inicio una nueva sección del blog dedicado a ayudar, desde cero, en la rentabilidad de sus web y blogs apartir de algunos consejos y tutoriales. Espero poder ayudarles, como esto me ayudo a mi.

Plantilla Blogy-Freshy

2007-05-15T20:17:00.000-06:00

Esta plantilla esta basada en "Freshy" de Jide, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Jide.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<ul class='menu'>
 <li class='current_page_item'><a class='first_menu' href='#'>Inicio</a></li>
 <li class='page_item'><a href='#'>Blog</a></li>
 <li class='page_item'><a href='#'>Fotos</a></li>
 <li class='page_item'><a href='http://blogyweb.blogspot.com'>Soporte</a></li>

En ese código, cambia los signos # por tus links y guarda.

Lo iconos son de famfamfam.com. La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Plantilla Blogy-MinimalistaNegro

2007-05-15T15:44:00.000-06:00

Esta plantilla esta basada en "Greenery" de Binary Bonsai , adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Binary Bonsai.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<ul class='menu'>
  <li class='current_page_item'><a href='#'>Blog</a></li>
  <li class='page_item'><a href='#'>Fotos</a></li>
  <li class='page_item'><a href='#'>Perfil</a></li>
  <li class='page_item'><a href='http://blogyweb.blogspot.com'>Soporte</a></li>
</ul>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Nota: Esta plantilla se visualiza bien en Firefox, Opera, Safari e IE7 pero mal (para variar!!!) en los IE anteriores, debido a la falta de capacidad de mostrar transparencia en las imagenes png.

Plantilla Blogy-greenery

2007-05-15T00:05:00.000-06:00

Esta plantilla esta basada en "Greenery" de LEMONed, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y LEMONed.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<ul class='menu'>
  <li class='current_page_item'><a href='#'>Inicio</a></li>
  <li class='page_item'><a href='#'>Blog</a></li>
  <li class='page_item'><a href='#'>Fotos</a></li>
  <li class='page_item'><a href='http://blogyweb.blogspot.com'>Soporte</a></li>
</ul>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Plantilla Blogy-Agua

2007-05-14T15:30:00.000-06:00

Esta plantilla esta basada en "Water" de The Undersigned, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y The Undersigned.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='topmenu'>
  <ul>
    <li class=''><a href='#'>Inicio</a></li>
    <li class=''><a href='#'>Blog</a></li>
    <li class=''><a href='#'>Archivo</a></li>
    <li class=''><a href='#'>Fotos</a></li>
    <li class=''><a href='http://blogyweb.blogspot.com'>Soporte</a></li>
  </ul>
</div>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas algunas variables para cambiar los colores desde el panel.

Ocultar la barra Blogger (navbar) automaticamente

2007-05-14T00:45:00.000-06:00

En el artículo "Quitar la barra Blogger" te mostramos como ocultar esta famosa barra permanentemente, pero si quieres conservala y que no estorbe en tu diseño, una mejor solución puede ser que se oculte automaticamente, es decir, que sólo se muestre cuando el cursor pase por el lugar donde se encuentra normalmente.

Una forma de hacer esto es la siguiente:

Entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".
Ahora buscamos el siguiente código:
```
body {
```

Y de acuerdo a tu versión de Blogger, justo arriba de este código, ponemos el siguiente:

Nuevo Blogger

#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}

Blogger Clásico

#b-navbar {
opacity:0.0;
filter:alpha(Opacity=0)
}
#b-navbar:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}

Guardamos y listo.

Funciona bien en Firefox, Opera, Safari e IE7

Redes sociales (Social Bookmarking) en Blogger

2007-05-13T23:56:00.000-06:00

Me preguntan como poner el icono de redes sociales o social bookmarking en cada uno de nuestros post, de modo que sí alguno de nuestros usuarios utiliza uno de ellos, tenga el link para agregarlo a sus favoritos de forma rápida.

No hay necesidad de tener suscrito el blog a ninguno de estos servicios, más bien, los enlaces son precisamente para que el usuario lo suscriba y tenga a la mano tu link sí lo considera de utilidad.

Ahora vamos a ver como ponerlos:

Entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML" donde activamos la casilla "Expandir plantillas de artilugios".

Buscamos el siguiente código:

   <p class='post-footer-line post-footer-line-3'/>

Sustituye esa linea con el siguiente código:

<p class='post-footer-line post-footer-line-3'>

<div class='rsociales'>
Agregar a marcadores favoritos: 
<ul>
<li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' class='rsociales-sobre' src='http://2.bp.blogspot.com/_Zuzii37VUO4/Rjl62eMBQ0I/AAAAAAAAAto/zkas68GmVFk/s1600/technorati.gif'/></a></li>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' class='rsociales-sobre' src='http://4.bp.blogspot.com/_Zuzii37VUO4/Rjl68-MBQ1I/AAAAAAAAAtw/Mftx1_Bi_oY/s1600/delicious.gif'/></a></li>
<li><a expr:href='"http://digg.com/submit?phase=2&amp;amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' class='rsociales-sobre' src='http://3.bp.blogspot.com/_Zuzii37VUO4/RjlY7uMBQrI/AAAAAAAAAsg/ov73dLSsrtA/s1600/digg.png'/></a></li>
<li><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Yahoo!' class='rsociales-sobre' src='http://2.bp.blogspot.com/_Zuzii37VUO4/RjlZLeMBQtI/AAAAAAAAAsw/bNmkgSj_jj0/s1600/yahoo.png'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Google' class='rsociales-sobre' src='http://4.bp.blogspot.com/_Zuzii37VUO4/Rjl6z-MBQzI/AAAAAAAAAtg/-13NieAS3J8/s1600/google.gif'/></a></li>
<li><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Meneame' class='rsociales-sobre' src='http://4.bp.blogspot.com/_Zuzii37VUO4/Rjlct-MBQyI/AAAAAAAAAtY/UtGxUlBA7mc/s1600/meneame.png'/></a></li>
<li><a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Furl' class='rsociales-sobre' src='http://4.bp.blogspot.com/_Zuzii37VUO4/Rjlaa-MBQuI/AAAAAAAAAs4/7hoQkbJNkUw/s1600/furl.png'/></a></li>
<li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' class='rsociales-sobre' src='http://3.bp.blogspot.com/_Zuzii37VUO4/RjlbHuMBQvI/AAAAAAAAAtA/L0TsC3OUUyI/s1600/reddit.gif '/></a></li>
<li><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Magnolia' class='rsociales-sobre' src='http://3.bp.blogspot.com/_Zuzii37VUO4/RjlbWuMBQwI/AAAAAAAAAtI/Vy_xjt3iY80/s1600/magnolia.gif'/></a></li>
<li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' class='rsociales-sobre' src='http://3.bp.blogspot.com/_Zuzii37VUO4/RjlbjuMBQxI/AAAAAAAAAtQ/WDlHSsaO_m4/s1600/blinklists.gif'/></a></li>
<li><a expr:href='"http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blogmarks' class='rsociales-sobre' src='http://1.bp.blogspot.com/_Zuzii37VUO4/RjlQzOMBQoI/AAAAAAAAAsI/qt5x09fQvNo/s1600/blogmarks.gif'/></a></li>
</ul>
</div>

</p>

Estas son, a mi parecer, las redes sociales más populares.

Ahora busca el código:

]]></b:skin>

Y justo arriba pega lo siguiente:

.rsociales ul {
display:inline;
margin:0pt !important;
padding:0pt !important;
}
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
}
.rsociales-sobre {
opacity:0.4;
}
.rsociales-sobre:hover {
opacity:1;
}

Estos son los estilos aplicados a los iconos de cada servicio, puedes modificarlos a como mejor se adapte a tu blog. Los últimos dos estilos dan un efecto de transparencia que funciona bien firefox, opera, safari e IE7.

Ahora gurdamos y listo.

Wiredness: Editor de imagenes en linea

2007-05-13T23:48:00.000-06:00

Wiredness es una web con un sistema de edición de imagenes, subes tu imagen o das la url de ella y tendras varias herramientas de edición básica de imagenes. Puedes cambiar el tamaño de la imagen, introducirle texto, cambiar brillo, contraste, saturación, colorear, desenfocar, eliminar lo ojos rojos, entre varias herramientas de este tipo.

Sitio: http://www.wiredness.com/

Plantilla Blogy-Floral

2007-05-13T19:48:00.000-06:00

Esta plantilla esta basada en "Flowery" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='menu'>
  <ul>
 <li class='first'><a accesskey='1' href='#' title=''>Inicio</a></li>
 <li><a accesskey='2' href='#' title=''>Perfil</a></li>
 <li><a accesskey='3' href='#' title=''>Fotos</a></li>
 <li><a accesskey='4' href='#' title=''>Blog</a></li>
 <li><a accesskey='5' href='http://blogyweb.blogspot.com' title=''>Soporte</a></li>
  </ul>
</div>

En ese código, cambia los signos # por tus links y guarda.

La plantilla ya incluye algunos iconos para el autor, comentarios y etiquetas de famfamfam. Y tiene definidas algunas variables para cambiar los colores desde el panel.

Plantilla Blogy-Integral

2007-05-13T01:54:00.000-06:00

Esta plantilla esta basada en "Integral" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<ul id='menu'>
 <li><a accesskey='1' href='#' title=''>Inicio</a></li>
 <li><a accesskey='2' href='#' title=''>Blog</a></li>
 <li><a accesskey='3' href='#' title=''>Fotos</a></li>
 <li><a accesskey='4' href='#' title=''>Perfil</a></li>
 <li><a accesskey='5' href='http://blogyweb.blogspot.com' title=''>Soporte</a></li>
</ul>

Plantilla Blogy-Azulbrillante

2007-05-12T00:53:00.000-06:00

Esta plantilla, esta basada en "GlossyBlue" para Wordpress creado por N.Design Studio, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y N.Design Studio.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo, entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div>
  <ul id='nav'>
    <li class='page_item'><a href='#' title='Inicio'>Inicio</a></li>
    <li class='page_item'><a href='#' title='Perfil'>Perfil</a></li>
    <li class='page_item'><a href='#' title='Perfil'>Fotos</a></li>
    <li class='page_item'><a href='http://blogyweb.blogspot.com' title='Perfil'>Soporte</a></li>
  </ul>
</div>

En ese código, cambia los signos # por tus links y guarda.

Los iconos en la plantilla también pertenecen a N.Desgin Studio y tiene definidas algunas variables para cambiar los colores desde el panel.

Actualización: Corregida la alineación del pie de navegación.

Plantilla: Blogy-iPlantilla

2007-05-11T15:23:00.000-06:00

Esta plantilla, muy al estilo MAC, esta basada en "iTheme" para Wordpress creado por N.Design Studio, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y N.Design Studio.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo, entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='nav'>
  <ul>
    <li class='page_item current_page_item'><a href='#' title='Inicio'>Inicio</a></li>
    <li class='page_item'><a href='#' title='Perfil'>Perfil</a></li>
    <li class='page_item'><a href='#' title='Blog'>Blog</a></li>
    <li class='page_item'><a href='#' title='http://blogyweb.blogspot.com'>Soporte</a></li>
  </ul>
</div>

Plantilla Blogy-Tradicionalista

2007-05-11T00:27:00.000-06:00

Esta plantilla esta basada en "Tradisionalist" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='menu'>
  <ul>
    <li><a accesskey='1' href='#' title=''>Inicio</a></li>
    <li><a accesskey='2' href='#' title=''>Perfil</a></li>
    <li><a accesskey='3' href='#' title=''>Blog</a></li>
    <li><a accesskey='4' href='#' title=''>Fotos</a></li>
    <li><a accesskey='5' href='http://blogyweb.blogspot.com' title=''>Soporte</a></li>
  </ul>
</div>

Tutorial sobre vectorización en Adobe Illustrator

2007-05-10T22:49:00.000-06:00

Infected-FX ha completado su tutorial sobre vectorización de una imagen con Adoebe Illustrator. La vectorización de una imagen te permite poder cambiar el tamaño de la imagen sin preocuparte por la calidad. El tutorial esta dividido en dos partes, explicado en video y te brinda los archivos fuente a usar.

Sitio: http://www.infectedfx.net/wp-content/uploads/tutoriales/illustrator/bunny/

Cambiar de lugar la fecha en las entradas en Blogger

2007-05-10T21:36:00.000-06:00

Por defecto, la fecha aparece por encima del título de todos los artículos (post o entradas), cosa que no siempre es muy deseable y además no es posible cambiarla de lugar desde el panel de "Elementos de la página", así que habra que hacerlo manualmente.

Entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML" donde activamos la casilla "Expandir plantillas de artilugios".

Buscamos el siguiente código correspondiente a la fecha:

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

Corta el código (Ctrl + x en Windows) y sí quieres dejar la fecha justo abajo del contenido de la entrada y encima del autor, etiquetas, comentarios, etc. busca el siguiente código:
```
<div class='post-header-line-1'/>
```
Y justo abajo de esto, pega el código que cortaste (Ctrl + v en windows)

Sí quieres ponerla abajo del autor, etiquetas, comentarios, etc. busca el siguiente código:
```
<div class='post-header-line-3'/>
```
Y justo abajo de esto, pega el código que cortaste (Ctrl + v en windows)

Guarda y listo

Layer Styles para photoshop estilo Web 2.0

2007-05-10T18:27:00.000-06:00

Ha unos dias te mostramos una paleta de degradados muy estilos Web 2.0 de Deziner, y ahora nos regalan unos "Layer Styles" (estilos de capas) para aplicar tus degradados y obtener de forma rápida y vistosa barras, botones, cabeceras o fondos para tu web.

No los he probado aun, pero los ejemplos lo hacen tentador. El paquete consta de 131 estilos y esta disponible para descargar de forma desde su web, donde también te muestra como instalarlos.

Sitio: http://www.dezinerfolio.com/2007/05/06/ultimate-web-20-layer-styles/

Iconos cada día

2007-05-10T17:30:00.000-06:00

Everydayicons es una web bastante colorida que te da de forma gratuita iconos de disco de 3 1/2'' y de folders, patrones vectorizados y muy bonitos para tu web y una serie de sencillos, pero bien logrados, formatos de oficina.

Sitio: http://www.everydayicons.jp/

Worpress con plugins incluidos

2007-05-10T17:23:00.000-06:00

Sin duda wpzipper es otra gran herramienta en linea para el sistema de publicación Wordpress, se trata de una página que te permite descargar el wordpress con los plugins que tu selecciones ya instalados, así cuando instalas el sistema, ya podras hacer uso de ellos. El sitio cuenta con una gran diversidad de plugins y entre ellos varios de los más conocidos.

Sitio: http://www.wpzipper.com/

Aprendiendo desde ya

2007-05-10T13:50:00.000-06:00

Desde ya son un grupo de web que ofresen tutoriales para empezar a aprender desde cero (y desde ya) HTML, CSS, JavaScript, DHTML, PHP, MySQL, AJAX y Server. Además de la información te muestran un ejemplo y un ejercio para completar en linea, de cada capitulo de sus cursos. No hay pretexto para no aprender.

Sitios:

Plantilla Blogy-Hada negra

2007-05-09T23:29:00.000-06:00

Esta plantilla esta basada en "BlackFairy" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

La plantilla ya incluye algunos iconos para el autor, comentarios y etiquetas de famfamfam. Y tiene definidas algunas variables para cambiar los colores desde el panel.

Plantilla Blogy-Neonix

2007-05-09T20:17:00.000-06:00

Esta plantilla esta basada en "Neonix" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='menu'>
  <ul>
   <li><a href='#'>Mi Blog</a></li>
   <li><a href='#'>Mis Fotos</a></li>
   <li><a href='#'>Mis Favoritos</a></li>
   <li><a href='#'>Mi Perfil</a></li>
   <li><a href='http://blogyweb.blogspot.com'>Soporte</a></li>
  </ul>
 </div>

Plantilla Blogy-Spring

2007-05-08T23:35:00.000-06:00

Esta plantilla esta basada en "The Spring" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='menu'>
 <ul>
  <li><a href='#'>Inicio</a></li>
  <li><a href='#'>Blog</a></li>
  <li><a href='#'>Fotos</a></li>
  <li><a href='#'>Contacto</a></li>
 </ul>
</div>

Plantilla Blogy-Columnas

2007-05-08T18:07:00.000-06:00

Esta plantilla esta basada en "columna" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

La plantilla ya incluye algunos iconos para el autor, comentarios y etiquetas de famfamfam. Y tiene definidas algunas variables para cambiar los colores desde el panel.

Plantilla Blogy-Vertical

2007-05-08T13:42:00.000-06:00

Esta plantilla esta basada en "verticals" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='menu'>
  <ul>
    <li><a href='#' title=''>Inicio</a></li>
    <li><a href='#' title=''>Acerca</a></li>
    <li><a href='#' title=''>Productos</a></li>
    <li><a href='#' title=''>Clientes</a></li>
    <li><a href='http://blogyweb.blogspot.com' title=''>Soporte</a></li>
  </ul>
</div>

Plantilla Blogy-informativo

2007-05-08T11:55:00.000-06:00

Esta plantilla esta basada en "Informatif" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='menu'>
  <ul>
    <li><a href='#' title=''>Inicio</a></li>
    <li><a href='#' title=''>Acerca</a></li>
    <li><a href='#' title=''>Productos</a></li>
    <li><a href='#' title=''>Clientes</a></li>
    <li><a href='http://blogyweb.blogspot.com' title=''>Soporte</a></li>
  </ul>
</div>

Plantilla Blogy-Provincia

2007-05-08T02:01:00.000-06:00

Esta plantilla esta basada en "Province" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='menu'>
  <ul>
    <li><a href='#'>Inicio</a></li>
    <li><a href='#'>Blog</a></li>
    <li><a href='#'>Fotos</a></li>
    <li><a href='http://blogyweb.blogspot.com'>Soporte</a></li>
  </ul>
</div>

Plantilla Blogy - Eclipse

2007-05-08T00:12:00.000-06:00

Esta plantilla esta basada en "Eclipse" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='menu'>
 <ul>
  <li><a href='#' title=''>Inicio</a></li>
  <li><a href='#' title=''>Acerca de mi</a></li>
  <li><a href='http://blogyweb.blogspot.com' title=''>Soporte</a></li>
  <li><a href='#' title=''>Contacto</a></li>
 </ul>
</div>

En ese código, cambia los signos # por tus links y guarda.

La plantilla tiene definidas varias variables para cambiar los colores desde el panel.

Plantilla Blogy - Ritmos Orgánicos

2007-05-07T20:52:00.000-06:00

Esta plantilla esta basada en "Organic Rhythm" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<div id='menu'>
  <ul>
    <li><a href='#' title=''><b>I</b>nicio</a></li>
    <li><a href='#' title=''><b>A</b>cerca de mi</a></li>
    <li><a href='#' title=''><b>P</b>roductos</a></li>
    <li><a href='#' title=''><b>S</b>ervicios</a></li>
    <li><a href='http://blogyweb.blogspot.com' title=''><b>S</b>oporte</a></li>
    <li style='display:inline;'><a href='#' title=''><b>C</b>ontacto</a></li>
  </ul>
</div>

En ese código, cambia los signos # por tus links.

La plantilla ya incluye algunos iconos para el autor, comentarios y etiquetas de famfamfam. Y tiene definida varias variables para cambiar los colores de la plantilla desde el panel.

Plantilla Blogy-Enlight

2007-05-07T01:10:00.000-06:00

Esta plantilla esta basada en "Enlight" de Free CSS Templates, adaptada para Blogger por BlogyWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condisión de que respetes los creditos, regresando un link a BlogyWeb y Free CSS Templates.

Ver plantilla en funcionamiento

Ver el código
Descarga en formato zip.
Descarga en formato XML.

Sí tienes duda de como instalarla o cambiarla por la que usabas anteriormente consulta nuestro artículo "Cómo instalar o cambiar una plantilla en el nuevo Blogger"

Esta plantilla tiene dos menus que puedes personalizar a tu gusto. El primero esta dentro de la cabecera, para cambiarlo entra a la pestaña "Plantilla" o también llamada "Diseño" desde el escritorio y después a la opción "Edición de HTML".

Y busca el siguiente código:

<!-- Links dentro de la cabecera(header) editalos a tu gusto -->
<div id='topmenu'>
<ul>
 <li><a accesskey='1' href='#' id='topmenu1' title=''>Inicio</a></li>
 <li><a accesskey='2' href='#' id='topmenu2' title=''>Contacto</a></li>
 <li><a accesskey='3' href='#' id='topmenu3' title=''>Mapa del sitio</a></li>
</ul>
</div>

En ese código, cambia los signos # por tus links. Para el menú que esta bajo la cabecera busca:

<!-- Menú abajo de la cabecera, editalos a tu gusto -->
<div id='menu'>
 <ul>
  <li class='first'><a href='#' title=''>Acerca de mi</a></li>
  <li><a href='#' title=''>Productos</a></li>
  <li><a href='#' title=''>Servicios</a></li>
  <li><a href='#' title=''>Clientes</a></li>
  <li><a href='http://blogyweb.blogspot.com' title=''>Soporte</a></li>
 </ul>
</div>

E igualmente cambia # por tus links.

La plantilla ya incluye algunos iconos para el autor, comentarios y etiquetas de famfamfam. Un pequeño inconvenientes es que aun no estan definidas las variables para hacer el cambio de colores desde el panel Blogger.

Editor PHP, CSS y HTML en linea

2007-05-06T01:55:00.000-06:00

SiteGuts es un sitio con un editor HTML, CSS (varias versiones) y PHP en linea, que te permite redactar tu código en un campo de texto y después probarlo directamente en su web.

Sitio: http://www.siteguts.com/editor/index.htm

Ten todas las versiones de Internet Explorer en tu PC

2007-05-06T01:08:00.000-06:00

Con lo latoso que es el Internet Explorer para diseñar, no esta por demás tener instaladas varias versiones de este navegador en nuestra PC y con este programa puedes hacer dicha tarea. Instala el IE (Internet Explorer) de la versión 3 a la 6.

Sitio: http://tredosoft.com/Multiple_IE

Equivalencias de código Blogger-Wordpress

2007-05-05T22:30:00.000-06:00

Simpre pense en lo útil que sería tener las equivalencias de código entre Blogger y Wordpress de modo de poder adaptar plantillas de un sistema a otro y ahora encuentro esta información. Pues en emmense hay una tabla de equivalencias de código entre Blogger, Movable Type y Wordpress.

La mala noticia es que se trata de los códigos de blogger usados en su versión clásica, pero igualmente sirven.

Sitio: http://emmense.com/template-tag-reference-sheet/

Generador de nube de tags en linea

2007-05-05T19:40:00.000-06:00

En el artículos "Nube de Etiquetas en el nuevo Blogger" te mostramos como crear tu mismo tus etiquetas, ahora te mostraremos donde hacerlas en linea. Zoom Clouds es una herramienta con la que puedes crear nube de tags (etiquetas) en tu blog. La forma de crearlas es muy fácil, solo te registras (no toma más de 3 minutos), introduces unos datos de tu blog, personalizas tu diseño y te dan el código para agregar en la parte donde quieras que este tu nube.