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!

Read More

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://lh4.googleusercontent.com/-f08e4RgGe2o/UElCugaAILI/AAAAAAAABys/Uf2GQTOcf54/s25/comillas.png);
}

Read More

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.

Read More