Textarea o "caja de texto"

El tag <textarea> es muy útil para publicar código en una entrada evitando que los navegadores lo interpreten o para poner un texto largo sin que ocupe demasiado espacio. Aunque es bastante conocido, hoy Dydy ha vuelto a preguntar como se hace, así que lo explico por si le es útil a alguien más.
Si colocas el código o texto que quieras mostrar entre <textarea> y </textarea>, obtendrás este resultado:

AQUI VA EL CÓDIGO O TEXTO <br />QUE SE MOSTRARÁ<br />DENTRO DE TU CAJA <br />O TEXTAREA

Si además añades a continuación de <textarea, las propiedades "rows" y "cols" podrás controlar el alto y ancho de tu textarea cambiando estos valores. El código sería algo como esto:

<textarea rows="2" cols="14">
AQUI VA EL CODIGO;DIGO O TEXTO
QUE DESEAS MOSTRAR
DENTRO DE TU CAJA DE TEXTO
O TEXTAREA.
</textarea>


AQUI VA EL CÓDIGO O TEXTO A MOSTRAR DENTRO DE TU CAJA DE TEXTO O TEXTAREA.

Ocultar la fecha de los posts y los comentarios

Para ocultar la fecha de las entradas de nuestro blog, hemos de modificar ligeramente una parte del CSS:

[1] Buscamos esto en el código de nuestra plantilla:

/* Posts---------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}

Y le añadimos "visibility:hidden;" antes de la llave de cierre }:

/* Posts----------------
*/
h2.date-header {
margin:1.5em 0 .5em;
visibility:hidden;
}

En cuanto a la forma de ocultar la fecha en los comentarios, en un poco más complicado, pero nada difícil según nos explican muy bien en Blog and Web:

[1] Buscamos en nuestra plantilla esta línea de código:

]]></b:skin>

Y justo sobre ella pegamos estas líneas de código:

.comment-timestamp {
display: none;
visibility: hidden;
}

El problema es que también se oculta el icono para suprimir comentarios, es decir, la papelera gris pequeñita que vemos al lado de cada comentario (cuando entramos como administrador del blog). Para recuperar el icono-papelera, localizamos este código en la plantilla:

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

Y lo sustituimos completamente por este otro:

<dd class='comment-footer'>
<span class='comment-timestamp'>

<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
</span>
<b:include data='comment' name='commentDeleteIcon'/>
</dd>

Meme: ¿Cuando es tu cumple?

Mi amiga Key acaba de pasarme un sencillo meme, tan sencillo como decir que día es mi cumpleaños.

No soy muy aficionada a esto de los memes, la verdad, pero viniendo de mi amiga Key, haré una excepción :-) además nos servirá para conocernos un poco más ¿no os parece?

Mi cumpleaños es el 1 de Mayo, soy Tauro

Y ya que estamos, os confesaré que nací en 1964, así que tengo 43 años...
¿A qué algun@ pensaba que era una jovencita adolescente? ;-) :-) .

Se lo tengo que pasar a tres personas, así que allá va:

* Toxicboy
* Efecinco
* Angelica

Buscador interno personalizado

Partiendo del buscador que ya tenemos en nuestro blog vamos a personalizarlo como más nos guste para adaptarlo a la estética del blog o, simplemente, para hacerlo más divertido. :-)

El código que uso para el buscador del Escaparate es este, hay que ponerlo en un nuevo elemento html-javascript:

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form>

Vamos a sustituir el botón que viene por defecto, por una imagen, para ello cambiamos esta parte del código del buscador, que es la que corresponde al botón:

<input id="search-btn" value="Buscar" type="submit"/></form>

por esta otra:

<input border="0" alt="Buscar" src="http://img234.imageshack.us/img234/5551/magnifyingglassec3.gif" type="image"/>
</form>



Vamos a ir un poco más allá, y cambiaremos el color de la cajita de búsqueda incluyendo una imagen en su interior y colocándole un borde. Partimos del código anterior del buscador del Escaparate:

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form>

Añadimos en el CSS de nuestra plantilla estas líneas de código, por ejemplo, antes de ]]><b:skin>:

.searchBox{
background: #FFFF99;
background-image:url('http://img234.imageshack.us/img234/3756/emoticonsmilenz6.png');
background-repeat:no-repeat;
padding-left:20px;
border: solid 2px;
border-color: #000000;
}
En estas líneas de código, será donde podremos hacer todos los cambios posteriores.

Ahora añadimos class="searchBox" en el código de nuestro buscador, por ejemplo detrás de type="text":

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"class="searchBox"/><input id="search-btn" value="Buscar" type="submit"/></form>
Esto hace que nuestro buscador automáticamente se vea como le hemos indicado en el CSS, así:


Modificaciones:

Aquí se cambia el color de la caja de búsqueda:
background: #FFFF99;

En esta línea podemos cambiar la url de la imagen por la que queramos usar.
background-image:url('http://img234.imageshack.us/img234/3756/emoticonsmilenz6.png');

Aquí modificamos el color y ancho del borde de la caja, cuanto mayor sea el número de px, más ancho será el borde y viceversa.
border: solid 2px;
border-color: #000000;

¡Suerte! ;-)

