WWWar

REFERENCIAS:googlediscovery.com/

GooReader es un programa con el cual podemos buscar y leer libros y revistas que se hallen en Google Books.

El programa es gratuito aunque si queremos descargar los contenidos, debemos optar por la versión paga.

Funciona muy bien, es pequeño y la estética esta muy cuidada; las páginas se dan vuelta on el mosue, tenemos un zoom y otras herramientas que permiten navegar los textos con mucha facilidad. Vale la pena mirarlo.

Modificando un poco la idea de cssglobe.com podemos intentar darle un toque diferente a la lista de etiquetas que se muestra debajo de las entradas o, en realidad, a cualquier otro tipo de lista y todo, sin necesidad de utilizar imágenes, empleando algunas de las nuevas alternativas del CSS con lo que en algunos navegadores, el resultado será distinto (IE7) pero más que aceptable.

En el caso de Blogger, esas etiquetas se muestran con un código similar a este:

<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
      <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
  </b:if>
</span>

Allí, esta línea es la que agrega una coma o un caracter separador entre los textos de esa lista y, la eliminamos porque es innecesaria:

<b:if cond='data:label.isLast != "true"'>,</b:if>

Si deseamos, lo mismo podemos hacer con esta otra que por defecto,escribe el texto "Etiquetas:"

<data:postLabelsLabel/>

Todo lo demás puede quedar igual ya que normalmente, esas etiquetas no tienen definiciones de estilo especiales así que, se las agregamos, colocando esto antes de </b:skin>:

.post-labels {
  margin: 0;
  padding: 0;
}
.post-labels a {
  float: left;
  position: relative;
  background-color: #0089E0; /* el color de fondo que se nos ocurra */
  /* la altura */
  height: 24px;
  line-height: 24px;
  /* el ancho lo resolvemos con paddings horizontales */
  padding:0 10px 0 12px;
  /* la separación entre etiquetas */
  margin-left:20px;
  /* definiciones del texto */
  color: #FFF;
  font-size:11px;
  font-family: Arial;
  text-decoration: none;
  /* una curva suave a laderecha */
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px; 
  border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px; 
  border-top-right-radius: 4px;
}
/* esto creará el triángulo de la izquierda */
.post-labels a:before {
  border-color: transparent #0089E0 transparent transparent;
  border-style: solid;
  /* el borde es igual a la mitad de la altura definida anteriormente */
  /* de ese modo será un triángulo equilátero */
  border-width: 12px 12px 12px 0;  
  content: "";
  float: left;
  left:-12px; /* lo movemos tanto como el valor dado al borde */
  height: 0;
  position: absolute;
  top: 0;
  width: 0;
}
/* esto, creará el circulito que precede a los textos */
.post-labels a:after {
  background-color: #FFF; /* el color */
  content: "";
  float: left;
  left: 0;
  position: absolute;
  top: 10px; /* lo ubicamos centrado en al mitad de la altura */
  /* el ancho y la altura son iguales para que sea un círculo */
  height: 4px;
  width: 4px; 
  /* el radio de la curva es la mitad de su tamaño */
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
/* efectos hover */
.post-labels a:hover{
  background-color: #555;
}
.post-labels a:hover:before {
  border-color: transparent #555 transparent transparent;
}

BloggerCSSplantillas

jScrollPane es un plugin de jQuery que nos permite darle un aspecto gráfico a las barras de desplazamiento de cualquier elemento, algo que en Internet Explorer es muy simple porque basta usar CSS pero que el resto de los navegadores jamás se ha implementado; cosa rara y absurda pero, hay de todo en este mundo.

Para usarlo, obviamente necesitamos jQuery que podemos cargar desde las librerías de Google así que antes de </head> ponemos:

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

A continuación un script optativo que nos permitirá usar la rueda del ratón:

<script type='text/javascript' src='URL_mousewheel.js' />

y por último el plugin en si mismo, ya sea en su versión normal o minimizada:

<script type='text/javascript' src='URL_jscrollpane.min.js' />

Si no queremos usar archivos externos, estos dos últimos pueden agregarse directametne en la plantilla:

<script type='text/javascript'>
//<![CDATA[
  // acá pegamos el contenido del archivo mousewheel.js
  // acá pegamos el contenido del archivo jscrollpane.min.js
//]]>
</script>

Como todo, requiere sus reglas de estilo así que debajo agregamos esto que es lo mínimo necesario aunque hay más definiciones si queremos utilizar algunas de las opciones:

<style>
  .jspContainer {
    overflow: hidden;
    position: relative;
  }
  .jspPane {position: absolute;}
  .jspVerticalBar {
    background-color: #000;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px; /* define el ancho de la barra vertical */
  }
  .jspHorizontalBar {
    background-color: #000;
    bottom: 0;
    height: 16px;  /* define el alto de la barra horizontal */
    left: 0;
    position: absolute;
    width: 100%;
  }
  .jspVerticalBar *, .jspHorizontalBar * {margin: 0; padding: 0;}
  /* estas son las reglas que permiten configurar el plugin */ 
  .jspTrack { /* es el rectángulo donde se desplaza del slider */
    background-color: #000;
    position: relative;
  }
  .jspDrag { /* es el slider en si mismo */
    background-color: #888;
    cursor: pointer;
    left: 0;
    position: relative;
    top: 0;
  }
  .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
  }
