Blog and Web

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

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.

1. 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”.



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

3. 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://bp2.blogger.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://bp2.blogger.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://bp1.blogger.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://bp1.blogger.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://bp0.blogger.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://bp1.blogger.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://bp3.blogger.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://bp0.blogger.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://bp0.blogger.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://bp3.blogger.com/_Zuzii37VUO4/RkqqDZyayAI/AAAAAAAABRA/Dils27GC_tU/s1600/icono-links.gif) center left no-repeat;
   }

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

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://bp3.blogger.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 16×16px 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

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.