Autoroll de Criteo

Hace un par de días recibía un email recomendándome un nuevo widget para el blog, me pareció una idea interesante, así que he decidido compartirlo en El Escaparate.

¿Qué es el Autoroll exactamente?
Autoroll es un blogroll de sus visitantes y lectores. Es un widget que muestra y anuncia los enlaces de los bitácoras que tus lectores suelen visitar.
Es muy sencillo y tendrás una visibilidad grande. Sirve para aumentar el tráfico y el número de lectores habituales y así crear una comunidad de blogueros que comparten las mismas aficiones. Dicho de otra manera, proponemos una lista de bitácoras con la que tienes rasgos comunes ( cultura informática, etc…) Algo como una sugerencia de sitios de alto interés para ti…
El AutoRoll te permitirá promocionar de manera sencilla tu bitácora dentro de la blogesfera.
¿Cómo funciona?
Seguimos el número de visitas de cada lector único que ha instalado el Autoroll. Por tanto, cuánto más visitas hace más afición tiene por este bitácora.
¿Cuales son las ventajas para ti?
Primero, vas a proponer a tus lectores un blogroll muy entretenido porque su contenido se apoyan en otros lectores con las mismas aficiones y costumbres de lectura. Además, atraerá un tráfico sumamente calificado hacia tu bitácora. En efecto, ya que otros bitácoras similares van a mostrar tu bitácora en su Autoroll, permitiría atraer nuevos lectores con un fuerte afición por el tema de tu bitácora.

Es gratis y rápido de descargar : 1 minuto basta, puedes descargarlo directamente en la página de Criteo.
Tienes la posibilidad de escoger sus colores, tamaño, tu imagen para mostrar en otros autorroll, número de links a mostrar, si los quieres mostrar con avatar o no, e incluso si quieres abrir los links en página aparte, con la facilidad de ir viendo como quedaría en "vista previa".
Una vez decidido el estilo del Autoroll, te proporcionan un sencillo código para pegar en un nuevo elemento HTML-Javascript.
Una vez instalado, hay que esperar unos días para que la aplicación empiece su trabajo.

Aqui tienes una presentación práctica del Autoroll de Criteo.

Además, puedes echar un vistazo al blog de la Uniòn de bloggers hispanos para ver lo que es un Autoroll ya instalado,(mientras el mio empieza a trabajar), está en la sidebar al final de la página.

Abrir los links externos en página nueva

Con este script conseguiremos que los links externos de nuestro blog, es decir, los que llevan a otras páginas fuera del blog, se abran en una ventana aparte.

Nos situaremos en la parte de editar el HTML de nuestra plantilla y, una vez allí, buscamos el </head>.
Justo encima colocamos este script:

<script language='javascript'>
var dominio = "www.tublog.blogspot.com";
var dominio1 = "tublog.blogspot.com";
var script = "javascript:void(0)";
var imagenesblogger0 = "bp0.blogger.com";
var imagenesblogger1 = "bp1.blogger.com";
var imagenesblogger2 = "bp2.blogger.com";
var imagenesblogger3 = "bp3.blogger.com";
var blogger1 = "www.blogger.com";
var blogger2 = "www2.blogger.com";
var publicidad = "pagead2.googlesyndication.com";
function LinksExternos() {
var Externo;
if (document.getElementsByTagName('a')) {
for (var i = 0; (Externo = document.getElementsByTagName('a')[i]); i++) {
if (

Externo.href.indexOf(dominio) == -1 &amp;&amp;
Externo.href.indexOf(dominio1) == -1 &amp;&amp;
Externo.href.indexOf(script) == -1 &amp;&amp;
Externo.href.indexOf(imagenesblogger0) == -1 &amp;&amp;
Externo.href.indexOf(imagenesblogger1) == -1 &amp;&amp;
Externo.href.indexOf(imagenesblogger2) == -1 &amp;&amp;
Externo.href.indexOf(imagenesblogger3) == -1 &amp;&amp;
Externo.href.indexOf(publicidad) == -1 &amp;&amp;
Externo.href.indexOf(blogger1) == -1 &amp;&amp;
Externo.href.indexOf(blogger2) == -1

)
{
Externo.setAttribute('target', '_blank');
//Externo.setAttribute('class', 'linkexterno');
}
}
}
}
window.onload = function() {
LinksExternos();
}
</script>

Sustituimos en el código donde dice: "www.tublog.blogspot.com" y "tublog.blogspot.com" por la dirección de nuestro blog, fijándonos que va con y sin www:// respectivamente.

Visto en: Blog and Web

Nota

Si tenéis aplicado el menú en forma de pestañas, Blogger los interpreta como links externos y los abre en ventana aparte.

Si el código no os funciona tal cual lo copiáis de esta entrada, probad pegándolo antes en el blog de notas... Gracias a Graciela Vemtimiglia.

Iconos feed

Leonel me solicita a través de un email, si conozco la dirección de alguna web para descargar gratuitamente iconos para resaltar sus feeds.
Me he acordado de que en Zeus Box Studio tienen un pack de 34 iconos para feed en formato png y con dos tamaños: 32x32 pixeles y 16x16 pixeles, que están bastante bien...


Descargar el pack