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.

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)