MODIFICAR EL ESTILO DE LA SALIDA DE RESULTADOS DEL GADGET BUSCADORHablamos del artilugio que viene de serie con Blogger y que genera un cuadro buscador cuyos resultados aparecen incrustados dentro de la misma página, justo arriba de las entradas. Muy estético a mi parecer, por cierto.
Para modificar su aspecto una vez añadido el gadget, sólo tenemos que buscar (con plantillas de artilugios expandidas) el comentario...
<!-- override gsearch.css -->
A continuación podréis encontrar todo el estilo por defecto. Las clases que más a menudo queréis modificar son:
- #uds-searchControl .gsc-results
{Cuadro general del gadget. Para cambiar el fondo, el margen y el padding, por ejemplo} - #uds-searchControl .gsc-tabhActive
{Aspecto de la pestaña activa} - #uds-searchControl .gs-result .gs-title
{Título de cada resultado} - #uds-searchControl .gs-result .gs-snippet
{Sumario de cada resultado} - #uds-searchControl .gsc-cursor-page
{Números inferiores para paginación} - #uds-searchControl .gsc-cursor-current-page
{Número página actual}
Si por ejemplo queréis que los resultados de búsqueda sólo incluyan el título del post, sin que se vea el sumario y la fecha, podríais incluir algo así.
#uds-searchControl .gs-result .gs-snippet,
#uds-searchControl .gs-result .gs-visibleUrl,
#uds-searchControl .gs-result .gs-publishedDate,
#uds-searchControl .gs-result .gs-relativePublishedDate {display:none;height:0px;width:0px;visibility:hidden;}
#uds-searchControl .gs-result .gs-visibleUrl,
#uds-searchControl .gs-result .gs-publishedDate,
#uds-searchControl .gs-result .gs-relativePublishedDate {display:none;height:0px;width:0px;visibility:hidden;}
¿POR QUÉ EL CÓDIGO DE UN GADGET NO FUNCIONA EN LA PLANTILLA Y VICEVERSA?En una página normal esto no pasaría, pero Blogger es especial para interpretar el código y tiene una forma muy particular de hacerlo.
Nos referimos al código insertado dentro de HEAD o dentro de BODY porque el problema básicamente, es que la plantilla no admite comillas dobles (") y la parte CSS normalmente no lleva comillas.
De esta manera, todo el código interesante que veáis por ahí y que pretendáis instalar en vuestra plantilla, primero tiene que ser transformado. Las siguientes dos líneas serían un ejemplo de cómo insertar un código para mostrar una imagen. El primero sería el normal y el que valdría para un gadget. El segundo es el que nos exige Blogger en la plantilla. La única diferencia son las comillas dobles o simples.
<img src="imagen.jpg"/>
<img src='imagen.jpg'/>
<img src='imagen.jpg'/>
Con el simple bloc de notas (Notepad) podéis hacerlo fácilmente con la función Reemplazar. Todas las comillas dobles las pasáis a sencillas (') y listo. Si el código incluye al mismo tiempo dobles y sencillas (por ejemplo en un script), la sustitución será dobles por sencillas y sencillas por ". Esto último (") sí lo admite Blogger. Y lo hace porque es una entidad HTML de carácter que precisamente los navegadores interpretan como comillas dobles.
Si usáis el bloc de notas, tendréis que realizar primero el cambio de las sencillas para no perderlas al cambiar las dobles:
Reemplazar dobles a ".
Reemplazar sencillas a dobles.
ENTIDADES DE CARACTERES HABITUALESY ya que estamos con entidades de caracteres, hay otras ocasiones en que un & u otro carácter nos da problemas en la plantilla. Es el caso también de los < >, que para HTML son indicativos de comienzo y fin de etiqueta y no los sabe interpretar de otra manera mas que de esa.
Las equivalencias para sustituirlos por entidades son las siguientes:
< ► &gt;
& ► &amp;
" ► &quot;
► &nbsp; (espacio blanco)
' ► &apos;
& ► &amp;
" ► &quot;
► &nbsp; (espacio blanco)
' ► &apos;
EJECUTAR CÓDIGO EN UNA ENTRADAOtra particularidad de Blogger es que el código escrito en una entrada no se interpreta correctamente si hay saltos de líneas entre ídem. Esto no pasa en gadgets o en plantilla, dónde además es conveniente crear saltos entre líneas para visualizar más cómodamente el código.
La solución también es simple: eliminar todos los retornos de carro que encontréis en el código que queréis poner.
Así, el código del script para crear frases aleatorias, que en la plantilla podría ir perfectamente de esta manera:
<script type='text/javascript'>
function frasesaleatorias (){
frases = new Array();
frases[0] = 'Comenta, que es gratis.';
frases[1] = 'Por cada comentario regalo un abrazo virtual.';
frases[2] = 'quot;Comenta que algo queda.';
frases[3] = 'No por mucho comentar, amanece más tarde.';
frases[4] = 'Tienes dos opciones: Opinar aquí o callar. Tú eliges.';
aleatorio = Math.random() * (frases.length);
aleatorio = Math.floor(aleatorio);
document.write(frases[aleatorio]);
}
</script>
function frasesaleatorias (){
frases = new Array();
frases[0] = 'Comenta, que es gratis.';
frases[1] = 'Por cada comentario regalo un abrazo virtual.';
frases[2] = 'quot;Comenta que algo queda.';
frases[3] = 'No por mucho comentar, amanece más tarde.';
frases[4] = 'Tienes dos opciones: Opinar aquí o callar. Tú eliges.';
aleatorio = Math.random() * (frases.length);
aleatorio = Math.floor(aleatorio);
document.write(frases[aleatorio]);
}
</script>
Mientras que en una entrada tendría que ir así para que funcionara:
<script type='text/javascript'> function frasesaleatorias (){ frases = new Array(); frases[0] = 'Comenta, que es gratis.'; frases[1] = 'Por cada comentario regalo un abrazo virtual.'; frases[2] = 'quot;Comenta que algo queda.'; frases[3] = 'No por mucho comentar, amanece más tarde.'; frases[4] = 'Tienes dos opciones: Opinar aquí o callar. Tú eliges.'; aleatorio = Math.random() * (frases.length); aleatorio = Math.floor(aleatorio); document.write(frases[aleatorio]); } </script>
Si pegais ambos códigos en un bloc de notas y ampliáis la pantalla, podréis observar que el segundo no tiene ningún salto de línea.
Nota: Como hemos visto en otro punto el primer código es para la plantilla. Para un gadget, las comillas simples (') tendrían que ser sustituidas por dobles (").
sus respectivas direcciones para el envío de los libros.