Breadcrumbs: Triángulos con CSS

Esta es una de estas cosas que por ahora no funcionará en Internet Explorer pero no importa, igual vale la pena verlo.

Se trata de hacer un breadcrumbs, es decir, mostrar la ruta de la página web donde nos encontramos:

Inicio > Año > Mes > Título de la entrada
Inicio > Etiqueta > Título de la entrada

La idea de css-tricks.com es hacer eso agregándole alguna característica gráfica especial, sin imágenes y utilizando sólo CSS para crear los triángulos.

El HTML es una simple lista con una clase y en cada item, un enlace:

<ul class="breadcrumb">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Categoría</a></li>
  <li><a href="#">Blogger</a></li>
  <li><a href="#">El título de esta entrada</a></li>
</ul>

El resto es el estilo:

<style>
.breadcrumb { /* el rectángulo con la lista */
  list-style: none;
  margin: 0;
  overflow: hidden;
}
.breadcrumb li { /* cada item de la lista */
  float: left;
}
.breadcrumb li a { /* cada item es un enlace */
  color: #FFF;
  display: block;
  float: left;
  font-family: Helvetica;
  font-size: 18px;
  text-decoration: none;
  padding: 10px 0 10px 50px;
  position: relative; 
  /* el color de fondo del item que está a la izquierda */
  background-color: #A0A9B1;
}
.breadcrumb li a:after {
  content: " "; 
  display: block; 
  left: 100%;
  height: 0;
  margin-top: -50px; 
  position: absolute;
  top: 50%;
  width: 0; 
  z-index: 2;
  /* esto creará el primer triángulo */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #A0A9B1;
  border-top: 50px solid transparent;
} 
.breadcrumb li a:before { /* el siguiente enlace */
content: " "; 
  display: block; 
  height: 0;
  left: 100%;
  margin-top: -50px; 
  margin-left: 1px;
  position: absolute;
  top: 50%;
  width: 0; 
  z-index: 1;
  /* el color de fondo del segundo item */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #DEF;
  border-top: 50px solid transparent;
}
/* y los siguientes */
.breadcrumb li:first-child a {padding-left: 10px;}
.breadcrumb li:nth-child(2) a {background-color: #808991;}
.breadcrumb li:nth-child(2) a:after {border-left-color: #808991;}
.breadcrumb li:nth-child(3) a {background-color: #606971;}
.breadcrumb li:nth-child(3) a:after {border-left-color: #606971;}
.breadcrumb li:nth-child(4) a {background-color: #404951;}
.breadcrumb li:nth-child(4) a:after {border-left-color: #404951;}
.breadcrumb li:last-child a {
  background: none repeat scroll 0 0 transparent !important;
  color: #DEF;
  cursor: default;
}
/* el efecto hover */
.breadcrumb li:last-child a:after {border: none;}
.breadcrumb li:last-child a:before {border: none;}
.breadcrumb li a:hover {background-color: #501921;}
.breadcrumb li a:hover:after {border-left-color: #501921 !important;}
</style>

• Inicio
• Categoría
• Blogger
• El título de esta entrada

Según se lee en Google Operating System, Picasa ha aumentado la capacidad disponible de todas las cuentas gratuitas y esto es una buena noticia porque las imágenes que subimos a Blogger, son alojadas allí.

En este caso, el incremento no es evidente ya que sigue mostrando los 1024MB de siempre pero, la idea que se les ha ocurrido es bastante original: toda imagen inferior o igual a 800 pixeles de ancho (o alto) no será contada, es dicir, no ocupará espacio en la cuota y equivaldrá a cero.

De tal modo, si accedemos a nuestra cuenta, en el footer, veremos que tenemos mucho más espacio disponible ya que se ha recalculado el que utilizamos en función del tamaño de als imagenes que hayamos subido; lo mismo podemos ver en los álbumes o incluso desde Blogger mismo si estamos usando el viejo editor:

Algo similar ocurre con los videos; todos los que duren menos de 15 minutos no son tenidos en cuenta.

Obviamente, esto tiende a promover el uso del servicio a la vez que intenta fomentar el alojamiento de imágenes de tamaños razonables que son las que la mayoría de los blogs utilizan.

Si se utiliza el sofware de escritorio, desde allí podemos establecer el tipo de tamaño por defecto yendo a Herramientas | Opciones y seleccionando la pestaña Albumes web y seleccionando alguna de ellas: Tamaño Original, Recomendado (1600 pixeles), Medio (1024 pixels), Pequeño (640 pixels) y de ese modo nos evitamos el trabajo de redimensionarlas previamente.

Desde hace unos dias, muchos sitios y blogs que tienen imágenes subidas a ImageShack están sufriendo problemas ya que lo ven es la típica rana de error con un mensaje distinto al que suele verse cuando esa imagen ha desaparecido.

Yo no he visto información oficial al respecto, el sitio donde se supone que deberían publicarse las novedades hace muchos meses que está mudo pero lo real es que algo ha cambiado y, cuando subimos una imagen, si no estamos registrados, ya no nos dan el enlace directo como era lo usual:

Es cierto que, en algunos foros explican la manera de eludir eso, es casi tonta pero no sé hasta que punto funcionará con el tiempo. Una ves subida la imagen, vamos a la página donde está y con el botón derecho, copiamos la dirección real de la imagen:

Esto, no sucede si nos hemos registrado y tenemos una cuenta, allí, todo sigue igual:

Digo que no sé si funcionará porque si el servicio pretende impedir que las imágenes subidas de manera anónima puedan ser utilizadas de manera directa (hotlink), tarde o temprano encontrará el método de bloquearlas así que lo mejor es que si vamos a utilizar el servicio, nos registremos gratuitamente y asunto arreglado.

Otra alternativa posible es seguir el enlace que se muestra justamente en esa imagen de error que nos indica que vayamos a esta página donde podremos registrar uno o más dominios en cuyo caso, cualquier imagen subida a ImageShack será visible, sean estas nuestras o no.

Para registrarse, hay que colocar el nombre, una dirección de mail, escribir al lista de los dominios con su descripción y enviar el formulario que no sé lo que puede tardar en ser procesaado si es que es procesado alguna vez.

Alli mismo se aclara que, si no se quiere esperar, basta tener una cuenta y subir las imagenes a ella en cuyo caso, si son públcias, serán visibles por cualquiera en cualquier momento. Obviamente, este es el método más sencillo aunque, quienes tengan plantillas de terceros y no se hayan tomado el trabajo de descargar las imágenes que se utilizan, se verán en la necesidad de usar ese formulario para, por lo menos, intentar que sean restauradas temporalmente y luego, mudarlas a Blogger mismo que es donde en realidad, deberían estar siempre.

La propiedad border es aquella que nos permite eso, agregar un borde a casi cualquier etiqueta. Sólo es necesario indicar el grosor, el tipo de borde y el color para que, aplicada a un elemento, este quede enmarcado en sus cuatro bordes.

Siempre insisto con lo mismo, toda etiqueta es un rectángulo así que tiene cuatro lados y la propiedad border nos da la posibilidad de identificarlos por separado:

border: 1px solid #FFF; agregará un borde en los cuatro
border-top: 1px solid #FFF; agregará un borde arriba
border-bottom: 1px solid #FFF; agregará un borde abajo
border-left: 1px solid #FFF; agregará un borde a la izquierda
border-right: 1px solid #FFF; agregará un borde a la derecha

El borde ocupa espacio por lo tanto, si el elemento tiene determinado ancho, cuando usamos esta propiedad, ese ancho se incrementará sin importar si hemos definido el ancho con width o no; a veces, eso crea problemas cuando se diagrama una página; por ejemplo, si tuviéramos un DIV de 400 pixeles de ancho y adentro colocamos otros dos de 200 pixeles cada uno y a esos les ponemos la propiedad float, se verán uno al lado del otro:

Pero si a uno de ellos le agregamos un borde, se irá para abajo porque no hay suficiente espacio:

Para solucionar esto, debemos aumentar el ancho del contenedor o reducir el ancho del DIV con el borde tantos pixeles como sea necesario.

Algo similar ocurre cuando se colocan bordes en elementos inline al utilizar estilos de hover; por ejemplo, si tuviéramos esta definición:

a:hover {border:3px solid #FFF;}

al colocar el cursor encima de este enlace, todo el texto se desplazará:

Donec quis velit orci. Nam euismod enim ut rutrum luctus ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

Esto, se soluciona colocándole un borde de color transparente al enlace yde ese modo, ya estamos "reservando" el espacio necesario:

a {border:3px solid transparent;} 
a:hover {border:3px solid #FFF;}

Donec quis velit orci. Nam euismod enim ut rutrum luctus ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

Pero border no es la única propiedad que nos permite recuadrar etiquetas, hay otra que no utilzamos mucho y que hace lo mismo, se trata de la propiedad outline. Pero, en realidad, no hace lo mismo porque tiene dos caracterísiticas particulares. La primera es que no nos permite definir cuál borde agregar, siempre se agregarán los cuatro; la segunda es que no ocupa espacio así que en el ejemplo anterior, si usáramos outiline en lugar de border, el DIV no bajaría:

Teniendo entonces estas dos propiedades a nuestra disposición, podemos utilizarlas juntas para crear bordes dobles sabiendo que outline será siempre el borde exterior y border será el borde interior:

.borderdobles {
  border: 5px solid #FFFF00;
  outline: 5px solid #FF0088;
  padding:10px;
  margin:0 auto;
  width:300px;
}

Donec quis velit orci. Nam euismod, enim ut rutrum luctus; ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

Un detalle a tener en cuenta es que outline no admite curvas y redondeces así que no se ve afectado por las propiedades border-radius:

.borderdobles {
  border: 5px solid #FFFF00;
  outline: 5px solid #FF0088;
  padding: 10px;
  margin: 0 auto;
  width: 300px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

Donec quis velit orci. Nam euismod, enim ut rutrum luctus; ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

En algunos casos, se utiliza el borde para resaltar los enlaces; se hace para reemplazar la propiedad text-decoration:underline así que en lugar de esto:

a:hover {text-decoration: underline;}

se coloca algo así:

a:hover {border-bottom: 2px dotted red;}

ya que, border tiene muchas más opciones; de ese modo, el "subrayado" puede ser definido con otro color o con otro tipo distinto de "sólido":

Donec quis velit orci. Nam euismod enim ut rutrum luctus ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

Con CSS3 hay un tercer tipo de borde posible que son las sombras aunque este método no será aplicable en Internet Explorer ya que por ahora, en ese navegador, las sombras son tratadas de manera diferente:

.borderdobles {
  border: solid 5px #FFFF00;
  padding:10px;
  margin: 5px auto;
  width: 300px;
  -moz-box-shadow: 0 0 0 5px #FF0088;
  -webkit-box-shadow: 0 0 0 5px #FF0088;
  box-shadow: 0 0 0 5px #FF0088;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius: 5px;
}

Donec quis velit orci. Nam euismod, enim ut rutrum luctus; ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.

Si se trata de imágenes hay una alternativa extra que nos permitiría tener tres bordes; para eso, lo que haremos es establecer un padding es decir, una "separación" y luego, le colocamos un fondo de color:

.borderdobles {
  background-color: #883000;
  border: solid 5px #FFFF00;
  display: block;
  padding:5px;
  margin: 5px auto;
  -moz-box-shadow: 0 0 0 5px #FF0088;
  -webkit-box-shadow: 0 0 0 5px #FF0088;
  box-shadow: 0 0 0 5px #FF0088;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius: 5px;
}

Trataré de contestar lo que pregunta KIRA X92 y cumplir en lo que sea posible:

en mi blog quiero hacer lo siguiente en los post poner una etiqueta por ejemplo un "div id=Link descarga class=descarga y que ese div se vea en la sidebar y no dentro del post. ¿Es posible hacer esto?

Como para todas las cosas, hay decenas de soluciones posibles y claro, cada una de ellas será la que mejor se adapte a una situación particular así que vamos a ver una forma genérica de hacerlo y, en todo caso, luego pueden hacerse las variaciones del caso.

Evidentemente, debemos usar JavaScript ya que no hay otro lenguaje posible porque parto de la base que el enlace a mostrar posee un cierto texto. Si no lo tuviera, si sólo fuera un enlace donde lo unico importante fuera la URL, podríamos usar directamente el campo Vínculo de cada entrada.

Lo primero, entonces, es ocultar ese enlace de la entrada; no voy a usar un DIV con un ID sino simplemente un enlace al que le pondré una clase, cuanto más simple sea, mejor; así que parto de la base que tengo algo así:

<a class="asidebar" href="URL"> TEXTO/IMAGEN </a>

Podríamos poner uno, dos, cualquier cantidad, es indistinto.

Obviamente, lo ocultamos con CSS agregando la regla de estilo a la plantilla:

.asidebar {display:none;}

Ahora, deberíamos tener identificados los posts de alguna manera, es cierto que podríamos hacerlo de otro modo más global pero tal vez tardaríamos mucho en procesar todo eso; entonces, expandiendo la plantilla, buscamos el INCLUDABLE llamado post que por defecto, en una plantilla Mínima dice esto:

<b:includable id='post' var='post'>
  <div class='post hentry'>

y cambiamos esa línea de color por algo así, agregándole un ID exclusivo con el cual podremos identificarlo:

<div class='post' expr:id='&quot;post-&quot; + data:post.id'>

Un poco más abajo veremos el código que muestra las entradas y allí agregaremos el llamado a la función:

<div class='post-body entry-content'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<script type='text/javascript'>mostrarEnlaces(&#39;<data:post.id/>&#39;);</script>

Nos falta la función en si misma que es la que debería leer esos enlaces ocultos y guardarlos en alguna parte; ponemos algo así antes de </head>:

<script type="text/javascript">
//<![CDATA[

// vamos a guardar todos los enlaces ocultos para mostrarlos luego
var asidebarHREF=new Array();
var asidebarTXT=new Array();

// esta es la función que llega con el ID del post a procesar
function mostrarEnlaces(idPOST) {
  var elPOST = document.getElementById("post-" + idPOST);
  // buscamos todos los enlaces que haya
  var lista = elPOST.getElementsByTagName("a");
  if(lista.length>0){
    // si hay alguno, buscamos todos los que tengan la clase asidebar
    var offset;
    for(var i=0; i<lista.length; ++i) {
      if(lista[i].className=="asidebar") {
        // si encontramos uno, lo agregamos a la lista que luego mostraremos
        offset = asidebarHREF.length;
        asidebarHREF[offset] = lista[i].href; // guardamos la url
        asidebarTXT[offset] = lista[i].innerHTML; // guardamos su texto o imagen
      }
    }
  }
}

//]]>
</script>

Por último los vamos a mostrar en la sidebar asi que siempre y cuando esa sidebar tenga su código DESPUÉS de los posts (digamos, que esté a la derecha), bastaría que agregáramos un elemento HTML; por el contrario, si está ANTES (a la izquierda), habrá que pesar otro método [Más información].

Entonces, en el elemento HTML que hemos creado, colocamos esto:

<div id="enlacesposts">
  <script>
    var salida = "";
    // si hay enlaces que mostrar
    if(asidebarHREF.length>0){
      // leemos la lista
      for(var i=0; i<asidebarHREF.length; ++i) {
        // y vamos armando el código HTML
        salida += "<a href='" + asidebarHREF[i] + "' target='_blank'>" + asidebarTXT[i] + "</a>";
      }
      // lo escribimos
      document.write(salida);
    }
  </script>
</div>

Y eso es todo, con un poco más de CSS podemos establecer la forma en que serán mostrados; un ejemplo:

#enlacesposts { /* el DIV contenedor */ }
#enlacesposts a {
  /* cada uno de los enlaces */
    display: block;
}
#enlacesposts a:hover { /* cualquier efecto hover */ }

Cuando uno busca algo en su PC, salvo que nos equivoquemos, lo vamos a encontrar. No importa si es un archivo o una carpeta, algo que sabemos que está por alguna parte pero no tenemos idea de dónde lo metimos. Lo mismo ocurre con los buscadores de los navegadores; queremos saber dónde está la palabra "Pepito" y nos la va a mostrar o decirnos que no está en ninguna parte.

Estamos acostumbrados a eso, a suponer que lo cibernético es capaz de cualquier milagro, incluyendo encontrar las llaves que hemos perdido y eso nos lleva a un error que es una consulta que me hacen muchas veces.

"Mi buscador no encuentra nada de mi blog ¿hay algún otro que sea mejor?"

La respuesta es simple pero a la vez, es bastante complicada: todos los buscadores son iguales o casi iguales por lo tanto, es probable que cambiarlo no sirva de nada.

Cuando vemos un "buscador" interno, nos puede llamar la atención su formato, su aspecto gráfico, el modo en que se muestran los resultados pero eso es puro maquillaje, algo "estético" ya que, si hablamos de un buscador común, lo que hará es ejecutar algo, "alguien buscará en alguna parte" y eso es lo que está indicado en el atributo action de la etiqueta FORM que suele decir esto:

<form action="/search" method="get" ....... >

Y TODOS dirán lo mismo salvo el buscador AJAX que se puede agregar como gadget y que controla el mismo Blogger o alguna variante de los que podemos crear usando las búsquedas personalizadas de Google. Obviamente, en otros motores de búsqueda que no sean Google, el parámetro será diferente pero no es algo que solemos utilizar habitualmente.

¿Qué significa que todos dirán lo mismo?

Que creemos que un buscador interno encontrará cualquier cosa que hayamos publicado en nuestro blog y eso no es así. Los buscadores internos funcionan del mismo modo que funcionan los externos, no "leen" nuestras entradas, las indexan y los resultados que nos muestren dependerán de esa indexación:

la indexación es el procesamiento de esas páginas rastreada y es lo que crea el índice que usa Google para darnos resultados cuando hacemos una búsqueda ... los robots no guardan nuestras páginas sino que las analizan y hacen un índice de todas las palabras que ven y de su ubicación ... procesan la información de la etiqueta TITLE y el contenido de los atributos ALT de las imágenes ... no existen garantías que se rastreen todas las páginas de un sitio" [Más información]

Por lo tanto, que el buscador que usamos sea más o menos eficiente no dependerá de su código sino de la forma en que nuestro sitio se indexe y cambiarlo no tendrá mayores efectos así que, si el que utilizamos no nos convence, lo lógico es ir a la raiz del problema y verificar esa indexación o mejorarla en lo que sea posible.

En Blogger, las entradas se indexan de manera automática pero, siempre es mejor agregar un sitemap que ayude un poco y conviene que se agreguen a Google pero también a otros motores como Yahoo o Bing.

Hay que volver a recordar que los motores de búsqueda NO LEEN JAVASCRIPT, sólo leen textos planos; muchas plantillas estilo magazine son lindas pero usan JavaScript para escribir resúmenes y por lo tanto, todos esos enlaces y su contenido será ignorado. Algunos detalles extras pueden ser leidos en el documento de Google llamado: Optimización de motores de búsqueda: Mejor posición para su sitio en las búsqueda

En realidad, esos detalles dependerán de cada sitio en particular. De los títulos que se coloquen, de la "relevancia" que los motores le adjudiquen a su contenido y sobre todo ... se basan en algo que bien podríamos calificar como un círculo vicioso: los buscadores consideran relevante aquello que otros sitios relevantes consideran relevante y lo expresan de modo textual: para obtener una buena posición ... "consiga que otros sitios relevantes enlacen con el suyo".

¿Y cómo conseguir eso? ¿Suplicando, rogando, amenazando, pagando? No creo probable que alguno de esos métodos sea efectivo. Hay que darse tiempo, hay que hacer lo mejor posible, hay que aceptar nuestras propias limitaciones y hay que resignarse a convivir con ellas; el resto está fuera de nuestro control porque en la web, 2+2 no siempre suma 4.

Algunas herramientas que permiten resolver problemas cuando nuestro sitio no se ve bien en Internet Explore.

	DebugBar es un plugin gratuito que permite ver el código fuente, los atributos, cookies, ejecutar y verificar JavaScript y muestra distinta información sobre las páginas que estamos visitando.
	Internet Explorer Developer Toolbar es lo más parecido a Firebug y, aunque tiene limitaciones, es una buena herramienta de debug con una buena variedad de funciones de edicion online.
	Web Accessibility Toolbar agrega una barra que permite analizar algunos de los detalles de las páginas, validarlas, etc.

Esta es una forma sencilla de crear pestañas en la sidebar utilizando jQuery.

Necesitamos, claro, la librería agregada antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>

y debajo, el script en si mismo:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  var alltabs = $('div.tab');
  var tabs = $('#tabs');
  alltabs.first().show();
  tabs.find('li:first').addClass('on');
  tabs.find('a').on('click', function() {
    alltabs.hide()
    tabs.find('li').removeClass('on')
    $(this).parent().toggleClass('on')
    var tabref = $(this).attr('rel')
    $(tabref).fadeIn(500)
    this.blur()
    return false;
  })
})
//]]>
</script>

A eso, le agregamos el CSS que puede ser personal; en este ejemplo es algo así:

<style>
  /* el rectángulo contenedor */
  .tabber { width:400px; }
  #tabs { width:100%; }
  /* cada pestaña es un item de una lista */
  #tabs li {
    background-image: -moz-linear-gradient(100% 100% 90deg, #AAA, #FFF);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#AAA), to(#FFF));
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#FFFFFFFF", EndColorStr="#FFAAAAAA");
    -moz-border-radius: 10px 0 0 2px;
    -webkit-border-radius:10px 0 0 2px;
    border-radius:10px 0 0 2px;
    border-right: 2px solid #000;
    float: left;
    height: 2em;
    line-height: 2em;
    width: 75px;
  }
  /* esta es la pestaña activa */
  #tabs li.on {
    background-image: -moz-linear-gradient(100% 100% 90deg, #AA4, #FF8);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#AA4), to(#FF8));
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#FFFFFF88", EndColorStr="#FFAAAA44");
  }
  /* cada pestaña es un enlace */
  #tabs li a {
    color: #666;
    font-family: Verdana;
    font-size: 18px;
    padding: 0 0 0 15px;
    text-decoration: none;
  }
  /* el enlace activo */
  #tabs li.on a { color: #660; }
  /* efecto hover sobre las pestañas */
  #tabs li a:hover { color: #330;  }
  /* efecto hover sobre la pestaña activa */
  #tabs li.on a:hover { color: #000; }
  /* los contenidos ocultos */
  .tab {
    clear: both;
    display: none;
    font-size: 12px;
    padding: 5px;
  }
</style>

¿Cómo se utiliza? Colocando el HTML allí donde queremos mostrarlo. las pestañas son una lista ordenada donde cada item tiene un atributo rel específicoy debajo de esa lista, colocamos un div con el contenido de cada pestaña:

<div class='tabber'>
  <ul id='tabs'>
    <li><a href='#' rel='div.tab1'> titulo 1 </a></li>
    <li><a href='#' rel='div.tab2'> titulo 2 </a></li>
    <li><a href='#' rel='div.tab3'> titulo 3 </a></li>
  </ul>
  <div class='tab tab1'>
    ....... el contenido de la pestaña 1 .......
  </div>
  <div class='tab tab2'>
    ....... el contenido de la pestaña 2 .......
  </div>
  <div class='tab tab3'>
    ....... el contenido de la pestaña 3 .......
  </div>
</div>

En Blogger, tenemos la posibilidad de agregar gadgets así que, si queremos que alguno de ellos quede dentro de una de las pestañas, lo que debemos hacer es colcoarlo dentro de una sección [ ver detalles 1 | 2 ]

Un ejemplo:

<div class='tabber'>
  <ul id='tabs'>
    <li><a href='#' rel='div.tab1'> titulo 1 </a></li>
    <li><a href='#' rel='div.tab2'> titulo 2 </a></li>
    <li><a href='#' rel='div.tab3'> titulo 3 </a></li>
  </ul>
  <div class='tab tab1'>
    <b:section class='tabs' id='pestania1' maxwidgets='1'/>
  </div>
  <div class='tab tab2'>
    <b:section class='tabs' id='pestania2' maxwidgets='1'/>
  </div>
  <div class='tab tab3'>
    <b:section class='tabs' id='pestania3' maxwidgets='1'/>
  </div>
</div>

De ese modo, creamos tres secciones a las que luego, desde Diseño | Elementos de la página, podemos agregar cualquier tipo de widget.

REFERENCIAS:Free Icon Sets for Excellent Design

No creo que haya mucho que agregar.

A veces, las palabras no son suficientes
a veces, son innecesarias
a veces, simplemente no las encontramos

Tampoco importan mucho
porque quien deja su huella
jamás termina de irse.

Clker.com es un sitio donde los usuarios comparten imágenes de tipo clipart tanto en formato vecorial como PNG ... y hay muchísimos.

Si uno se registra es posible editarlos con una herramienta online pero si sólo necesitamos "dibujitos" no hace falta nada más que utilizar el buscador (en inglés) o navegar por las diferentes categorías para encontrar cosas interesantes.

Todas las imagenes pueden ser descargadas en diferentes formatos o campartidas en las redes sociales:

Una de las características más interesantes del diseño web es que uno no debe preocuparse por conocer previamente la dimensión de los elementos que vamos agregando. Sin embargo, algunas veces, esa ventaja se vuelve un problema si no tenemos en cuenta que si el contenido es más grande que el contenedor puede desbordarse y ocupar espacios indeseados.

leer artículo actualizado

La búsqueda personalizada de Google (Custom Search Engine) funciona un tanto diferente de los buscadores comunes que podemos utilizar en Blogger y se asemeja bastante al elemento que podemos agregar como gadget desde la pantalla de diseño aunque posee más opciones:

• podemos incluir los sitios donde se realizará la búsqueda
• los resultados se mostrarán en la misma página
• se pueden filtar resultados
• permite la inclusión de AdSense

Para utilizarlo, necesitamos tener una clave API que obtenemos acá y luego, ingresar en la página de Google y hacer click en el botón Crear motor búsq. person.

Una vez allí. comenzamos a definir nuestros parámetros:

1. Configurar tu motor de búsqueda agregando un nombre , una descripción y seleccionado el idioma.
2. Define tu motor de búsqueda: aquí debemos elegir dónde se harán las búsquedas y lológico, ya que se trata de un buscador interno, es colocar la dirección URL de nuestro blog pero podemos colcoar otras.
3. Selecciona una edición: obviamente,elegimos Edición estándar que esla única gratuita

Una vez que aceptamos las condiciones de uso, pasamos a la personalización donde seleccionaremos colores, fuentes o elegimos alguno de los modelos prediseñados:

Pero, sobre todo, debemos escoger el formato que tendrá la página de resultados y ahí hay tres alternativas, Ancho total, Compacto y Dos columnas. Hay que probar pero, en general, el primero es el que usaremos si queremso crear una página de resultados individual como por ejemplo, una página estática, el segundo es el que elegiremos si queremos mostar los resultados en la sidebar de modo reducido y el tercero si queremos que se vean en algún sector más amplio, por ejemplo, abajo del header o arriba de las entradas.

Cuando estemos satisfechos, hacemos click en Obtener el código y ya está; ahora, deberemos pegar el código allí donde quisiéramos que apareceiera el formualrio de búsqueda (por ejemplo, en un elemento HTML) y, si hemos elegido la tercera opción, deberemos agregar el DIV donde se mostrarán lso resultados:

<div id="cse" style="width:100%;"></div>

Y esto lo podemos hacer, directamente en la plantilla o dentro de algún otro elemento HTML, ubicándolo justo donde nos guste que se muestren.

Todo eso se puede modificar cuantas veces se quiera. Para eso, accedemos a nuestro panel y desde allí podremos administrar cada uno de los motores de búsqueda que hayamos creado, ver las estadísticas, etc.

Nada impide que, una vez agregado en nuestro sitio, podamos cambiar su diseño o ajustarlo. Cada modelo posee su CSS particular que puede ser descargado o modificado a gusto. Por ejemplo, podemos agregar el estilo en el mismo elemento HTML donde hemos colocado el código. Un ejemplo práctico:

<style>

 /* el formulario de búsqueda */
form.gsc-search-box { /* este es el rectángulo del formulario */
  font-size: 13px;
  margin: 0 0 4px;
}
input.gsc-input { /* el cuadro donde se ingresan las palabras a buscar */
  -moz-border-radius: 6px;
  background: #000 none repeat 0 0 !important;
  border: 2px solid #BCCDF0;
  color: #FFF;
  padding: 2px 5px;
  text-align:center;
  width: 155px;
}
input.gsc-search-button { /* el botón de búsqueda */
  -moz-border-radius: 6px;
  -moz-box-shadow: 0 0 10px #000 inset;
  background: #BCCDF0 none;
  border: none;
  color: #000;
  font-size: 11px;
  margin: 0;
  padding: 4px 7px;
  text-transform: lowercase;
}
input.gsc-search-button:hover {
  -moz-box-shadow: 0 0 10px #FFF inset;
}

/* los resultados */
.gsc-wrapper { /* el DIV contenedor */
  background-color:#000;
    color: #CCC;
    font-size: 12px;
}
.gsc-resultsHeader { /* el encabezado */
    border-bottom: none;
    margin-bottom: 0;
}
.gsc-results { /* el área de resultados */
    border: 1px solid #345;
    margin: 5px;
    padding: 10px;
    width: 95%;
}
.gs-result .gs-title, .gs-result .gs-title * { /* la primera línea con el título */
    background-color: #303941;
    color: #BCD;
    font-family: Tahoma;
    height: 22px;
    line-height: 22px;
    padding: 0 5px;
    text-decoration: none;
}
.gs-result .gs-snippet { /* el resumen de cada resultado */
    margin: 10px;
}
.gs-snippet b { /* la palabra resaltada */
    color: #CDE;
    border-bottom: 1px dotted #ABC;
}
.gs-snippet b:last-child {
    color: #CCC;
    border: none;
}
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
  display: none; /* no hace falta mostrar la RL si somos nosotros mismos */
}
.gsc-cursor-box { /* la paginacion inferior */
.gsc-results .gsc-cursor-box {
    border: 1px solid #345;
    font-family: Tahoma;
    font-size: 14px;
    margin: 10px 0;
    padding: 5px;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page { /* los números de a paginacion */
    color: #BCD;
    margin-right: 4px;
    padding: 2px 5px;
    text-decoration: none;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page { /* la página actual */
  -moz-border-radius: 2px;
    -moz-box-shadow: 0 0 5px #FFF inset;
    background-color: #303941;
    color: #FFF;
    font-weight: bold;
}
</style>

REFERENCIAS:designmodo.com

	Arto Demo online: VER Descargar: box.net
	Blogger Press Demo online: VER Descargar: 4shared.com
	Evidens White Demo online: VER Descargar: btemplates.com
	Hybrid Gallery Demo online: VER Descargar: 4shared.com
	Letter Frame Demo online: VER Descargar: box.net
	Mosaicus Demo online: VER Descargar: box.net
	Noteboook Demo online: VER Descargar: raycreationsindia.com
	Panorama Demo online: VER Descargar: box.net
	Schemar Mag Demo online: VER Descargar: myblogtalk.com
	Scrappy Demo online: VER Descargar: box.net
	Tequilas Flamejantes Demo online: VER Descargar: 4shared.com
	Urban View Demo online: VER Descargar: box.net
	Emire Demo online: VER Descargar: emire
	Green Bubbles Descargar: geckoandfly.com
	GossipCity Demo online: VER Descargar: blogandweb.com

REFERENCIAS:hongkiat.com