Preguntas frecuentes. Cosas sencillas en Blogger II | Oloblogger Más preguntas habituales con respuestas sencillas. MODIFICAR EL ESTILO DE LA SALIDA DE RESULTADOS DEL GADGET BUSCADOR Hablamos del artil...

19 de febrero de 2011

Preguntas frecuentes. Cosas sencillas en Blogger II

Más preguntas habituales con respuestas sencillas.

MODIFICAR EL ESTILO DE LA SALIDA DE RESULTADOS DEL GADGET BUSCADOR

Hablamos 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;}



¿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'/>

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 &quot;. Esto último (&quot;) 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 &quot;.
Reemplazar sencillas a dobles.


ENTIDADES DE CARACTERES HABITUALES

Y 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:

< ► &amp;gt;
& ► &amp;amp;
" ► &amp;quot;
  ► &amp;nbsp; (espacio blanco)
' ► &amp;apos;


EJECUTAR CÓDIGO EN UNA ENTRADA

Otra 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>

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 (").

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

12 comentarios :

  1. Hola,

    ¿se puede modificar el Gadget buscador para que los click sobre los resultados se abran en la misma ventana, en vez de en una ventana nueva?

    ResponderEliminar
  2. No lo sé Isaac, he estado haciendo pruebas, pero el código del buscador se resiste a ser cambiado. La clave estaría en poder cambiar el atributo _blank de los enlaces clase gs-title, por el atributo _self, pero no lo he conseguido.

    ResponderEliminar
  3. Tengo una gran pregunta frecuente, como disminuir al distancia entre la sidebar y el cuerpo? En mi blog http://notannuevo.blogspot.com uso la plantilla Awesome Inc. El problema es que con el diseñador de entradas pongo el ancho 1000px, y el ancho de sidebar 280px, pero con todo el espacio que come el espacio en blanco, me queda mas o menos 230 px :( AYUDAAA. Gracias Oloman, saludos desde Paraguay.

    ResponderEliminar
  4. Mark, el nuevo diseñador no lo utilizo, pero si no funciona desde dónde dices, tendrás que tocar la plantilla... Esa pregunta es tan frecuente que fue de las primeras que me planteé: enlace.

    ResponderEliminar
  5. Anónimo5/3/11, 1:11

    Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  6. Ya le cambie el aspecto a la salida de resultados! XD gracias!

    ResponderEliminar
  7. TEngo una pregunta. Me gustaría ponerle un lindo efecto a los enlaces, que al pasar el mouse se agrande o se ponga en cursiva. Algo lindo, ojala puedas ayudarme, ya busque por todos lados ):

    ResponderEliminar
  8. Aquí tienes cómo hacer ese tipo de cosas respuesta Sueñosdeunadmente
    http://goo.gl/CyGGo

    ResponderEliminar
  9. Hola muy buenos días a todos, He tenido mi blog desde hace ya 9 meses y me va de maravilla de acuerdo a mis expectativas; para todos los que estén interesados visiten mi blog de política…

    Quisiera que hagan un post completo relacionado a como podemos tener mas seguridad para nuestro blog. Les explico un poco mejor mi petición, recientemente hemos visto como hackean paginas wed muy importantes en el mundo y me da un poco de temor que me hackearan mi blog también…Todos los que tenemos un blog nos da temor que de la noche a la mañana todo el tiempo que hayamos invertido en nuestro blog se valla a la borda…Asi que seria bueno que nos den consejos para nuestra seguridad.

    Yo he tomado algunas medidas como son crearme un correo nuevo solo para mi blog, y hacer en login en mi computadora personal evitándome en lo absoluto meterme en otras pc para modificar mi blog.

    Les agradecería su ayuda…

    ResponderEliminar
  10. Te conteste brevemente por Twitter Daniel y ya te anticipé que no entiendo mucho de seguridad. Yo simplemente uso el sentido común para no dar a conocer los datos clave: cuenta de acceso y passwords

    Sobre esto, como tú dices, para el blog uso un usuario y contraseña distinta de todas las demás que utilizo para otros servicios (muchos) en los que me he registrado.

    Luego está el tema del malware. Ahí es más difícil que no te cazen alguna vez, pero con tener un buen antivirus y un adware, evitas la mayoría de troyanos que pueden "captar" tus datos. También están los avisos que proporciona Google sobre páginas potencialmente peligrosas.

    Como decía, usar el sentido común para no meterse en cualquier sitio.

    Por último, como en el fondo es inevitable que puedas ser objeto de hackers (sólo hay que comprobar que las páginas más seguras y conocidas alguna vez lo son), lo mejor es tener una copia de seguridad de tu diseño y de su contenido, lo más actualizada posible.

    ResponderEliminar
  11. Se puede quitar "Este blog" ?

    ResponderEliminar
    Respuestas
    1. Me ha costado adivinar a que te referías, pero tras un rato de cavilaciones creo que hablas del buscador. Si es eso la respuesta es sí. Tienes que editar el gadger correspondiente (buscador) y ahí puedes seleccionar o desmarcar cualquiera de las tres pestañas que se muestran por defecto. este blog, acceso desde aquí e Internet.

      Eliminar