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://lh4.googleusercontent.com/-f08e4RgGe2o/UElCugaAILI/AAAAAAAABys/Uf2GQTOcf54/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.

Panel de administración siempre visible (widget)

Cuando decidimos dejar oculta la barra de navegación de Blogger, que figura en la parte superior del blog, se nos presenta un pequeño hándicap: no tenemos a mano el panel de administración que nos permita acceder directamente al escritorio y a la opción de publicar un nuevo post sin dar muchos rodeos. Lo mismo ocurre cuando hacemos uso de una plantilla prediseñada de Blogger, como las de BTemplates, muchas prescinden de la mencionada barrita de navegación, tan imprescindible para unos como molesta para otros. Incluso estéticamente ha sido tachada como poco favorecedora para nuestro blog.

Con este sencillísimo tutorial podremos tener visible la barra aún cuando la tengamos desconectada. La visibilidad de las opciones de la barra (escritorio y nuevo post) se verá como sigue, y sólo estará visible para el/la administrador/a del blog, nunca para los visitantes.
 

  • Ubicación: gadget java y plantilla (añadir CSS).
  • Proceso:

1) EN EL GADGET: Copiar este código:


<center><span class='item-control blog-admin'> <span class="panel_adm"> <strong>Panel de Administrador</strong> <a class="escritorio" href="http://www.blogger.com/home" target="_self" title="Escritorio">Escritorio</a> <a class="post-nuevo" href="//www.blogger.com/post-edit.g?blogID=123456789&from=pencil" target="_self" title="Post Nuevo">Nuevo post</a> </span> </span></center>



Lo marcado en rojo y en negrita (la secuencia de números 123456789) es el ID del blog. Debemos sustituirlo por el del nuestro. El código ID se saca de la barra de direcciones del navegador, desde el panel de escritortio del blog en cuestión. La siguiente imagen lo ejemplifica:


Foto cortesía de Compartidísimo


2) EN LA PLANTILLA: hay que copiar este código en "Añadir CSS" del diseñador de plantillas, opción "Avanzado":


span.panel_adm{display:block;background:#f4f4f4;width:220px;height:75px;border:1px solid #e8e8e8}
.panel_adm strong{font-size:15px;display:block;width:100%;border-bottom:1px solid #e8e8e8;text-indent:6px;padding:4px 0;margin-bottom:10px}a.escritorio{background-image: url(data:image/gif;base64,R0lGODlhEgARALMAALu7u6WlpcfHx46OjoODg2FhYZmZmenp6WxsbHd3d93d3VVVVdLS0rCwsPT09EpKSiH5BAAAAAAALAAAAAASABEAAARW0MkpAaA4t/da/hvXfVQojqR5opi6spI6HEdwevGJUMntACsDxXYC2BCiAqUgQgodKoJAQDgFDhPB6yWgKF6LFQOzAnxPGaZoYDgtMr0tJ5EZyDmESQQAOw==);background-repeat:no-repeat;background-position:10% 10%}
a.post-nuevo{background-image:url(data:image/gif;base64,R0lGODlhEgAQALMAAHd3d93d3cfHx2FhYWxsbIODg46OjrCwsFVVVdLS0kpKSvT09AAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAASABAAAARCcMlJZULq1D2P+gFHJUPiIaG4XApiJuqKfUMsfy2ssp8b87nfLBgD4HyxgoBA3LUEAF3M8CHYJAEFQHNdHATd8CYCADs=);background-repeat:no-repeat;background-position:10% 12%}
a.escritorio, a.post-nuevo {display:inline-block;height:22px;padding:4px 0 0 28px;color:#3399cc;font-size:12px}
a.escritorio{margin-right:24px}
a.post-nuevo:hover,a.escritorio:hover{text-decoration:underline !important;}

¡¡Y listo!! Panel siempre visible para l@s administradores/as aunque la barrita de navegación no lo esté.
    Suscribirse a: Entradas (Atom)