Rosa: in memorian

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

Blogger tiene dos códigos diferentes para agregar la fecha de las entradas, por defecto, en las plantillas se utiliza el menos flexible a la hora de personalizar el diseño:

Uno podría imaginar que las entradas son una serie de rectángulos apilados, cada uno de ellos conteniendo datos (fecha, titulo, etc) y eso sería lógico pero, la forma en que Blogger maneja las fechas de las entradas es extraña; por algún motivo, esa fecha está afuera, en un rectángulo separado y accedemos a ella con un dato tan particular que sólo se muestra una vez, es decir, si hay dos entradas en la misma fecha, sólo se muestra una de ellas ...

Tal como comentaba en esa entrada, el rectángulo (cada etiqueta es un rectángulo) que contiene la fecha esta MUY afuera del rectángulo que contiene el título y por lo tanto, cuando se quiere poner uno al lado del otro, las cosas se complican. A veces, esto se resuelven con CSS y a veces no, sobre todo, en las nuevas plantillas.

En general, el esquema de las entradas que veremos en el código fuente es este:

<!-- este es el rectángulo que contiene todos los posts o uno solo si se trata de una entrada individual -->
<div class='blog-posts hfeed'>
  <!-- este es el rectángulo que contiene cada post -->
  <div class='date-outer'>
    .......
    <!-- esta es la fecha por defecto que sólo se muestra una vez si hay varias entradas con la misma fecha -->
    <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
  .......
  <!-- más rectángulos !!! -->
  <div class='date-posts'>
    <div class='post-outer'>
      <div class='post hentry'>
        <!-- por fin, acá está el título de la entrada -->
        <h3 class='post-title entry-title'> ....... </h3>
        <!-- y su contenido -->
        <div class='post-body entry-content'>
          .......
        </div>
      </div>
    </div>
  </div>

  <!-- si no es una entrada individual, habra otro igual al anterior, tantos como hayamos definido -->
  <div class='date-outer'> ....... </div>
  <div class='date-outer'> ....... </div>
  .......
  <div class='date-outer'> ....... </div>
</div>

Entonces, si queremos darle una solución definitiva y queremos seguir usando ese dato, lo razonable sería mover la fecha y ponerla arriba del título (o debajo si se nos ocurre):

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
        .......

Y lo mejor para personalizar eso es empezar desde cero, eliminando cualquier padding, margin, etc. Lo hago paso a paso y sin modificar etiquetas:

/* este es el rectángulo de cada post */
.post { background-color: Gainsboro; margin: 0; padding:0; }

/* esta es la fecha */
h2.date-header { color: Teal; font-family: Arial; font-size: 20px; font-weight: normal; margin: 0; }

/* este es el título */
.post h3 { font-weight: normal; margin: 0; padding: 0; }
/* que es un enlace */
.post h3 a, .post h3 a:visited, .post h3 strong { color: Crimson; font-family: Georgia; font-size: 30px; }

/* y este es el contido de la entrada */
.post-body { margin: 0; padding:0; }

Se verá ... esto:

Para separar una entrada de la otra, les agrego un margen arriba y abajo:

.post {
  .......
  margin: 20px 0;
}

separo la fecha y el título del contenido de la entrada:

.post-body {
  .......
    margin: 30px 0 0;
}

y separo la fecha y el título del borde superior:

.post {
  .......
  margin: 30px 0;
  padding: 10px 0;
}

Voy a poner la fecha a la izquierda y el título a la derecha de esta, una al lado de la otra. Para eso, uso float:

h2.date-header {
  .......
  float: left;
}
.post h3 {
  .......
  float: left;
}

y como flotan, limpio la flotación en la siguiente etiqueta y uso padding en lugar de margin para separar el contenido:

.post-body {
  .......
  clear: both;
  padding: 30px 0 0;
}

Alineo verticalmente la fecha y el título dándoles una altura y estableciendo line-height con ese mismo valor:

h2.date-header {
  .......
  height: 40px;
  line-height: 40px;
}
.post h3 {
  .......
  height: 40px;
  line-height: 40px;
}

Le agrego un color de fondo a la fecha y coloco un padding para separar el texto y que se vea el tamaño real de esa etiqueta:

h2.date-header {
  .......
    background-color: White;
    padding: 0 10px;
}

Uso margin para separar la fecha del borde izquierdo y del título que está a la derecha:

h2.date-header {
  .......
    margin: 0 10px;
}

Ahora, hago lo mismo con el título:

.post h3 {
  .......
  background-color: Bisque;
  padding: 0 10px;
}

Y ya tengo uno al lado del otro y bien alineados.

Obviamente, este no es el único metodo que existe pero puede dar una idea de cómo se manipulan las etiquetas y cuales son alspropeidades que las afectan.