Imagen de fondo en el título de la entrada

MgL me preguntaba hace unos días cómo podía poner una imagen de fondo en el título de las entradas, imagino que para incluir alguna en su blog Estación del Jinete.


He de reconocer que no tenía la menor idea de cómo se hacía. Pero la curiosa-cotilla que tiene una dentro le picó y me comprometí a buscar cómo cambiarlo. No me ha costado mucho, por eso he tardado poco tiempo en compartirlo con vosotros...


Veamos: las opciones de las entradas (o post) se encuentran bajo la etiqueta o nombre de post h3, de modo que iremos a la pestaña Plantilla - Edición de HTML, y activaremos la casilla "Expandir plantilla de artilugios". Entonces, buscaremos post h3 con el buscador del navegador (en Editar - Buscar). Os aparecerá ese post h3 unas tres veces, de forma similar a la que aparece en mi otro blog:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
background: url(http://img443.imageshack.us/img443/760/posttitlenj4.jpg) repeat;
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:bold;
padding-left: 5px;
border-top:3px solid $bordercolor;
border-bottom:3px solid $bordercolor;
}

.post h3 strong, .post h3 a:hover {
background: url(http://i176.photobucket.com/albums/w192/comerxcomer/florfondo.jpg) repeat;
color:$textcolor;
padding-left: 5px;
border-top:3px solid $bordercolor;
border-bottom:3px solid $bordercolor;

Los atributos margin, padding, font-size, etc. que aparecen en el primer h3 corresponden al texto en sí del título; si queremos variar el tamaño, por ejemplo, podemos hacerlo ahí.

En cuanto a la imagen, tenmos dos posibilidades:

1. Una imagen fija.

2. Una imagen que varíe cuando pasamos el ratón por encima del título de la entrada.


Si queremos una imagen fija, incluiremos el atributo background que se explica más abajo en el primer post h3; si queremos que varíe, tendremos en cuenta lo siguiente:

- La imagen especificada en post h3 a, post h3 a:visited, .post h3 strong será la que aparezca al ver la página.

- Y la especificada en .post h3 strong .post h3 a:hover será la veamos cuando el ratón se situe sobre el título de la entrada.


Para incluirlas nos situaremos tras el símbolo { que aparece después de strong, hover o h3 y teclearemos

background: url (direccion URL de tu imagen);


Si es una imagen pequeñita que queremos que se repita, escribiremos repeat delante del punto y coma:

background: url (dirección URL) repeat;


Y si no queremos que se repita, non-repeat:

background: url (direccion URL) non-repeat;


Una vez hecho esto, comprobaremos los efectos en Vista previa. Si nos gusta, guardaremos los cambios; y si no, iremos probando con repeat non-repeat, o distintas imágenes hasta encontrar una que nos guste.

Barra lateral que desaparece o desplaza hacia abajo

Quería introducir brevemente un tema que me ha traído Karen al blog, al consultarme sus dudas y mencionarme dónde había encontrado la solución. No sé demasiado al respecto, así que me limitaré a describirlo, daros un enlace de ayuda y deciros en qué lugar de la plantilla podéis ir probando para buscar la solución.

Se trata de un tema que, al parecer, ha traído y probablemente siga trayendo problemas a los bloggeros: la barra lateral -o sidebar en inglés- que parece desaparecer y se nos desplaza hacia abajo, permaneciendo en su lado derecho o izquierdo, pero debajo de las entradas.

Aunque sólo sea por curiosidad os contaré que la existencia de distintas partes en nuestro blog (barra lateral, título, entradas y barra inferior) son en realidad páginas distintas, de ahí que en la plantilla tengan distinto nombre ("main", "sidebar", "title"...) cargadas desde lo que podemos llamar una página índice que las enlaza y nos permite verlas todas a la vez. Esto quiere decir que cada una de ellas puede (o al menos deberían poder) ser modificadas por separado.


La "página índice" tiene un tamaño determinado. Dentro de ella se encuentran la barra lateral y la barra principal (la de las entradas o posts) que, lógicamente, no pueden medir lo mismo, porque no cabrían, desplazándose la barra lateral hacia abajo; además, si la suma del tamaño de las dos, de la barra lateral y la principal, superase el tamaño máximo de esa "página índice" tendríamos el mismo resultado: una barra lateral desplazada hacia abajo.

Karen me comentaba que había conseguido solucionar su problema gracias a una entrada del Blog de blogs; imagino que se refería a ¿Por qué la sidebar se va hacia abajo? en cuyos comentarios podemos encontrar muchos datos valiosos sobre el tema, como, por ejemplo, que las imágenes demasiado grandes pueden provocar ese efecto de desplazamiento hacia abajo de la barra lateral.


Gracias a otro de los comentarios he podido acudir a la plantilla de mi blog y ponerme a experimentar, a ver qué resultado obtenía según los cambios que hacía.

La conclusión a la que he llegado es, como decía antes, que el tamaño o proporción de la barra lateral y de la barra principal tiene que estar compensado si no queremos que la barra lateral se nos desplace hacia abajo. Lo mejor, en mi opinión, es experimentar con la plantilla, utilizando las opciones "vista previa" y "borrar cambios" hasta que consigamos ver el blog como nos guste; y sólo entonces hacer uso de la opción "guardar plantilla" para guardar los cambios realizados. Por cierto, en todos los blogs de ayuda se aconseja guardar una copia de la plantilla en nuestro ordenador de modo que nos sirva de copia de seguridad en caso de que necesitemos borrarla entera y, así, no perdamos todos los cambios anteriormente realizados. Para guardar la plantilla sólo tenemos que usar la opción que nos da Blogger en Plantilla - Edición de HTML "Descargar plantilla completa".

Y dicho todo esto, si queremos intentar solucionar el problema de esa barra lateral que se desplaza hacia abajo o si, como quería Karen, queremos que haya más separación entre la barra lateral y barra de las entradas, acudiremos a Plantilla - Edición de HTML y buscaremos lo siguiente:

#sidebar-wrapper {

width:200px;

float:left;

font-size:87%;

padding-bottom:20px;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Aquí podemos modificar el ancho de la barra lateral (width) que, en el caso de mi plantilla está en píxeles (width:200px). Podemos aumentarlo o disminuirlo. Si lo aumentamos demasiado puede que el efecto que obtengamos sea el que decíamos antes: que la barra lateral se coloque en su posición laterla pero debajo de todas las entradas. ¿Qué podemos hacer entonces? Disminuir el ancho de la barra de las entradas. Para ello buscaremos:

#main-wrapper {

width:450px;

float:right;

padding:100px 0 20px;

font-size:88%;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

y disminuiremos el ancho (width) de esta barra. Aquí, por ejemplo, es de 450; si lo disminuimos a 400 y hacemos click en "vista previa" veremos la diferencia.

Tened en cuenta que, a menos que necesitéis que la barra lateral sea más grande por alguna imagen o accesorio que incluyáis, no es necesario aumentar el ancho de la barra lateral, es suficiente con disminuir el ancho de la barra principal o de entradas (main-wrapper).



¡Y hasta aquí mis humildes y quizás confusas y confundidas explicaciones! Espero que os sirva de algo.

FavIcon

El FavIcon o Favorite Icon es un pequeño dibujo (un icono) que aparece en la barra de dirección del navegador y en la pestaña del mismo y sirve para personalizar la página. El que tengo en mi blog es un pequeño pastel. Ojo, con el código que he utilizado el favicon sólo puede verse con el navegador de Firefox.

Si disponemos de alguna imagen que nos gustaría utilizar como favicon, antes de incluirlo en el blog lo que tendremos que hacer será crear la imagen específica, para ello entraremos en FavIcon from Pics, haremos click en examinar para seleccionarla y a continuación haremos click en "generate FavIcon". El motivo de que haya que crear una nueva imagen a partir de la que tenemos es que el tamaño del favicon debe ser de 16x16; además, el formato también cambia (.png o .ico). En esa página, además, podemos obtener el icono animado, es decir, en movimiento (cuando se abre la página el icono se desplaza una vez hacia arriba), incluso se puede añadir texto, también en movimiento ("Scrolling text"). Podéis probar todos los que queráis y descargároslo a vuestro ordenador. FavIcon from Pics lo genera comprimido; no hay más que descomprimir el archivo una vez descargado, y subir a Blogger o a vuestro hosting de fotos habitual el favicon que queréis.

Para subir el favicon a blogger no hay más que descargar la imagen en una nueva entrada del blog y guardarla como borrador. En la pestaña "Edicion de HTML" de la entrada os aparecerá la dirección de la imagen (img src="XXX"), que es la que nos hará falta para el siguiente paso.


Aviso: si la imagen que queremos utilizar es muy grande, FavIcon from Pics no será capaz de transformarla, tendremos que reducir su tamaño antes (puede hacerse fácilmente editando la imagen en el Paint: Imagen - Expandir/Contraer).

Una vez tengamos la dirección de la imagen, iremos a la plantilla de nuestro blog, Edicion HTML, y buscaremos el siguiente código en la cabecera (head) de nuestro blog:

<title><data:blog.pageTitle/></title>

ahí pegaremos el siguiente código:

<link href='URL DE TU IMAGEN' rel='shortcut icon' type='image/x-icon'/>



<link href='URL DE TU IMAGEN' rel='icon' type='image/png'/>


cambiando el texto url de tu imagen por la dirección de la imagen que quieras tener como favicon.

Una vez hecho esto, hacemos click en guardar cambios y ¡listo!

Este código lo pude utilizar gracias a la entrada Favicón para Blogger Beta de Gemablog
, pero se ha escrito sobre ello en más blogs, por ejemplo: Favicon en el "Nuevo Blogger" o Favicon, Qué es y como se hace de Bloggea2 o Favicon en web o blog

.

Existen otras webs que nos permiten crear nuestro favicon: Dynamic Drive- FavIcon. En MpP Favicon Gallery podemos encontrar favicones ya hechos, según nos informa Bloggea2, que nos explica aquí cómo hacerlo. Y en Favicon.cc podemos crearlo manualmente, según se explica en Crea tu favicon en línea

.

Espero que se entienda y os sea de ayuda.

Información para imágenes y enlaces (título)

¿Quieres añadir una breve información a los enlaces e imágenes de tu blog que aparezca al pasar el ratón sobre ellos? Es muy muy sencillo, sólo tienes que añadir title="XXX" tras la dirección URL del enlace o imagen:


<a href="URL" title="XXX"> xxx </a>


Y si quieres que se abra en una pestaña o ventana nueva, detrás de ese atributo, como sigue:

<a href="URL" target="_blank" title="XXX"> xxx </a>



Si se trata de una imagen, haremos lo mismo:

<img src="URL" title="XXX">



Podéis comprobar el "efecto" situando el ratón sobre la imagen inferior de mi firma; no es instantáneo, hay que esperar unos segundos.

Nuevo "enlázame"

Como habréis visto, he cambiado el espacio Enlázame, así que aquello que contaba en la entrada anterior sirve, pero no son los que están actualmente en el blog. El nuevo código utilizado me lo ha facilitado Ariadna. En realidad ya lo había visto en Gem@blog, sólo que no termino de entender muy bien cómo funciona, es decir, qué tenéis que hacer para añadir un enlace a mi blog desde el vuestro con la imagen que veis aquí (a ver si la misma Ariadna puede sacarme de dudas...).
Bueno y el código es...

<a href="URL de tu pagina" target="_blank"><img src="URL de la imagen"/></a><br/>

<textarea><a href="URL de tu pagina " target="_blank"><img src="URL de la imagen"/></a></textarea>


De nuevo, aparecerá en la barra lateral, la imagen sobre el texto "Titulo", el cual podéis sustituir por "para enlazarme", "enlázame" o lo que quieras y que tendrá el mismo formato que todos los títulos de la barra lateral (color, tamaño, fuente).
En URL de la imagen tendréis que poner la URL (dirección web) de donde esté hospedada la imagen, algo que podéis hacer en varios sitios; yo utilizo Photobucket, aunque me recomendaron usar imageshake.us

Sobre la imagen, conviene que sea pequeñita, para que no quitemos demasiado espacio a aquellos que deseen añadirnos a su blog, y, como me decía Ariadna: "pon bien clarito el título de tu blog, para que se vea bien", aunque eso ya depende de vosotros, porque igual queréis que sólo se vea la imagen, sin texto alguno (el texto puede añadirse en el Paint o en Photoshop entre otros, es decir que forme parte de la imagen).

"Enlázame"

Aunque ya había creado ese espacio en mi blog fijándome en otros que había visto,lo perfeccioné gracias a Gem@blog, haciendo que formase parte de la plantilla, que tuviese el mismo formato (color, texto, subrayado, etc.) o, lo que es lo mismo, que formase parte integrada de la sidebar o barra lateral.

Para crear el cajón con la referencia de enlace a tu blog utilizaremos el código

<textarea><a href="tu URL"></a></textarea>

Y si queremos poner el título "Enlázame" (o el que más te guste) como si formase parte de la barra lateral pondremos delante

<h2 class="sidebar-title">Enlázame<

Es decir:

<h2 class="sidebar-title">Enlázame</h2><a href="tu URL"></a>

Modificado gracias al Convertidor de Chuano cuyo enlace Gem@ me dejó en los comentarios. Gracias,Gema.

Buscadores

A día de hoy puedes ver dos buscadores en mi blog.
El que se encuentra en la barra lateral es un buscador interno. El código que he utilizado lo he conseguido aquí y, en concreto el mío es éste:


<h2 class="sidebar-title">Buscar en el blog</h2><br /><form action="http://search.blogger.com/" name="b-search"><br /><input id="b-query" name="as_q" type="text"/><br /><input value="UTF-8" name="ie" type="hidden"/><br /><input value="blg" name="ui" type="hidden"/><br /><input value="aquienleamargaundulce.blogspot.com" name="bl_url" type="hidden"/><br /><input id="b-searchbtn" alt="Search This Blog" value="go" title="Search this blog with Google Blog Search" onclick="document.forms['b-search'].bl_url.value=<br />'aquienleamargaundulce.blogspot.com'" type="submit"/><br /></form><p>


Tan sólo tienes que cambiar mi URL por la tuya (sin http://www.) en los dos sitios donde aparece. El texto "Buscar en el blog" también puedes cambiarlo por el que queráis, así como el "go". La letra del título de ese espacio tendrán la fuente, tamaño y color que tienen los de la misma columna (probad y entenderéis lo que quiero decir y que tanto me cuesta explicar).



El segundo buscador es un buscador Google que, supuestamente también busca en nuestro blog. A día de hoy sólo me funciona para buscar en la web, no en mi blog,pero si te interesa o quieres probarlo, abajo tienes el código. Lo saqué de Bloggea2.


<div align="center"><!-- SiteSearch Google --><br/><form action="http://www.google.com/search" target="_top " method="GET"> <tr><td nowrap="nowrap" valign="top" height="20" align="left"> <a href="http://www.google.com/"><img border="0" alt="Google" src="http://www.google.com/logos/Logo_40wht.gif" align="middle"/></a> <br /><br/><input maxlength="255" value="" name="q" size="80" type="text"/><br/><input value="Buscar en..." name="btnG" type="submit"/><span style="font-size:-1;"><input value="www.aquienleamargaundulce.blogspot.com" name="domains" type="hidden"/><font color="#000000" size="2"><br/><input value="" name="sitesearch" type="radio"/> En la Web <input value="www.aquienleamargaundulce.blogspot.com" name="sitesearch" type="radio"/> A quien le amarga un dulce<br/><br/></font></span></td></tr></form><!-- SiteSearch Google --> </div>


Como verás, está según el formato en el que se encuentra en mi blog, pero se pueden cambiar varios elementos estéticos como el tipo de logo de Google que quieras que aparezca (si lo quieres más pequeño, cambia Logo_40wht por Logo_12wht); el largo de la casilla en la que se escribirá el texto a buscar -"input...size="80"- (si vas a poner el buscador en la barra lateral, por ejemplo, lo querrás más pequeño, digamos 50, aunque puedes ir probando hasta conseguir el que más te guste); la alineación (izquierda, centro o derecha) del logo, la casilla central o las opciones de búsqueda (align="center/right/left"); o el texto del botón ("buscar en..."). También se puede añadir un recuadro alrededor, que en mi caso está quitado. Por supuesto, allí donde aparezca mi dirección blog, deberás cambiarla por la tuya.


Espero que se entienda lo que he escrito... ;)