Blog and Web

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: 10×10 px, 12×12 px, 14×14 px, 16×16 px, 24×24 px, 32×32 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

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.

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



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

3. 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/TUFEED"' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>

</b:if>

4. En ese código sustituye “http://feeds.feedburner.com/TUFEED” por la dirección de tu feed en feedburner. Es importante que mantengas las comillas como se muestra en el código.
5. Guarda y listo.

Ahora ese link será más útil. Y ya de paso, sí quieres suscribirte a nuestro feed y recibir todo lo que se genera en este Blog usa la siguiente dirección:

http://feeds.feedburner.com/blogandweb

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

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.
Continuar leyendo →

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.

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

3. 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;
}

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

5. 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://bp3.blogger.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://bp2.blogger.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://bp3.blogger.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://bp3.blogger.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://bp3.blogger.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.

6. Guarda y ¡listo!