</style>

Con eso ya está todo listo para que podamos utilizarlo en cualquier parte. Para eso, basta que definamos una o varias clases; por ejemplo:

</style>
  .scroll-pane {height: 200px; overflow: auto; width: 100%;}
  .horizontal {height: auto; max-height: 200px;}
</style>

<div style="width: 500px;">
  <div class="scroll-pane">
    <p> ....... el contenido a mostrar ... </p> 
  </div>
</div>

<div style="width: 500px;">
  <div class="scroll-pane horizontal">
    <p style="width: 1000px;"> ....... el contenido a mostrar ... </p> 
  </div>
</div>

Y llamamos a la función usando la clase que hemos definido:

<script type="text/javascript">
  $(function() { $('.scroll-pane').jScrollPane(); });
</script>

Las posibilidades son múltiple, en la página del desarrollador hay varios demos explicativos donde se combinan las barra, se agregan botones, etc.

Email Me! es un sitio que nos provee de un botón con el que podemos agregar un formulario de contacto sin necesidad de registros ni configuraciones. Basta entrar al sitio y hacer click en Get Your Button.

Allí colocamos nuestro nombre y la dirección de correo a la que deseamos que se dirijan los mensajes y nos darán el código que podemos agregar en cualquier parte, por ejemplo, en un elemento HTML de Blogger:

<!-- emailme Button BEGIN -->
<div id="emailme_div1"></div>
<script>var emailme_id=XXXX;
<script type="text/javascript" src="http://emailmebutton.com/emailme.js"></script>
<!-- emailme Button END -->

No tiene demasiadas opciones extras ya que, en realidad, sólo se trata de un enlace con una imagen y si se desea darle propiedades con CSS, es poco lo que puede hacerse pero, al clase que lo controla se llama:

.emailme_link { ....... }

El resultado final es algo así:

Y claro ... este no funciona porque no tengo ganas de borrar pruebas que es una manía que tienen algunos pero, al hacer click en él, se abriría algo como esto:

REFERENCIAS:wwwhatsnew.com

La gente de Blogger es distraida, a veces pierde alguna cosa y nadie la encuentra por varios dias o desaparece para siempre aunque tal vez la tienen frente a las narices. En un tiempo perdieron el lapicito de edición, ahora, parece que en algunos casos se han perdido los botones para compartir.

Como lo que dice Victor no es la primera vez que lo escucho sino la tercera ... esta entrada es para ver si esta solución permite resolver el problema.

Sí esos botones no se ven y no ha habido cambio alguno en la plantilla, en principio, bastaría con agregar esto antes de ]]></b:skin> para que volvieran a aparecer:

.share-button {display: inline-block;}

Eso sí, que nadie pregunte el motivo de la desaparición porque lo desconozco ya que en las plantillas que he visto todo parece normal así que, es uno de esos misterios que hacen que nuestra estadía en Blogger sea tan entretenida.

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