Plantillas diseñadas por mí (20)

Edito de nuevo esta entrada donde os presentaba dos nuevas plantillas de la serie "Agenda", ya que he añadido novedades importantes y quiero comentarlas.

Por una parte, podéis ver una DEMO de la plantilla funcionando, cosa que os ayudará a ver mucho mejor el diseño. Y por otra parte, he incluido en el archivo que os descargáis unas instrucciones para la instalación mucho más detalladas y completas. Esto eran dos peticiones de muchos usuarios, y ahí las tenéis.

Las dos plantillas parten de una misma idea, representar cuadernos, notebooks, blogs, pero con resultados diferentes, y las dos incluyen iconos de suscripción colocados de forma muy original. El primer diseño presenta una cabecera de gran tamaño y con muchos elementos, mientras que el segundo casi no tiene cabecera y tiene una imagen mucho más elegante.

Plantilla "Agenda_06":

Plantilla de 3 columnas con las dos sidebars a la derecha. Representa un cuaderno de anillas sobre un fondo de madera color claro, con varios elementos sueltos en la cabecera que le dan un aire informal al conjunto.

Presenta iconos de suscripción vía RSS y E-mail ya implementados en la propia plantilla, e insertados en el blog de una forma muy original.

DEMO...

(Instrucciones de descarga)

Descargar esta plantilla . . .

 

Plantilla "Agenda_07":

Plantilla de 3 columnas con las dos sidebars a la derecha. Representa un cuaderno de anillas sobre un fondo grunge azul claro, y pequeños adornos en la parte superior del cuaderno. Una imagen mucho más elegante que la anterior plantilla.

Presenta icono de suscripción RSS ya implementado en la propia plantilla, e insertado en el blog de una forma muy original.

DEMO...

(Instrucciones de descarga)

Descargar esta plantilla . . .

Vista de compatibilidad en Internet Explorer 8

A todos los que uséis la versión 8 de Internet Explorer os interesa seguir leyendo.

Cada vez somos más los que usamos la versión 8 de Internet Explorer, y no todos saben que esta versión ya se ha diseñado de manera que cumpla los estándares por defecto (más o menos), un tema que había sido muy criticado en versiones anteriores de este navegador. Esto implica que sitios web que habían sido diseñados para versiones anteriores es posible que no se vean correctamente, pueden surgir desplazamientos extraños de algunos elementos, o códigos javascript que no funcionen bien, entre otras cosas.

Pero eso tiene una fácil solución con IE8, solo tenéis que pinchar sobre el botón de "Vista de compatibilidad" que existe en la barra de navegación, junto al de "Actualizar" y "Detener". Lo he marcado de color rojo en la captura de pantalla siguiente:

Pinchando sobre ese botón se activa la "Vista de Compatibilidad", y esto hace que el sitio que estemos visitando se vea como en IE7, por lo que desaparecen los errores que he explicado antes. Además, se os quedará guardado la activación de esta opción para el dominio donde lo hayáis activado, y no tendréis que repetir esto cada vez que entráis en un mismo sitio.

En Blogsmadeinspain uno de los errores que generaba esto es que no funcionaban correctamente los botones de colores que hay en la parte superior de la sidebar derecha, con los distintos temas. Así que ya sabéis, si usáis IE8 y notáis cosas raras al entrar en algún sitio web, solo tenéis que activar esta opción y problema resuelto.

Modificar el gadget de búsqueda de Blogger

Desde que Blogger publicó el gadget "Cuadro de búsqueda", sois muchos los que me habéis preguntado cómo podía modificarse, darle un estilo más atractivo y personal. En definitiva, adaptarlo más al diseño de vuestro blog.

Aunque este gadget presenta algunos parámetros de configuración, todos son referidos a la búsqueda y no a la imagen o diseño del mismo. Pues bien, aquí os voy a explicar como añadiendo unos sencillos códigos en vuestra plantilla, podréis modificarlo y adaptarlo a vuestro gusto.

El aspecto que este gadget presenta es este:

Y así podéis verlo en la sidebar izquierda de Blogsmadeinspain:

Yo he personalizado totalmente el botón, el color y tamaño de texto, y lo más importante, he quitado la publicidad de Google. Si queréis personalizar este útil gadget de Blogger, a continuación explico cómo hacerlo.

Leer completo...[+/-]

Lo primero, y para los que no lo habéis usado nunca, decir que para instalarlo en vuestro blog (normalmente en una sidebar) tenéis que entrar en "Diseño/Elementos de la página", pinchar sobre "Añadir un gadget" en la posición que vayáis a colocarlo, y dentro del cuadro de opciones que os sale elegir "Cuadro de búsqueda" (como en la siguiente imagen):



Veamos ahora por partes todo lo que podemos editar y modificar:

Eliminar la publicidad inferior de Google:

Localizar en la edición html de vuestra plantilla el código ]]></b:skin> y pegar justo arriba de él, estos códigos:

.gsc-branding-text {display:none;} .gsc-branding-img-noclear {display:none;}

Solo con hacer esto, habrá desaparecido la frase de publicidad de Google.

Personalizar el botón de "Buscar":

En el mismo lugar que antes, pegar este código:

input.gsc-search-button { color: #ffffff; height: 31px; font-weight:bold; font-size: 14px; background: #cc0000; border: 1px solid #000000; }

Con color: definimos el color de texto de la palabra "Buscar".

Con height: el alto en píxeles del botón. También podríamos incluir width: 30px; para expresar la anchura del botón, aunque por defecto se adapta al tamaño de texto elegido.

Con font-weight: podemos fijar si queremos el texto en "negrita" (bold) o normal (normal)

En font-size: definimos el tamaño de la letra en píxeles.

En background: colocamos el color de fondo que queremos para nuestro botón, con el código hex correspondiente. En el caso de mi blog, yo he colocado una imagen hecha por mí, en vez de un color de fondo. Para hacer esto sustituir ese renglón completo por ...

background: url('URL COMPLETA DE LA IMAGEN') no-repeat;

Y por último en border: definimos el borde que tendrá nuestro botón. Primeramente el ancho en píxeles, después el formato de línea(solid - línea continua, dotted - línea de puntos, etc...), y al final el código hex del color que queramos para el borde.

Si alguno de estos parámetros queremos que aparezca el que tiene por defecto Blogger, basta con borrar el renglón de código que corresponda.

Personalizar la caja de búsqueda:

La caja de búsqueda es el recuadro donde se escribe el texto que buscáis. Por defecto tiene el fondo de color blanco y las letras de color negro, pero esto puede cambiarse. Añadir en el mismo lugar que antes este código:

input.gsc-input { color: #cc0000; background: #e6e6e6; }

En color: se define el código hex del color del texto que se está buscando, y en background: el del fondo de la caja de búsqueda.

Merece la pena hacer pruebas vosotros mismos, ya que este gadget es muy útil, está muy bien implementado y sus resultados se muestran de una forma clara, atractiva, y en la mayoría de los casos muy integrada con el aspecto general del blog.