Imagen de fondo en títulos de las entradas

Con este truquito podemos ponerle una imagen de fondo a los títulos de las entradas.

Ubicación: plantilla.

Buscar estas líneas

h3.post-title { 
.post-title { 
.post h3 {

o en su defecto esta otra h3.post-title, h4 { y copiar debajo este código:

background:url(URL DE LA IMAGEN)

Solo nos queda añadir el enlace de la imagen. 

Captura de pantalla de El Cajón de los Girasoles

Enmarcar el post-footer

Con este truquito, será muy fácil ponerle marco al footer de las entradas del blog.

Buscar esta línea .post-footer {

y pegar debajo de ella la siguiente:

border:solid 1px #000000;
padding:5px;

Todo es editable a gusto personal.

Solid es el borde. 
1px es el grosor del borde.
#000000 es el color (negro).


Enmarcar títulos en gadgets

Foto cortesía de Las Provincias
Un truquito para dar alegría a los titulares de los gadgets y, sobre todo, dejar en claro dónde acaba uno y empieza otro. Así, el orden impera en el diseño conjunto del blog.

Puede o bien, ponerse un color de fondo, o una imagen como background. Para el primer caso...

Pegar encima de ]]></b:skin>






.sidebar h2{
background: #cccccc;
border: 1px solid #666666;
padding:5px;
}

Y para poner una imagen de fondo...

.sidebar h2{
background: url(url de la imagen elegida)no-repeat top center;
border: 1px solid #666666;
padding:5px;
}

- Para cambiar el color de fondo cambiar el codigo cccccc por el que se desee.
- Para cambiar el color del borde cambiar el código 666666 por el que se desee.
- Para cambiar el grosor modificar border: 1px (a mayor tamaño + gruesa la linea).
- Para alterar el tamaño del fondo cambiar padding:5px;

El resultado final quedaría así:

Los títulos enmarcados y con imagen de fondo son "No te pierdas nada" y "Bloggroll para leer".

 

Enmarcar fecha entradas

Un truco fácil y de resultado bien estético: tener la fecha del blog enmarcada, con posibilidad de poner color y tipo de letra a gusto personal.

Buscar /*Posts y debajo de h2.date-header { pegar lo siguiente:

text-align: center;

background-color: #99C9FF;

border:solid 2px;

border-color:#6666ff;

padding:5px;


La fecha queda centrada. El borde, el color de fondo... pueden modificarse.

Quedaría más o menos así:


Link del email a una imagen

Este sencillísimo truco permitirá que pongamos nuestra dirección de email en una imagen (que no es igual a una imagen generada de la dirección de correo). Al posar el cursor del mouse sobre la imagen, esta nos llevará al servidor de correo para mandar un email a la dirección marcada. Esto se consigue con el parámetro "mailto" (en rojo).

Sencillo y lo mejor de todo, evitará que los spamers nos "cuelen" el mail.

El código es este: 

<a href="mailto:URL CORREO"><img src="LINK DE LA IMAGEN"></a>

Ocultar créditos "Con la tecnología de blogger"

Este truco tan solo los mantiene ocultos, no los elimina. 


Antes de ]]></b:skin> hay que pegar este código:

#Attribution1{
visibility:hidden;
display:none;}

Para que vuelvan a aparecer los créditos basta con borrar de la plantilla el mencionado código.

Ocultar el título del blog

Foto cortesía de Comenzando de Cero
Por defecto, Blogger incluye en sus plantillas una cabecera que muestra el título, y abajo, la descripción que le demos al blog. Si se desea prescindir de este título sin llegar a eliminarlo, al igual que la descripción, hay que proceder a ocultarlo (y ¡ojo!, sin eliminarlo, no vaya a ser que más adelante queramos que aparezca). 

Para ello hay que ir a la plantilla y buscar esta línea...

.Header h1 {

...o en su defecto esta otra
 
#header h1 {

...y debajo de cualquiera pegar este código:

display:none;

Igual para la descripción hay que buscar esta línea...

.Header .description { 

...o bien esta

#header .description {

...y pegar este código debajo:

display:none;

Este truco SÓLO oculta el título y la descripción del blog, no los elimina. Para que vuelvan a aparecer nada más hay que prescindir del código display:none;

¡Y listo!

Personalizar los links

Foto cortesía de Acens
Hay a quien le gusta personalizar los enlaces del blog, bien que aparezca un subrayado, que cambie el color o el tamaño al pasar el cursor del mouse o añadirle sombra. Sea como fuere, con este truco cambiar los atributos de los enlaces es coser y cantar.

Primero hay que tener en cuenta lo que nos ofrece Blogger en la plantilla.

a:link el modo como se ven todos los links de la página antes de hacer click en ellos.
a:visited la apariencia de los links después de hacer click en ellos.
a:hover el efecto que da al pasar el mouse sobre un link.

Tras cada una de estas líneas aparecerán los atributos (color, tamaño, letra...). Para modificarlos y crear diversos efectos, hay que proceder a añadirlos debajo de cada línea que nos interese cambiar:

underline: muestra el subrayado.  
none: quita el subrayado.   
blink: link parpadeante (no funciona en Internet Explorer ni Google Chrome).
font-weight:bold; hará que el link se vea en negrita. 
font-style:italic; hará que el link se vea en cursiva.
font-size:16px; cambiará el tamaño del texto del link. 
background:#fe6700; cambiará el fondo aotro color (modificable cambiando el código en rojo) 
background-image:url(LINK IMAGEN); mostrará una imagen en el link.

Un ejemplo:

a:link {
color:#FC8D40;
text-decoration:none;
}
a:visited {
color:#FFF9E7;
text-decoration:blink;
}
a:hover {
color:#1C94B9;
text-decoration:none;
font-weight:bold;
font-style:italic;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_wstn09OcZ3jHzFoIFGUUgXAAQqDS2kTLkWqUE6w1Bhpgepvw9YxV0L-iOESJSOs9l6SovkuPNDFraq2M6zbLU-caaWdceGZHlFnzZx_PJI9OzuhWFYUp_9tCDlEWmDVhznLm-3YctadM/s25/comillas.png);
}

Centrar títulos en sidebar (2 códigos)


Con este sencillo código, los títulos de los gadgets de la sidebar se verán centrados.

  • Ubicación: plantilla.
  • Proceso:

CÓDIGO 1: Copiar antes de ]]></b:skin>

/* Headings
----------------------------------------------- */
h2 {
-moz-border-radius: 4px;
background-color: transparent;
color: #1e4263;
font-family: 'Schoolbell';
font-size: 17px;
font-weight: normal;
height: 20px;
line-height: 20px;
text-align:center;
width: 100%;
}

El código es editable a gusto personal: tamaño fuente, colores... Lo que está en rosa es lo que edito en cada diseño nuevo de plantilla.

CÓDIGO 2: Copiar también antes de ]]></b:skin>

.sidebar .widget {
text-align: center;
margin:0 0 1.7em;
padding:0;
}

Este último código trastoca la alineación del contenido de los gadgets, por lo que habría que ajustarlos luego. La lista de blogs queda centrada también, además de su título, no queda alineada a la izquierda como por defecto viene en Blogger.
Suscribirse a: Entradas (Atom)