Trucos blogger

[+	Este blog tiene muchas cosas:    http://vagabundia.blogspot.com/2006/09/indice-blogger.html Quitar el enlace en el título del post en las páginas de entradas individuales

Se me ocurrío una modificación que puede resultarte de interés. Se trata de retirar el enlace que hay en el título de las entradas al abrirlas de forma individual, un enlace que realmente no es necesario ya que únicamente sirve para abrir el artículo de nuevo (a pesar de que puede hacerse desde la barra de direcciones en el navegador).

Cabe decir que, al realizar este truco, los títulos de las entradas tendrán enlace sólamente en la portada del blog o en las páginas de etiquetas, lo que es indispensable para acceder a la entrada.








Diseño>Edición de HTML>expandimos artilugios









Busca este bloque de código:

Y reemplázalo por este otro:

Guarda la plantilla para terminar.

¿Qué hemos hecho? Hemos eliminado la parte del código que determina la presencia del enlace, es decir esto:

Ten en cuenta que no todas las plantillas son iguales por lo que el estilo que le hayas atribuido a los títulos podría hecharse a perder si no compruebas que en el primer código, la segunda línea tiene el atributo h3 o h2:

<h3 class='post-title entry-title'>

En caso de tener h2, edita todos los h3 que veas en el nuevo código a insertar. 

[+/-]

Botón para mostrar u ocultar la navbar de blogger a opción del lector

La navbar es una barra de navegación que blogger inserta por defecto en todas las plantillas que ofrece.










Nosotros hemos aprendido a ocultarla o eliminarla, así como a aplicarle un efecto bastante cómodo que transforma la navbar en un elemento transparente (visible al pasar el cursor por encima).

En esta entrada te enseñaré a introducir en tu blog un botón que, al pulsarse, oculta la navbar o la muestra. Esto puede ser una ventaja para aquel lector que desee utilizarla.


Ver el truco en funcionamiento


Se trata de un truco muy sencillo que podrás realizar en poco tiempo.

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta y añade este bloque encima:

A continuación guarda la plantilla:

Diseño>añadir gadget (elemento de página)>html-javascript

Pega lo siguiente:

TEXTO O IMAGEN

Reemplaza TEXTO O IMAGEN por una frase o palabra que actúe como título para el enlace.

También puedes hacer uso de una imagen o botón, por lo que puedes sustituir TEXTO O IMAGEN con este código:

URL DE TU IMAGEN"/>

Inserta la dirección del botón o el icono donde dice URL DE TU IMAGEN y guarda el gadget para terminar. 

[+/-]

Abrir los enlaces de la sidebar en una nueva ventana

Previamente vimos la forma de hacer que los enlaces o las imágenes con enlace de las entradas se abriesen en una nueva ventana ^[+].

Antes de comenzar debes asegurarte de que has añadido el gadget de "Lista de enlaces":










En caso de tenerlo, cambia el título del gadget por este otro  tal y como está escrito (que luego podrás cambiar): Lista de enlaces.

Diseño>Edición de HTML>expandimos artilugios

Busca esta línea:

Como puedes ver, aparece la frase Lista de enlaces que habíamos puesto como título al elemento.

Ya tenemos el widget localizado y tendrá este aspecto:

• 'data:link.target' target='_blank'>

Añade lo que ves en color verde, con un espacio, después de 'data:link.target'.

Guarda la plantilla para terminar:










Ahora podrás editar el título de la lista de enlaces e incluir una frase a tu gusto. 

[+/-]

Mostrar backlinks en la sidebar (barra lateral)

Los backlinks son los enlaces que obtiene una determinada web o blog desde otros sitos web.

En blogger tenemos una forma sencillísima de mostrarlos ya que hacemos uso de una única línea.

Diseño>añadir gadget (elemento de página)>Feed

Pega esto:

http://search.blogger.com/blogsearch?q=link:NOMBRE.blogspot.com

Reemplaza NOMBRE por el nombre de tu blog (sin http://).

A continuación podrás elegir distintas opciones:










1) Escoger el número total de enlaces a mostrar.

2) Mostrar la fecha de cada elemento marcando dicha casilla.

3) Mostrar el nombre del autor o la fuente que hizo el backlink marcando dicha casilla.

Para terminar guarda el gadget.

Referencia: Vagabundia 

[+/-]

Los cursores en el blog

Hace mucho tiempo me preguntaron la forma de cambiar el cursor al pasarlo por encima de un enlace, un título, un bloque de texto, una imagen...

Por suerte, todo eso e incluso más puede hacerse en blogger.

Antes de comenzar, conozcamos los tipos de cursores y sus respectivos nombres que serán necesarios para incluirlos en el CSS:

move
wait
crosshair
ne-resize
col-resize
progress
text
vertical-text
help
e-resize
se-resize
s-resize
sw-resize
nw-resize
w-resize
no-drop
row-resize
not-allowed

Diseño>Edición de HTML>expandimos artilugios

1) Para poner cualquier cursor en el título de las entradas busca este bloque:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

y añade debajo de .post h3 { esta línea:

cursor: NOMBRE;

Para terminar sustituye NOMBRE por el nombre del cursor que más te guste, por ejemplo move.

2) Para poner cualquier cursor en todos los enlaces del blog busca este bloque:

a:hover {
color:$titlecolor;
text-decoration:underline;
}

Y añade debajo de a:hover { esta línea:

cursor: NOMBRE;

Para terminar sustituye NOMBRE por el nombre del cursor que más te guste, por ejemplo help.

3) Para poner cualquier cursor en un enlace específico busca la siguiente etiqueta:

]]>

Y encima pega esto:

.enlacecurs:hover{cursor: NOMBRE; text-decoration: none;}

Guarda la plantilla.

Ahora, cada vez que desees insertar el enlace con cursor especial haz uso de esta línea:

DIRECCION">TITULO

Reemplaza DIRECCION por la URL de tu sitio web y TITULO por el texto del enlace.

Nota:

Para no estar copiando la línea que inserta el enlace con cursor especial, puedes hacer uso de la plantilla de entrada.

4) Para poner cualquier cursor en los enlaces de la sidebar (barra lateral):

Busca la etiqueta ]]> y encima añade esto:

.sidebar ul li a:hover{
cursor: NOMBRE;
text-decoration: none;
}

Reemplaza NOMBRE por el nombre del cursor elegido y guarda la plantilla.

5) Para poner cualquier cursor en los enlaces del post-footer o pie del post:

Busca la etiqueta ]]> y encima añade esto:

.post-footer ul li a:hover{
cursor: NOMBRE;
text-decoration: none;
}

Reemplaza NOMBRE por el nombre del cursor elegido y guarda la plantilla.

6) Para poner cualquier cursor en las imágenes de las entradas:

Busca la etiqueta ]]> y encima añade esto:

.post img a:hover {cursor: NOMBRE;}

Reemplaza NOMBRE por el nombre del cursor elegido y guarda la plantilla. 

[+/-]

Link o enlace con doble título

Ayer estaba recordando el truco del tooltip y lo útil que era el poder insertar la difinición de un enlace cuando pensé en idear otra forma de definir los enlaces o links.

Puedes ver un ejemplo en el blog de pruebas.

¿Te gusta el resultado? Si es así, pongámonos manos a la obra y veamos el código necesario:

TITULO AL PASAR EL CURSOR'"
onmouseout="this.innerHTML = 'TITULO NORMAL'" href="URL DE TU BLOG O WEB">TITULO NORMAL

Sustituye:

TITULO AL PASAR EL CURSOR: por la frase o palabra que aparecerá al poner el cursor encima del enlace.

TITULO NORMAL: (en ambos casos) por el título del enlace.

URL DE TU BLOG O WEB: por la dirección de tu sitio web, por ejemplo: http://google.es/

El código puede ponerse en un gadget html-javascript que encontrarás en el apartado de diseño:

Diseño>añadir gadget (elemento de página)>html-javascript

¡Así de fácil!

[+/-]

Quitar el marco punteado de los links e imágenes en Internet Explorer

Hace tiempo aprendimos a quitar el marco punteado que aparece al hacer clic en un enlace. Ese truco no funcionaba en Internet Explorer, o, al menos, en algunas versiones.

Juanma me pregunta si existe alguna forma de hacer que el marco punteado no aparezca en IE.










Y como no, hay una solución...

Diseño>Edición HTML>expandimos artilugios

Busca la etiqueta ]]> y encima agrega esta línea de CSS:

a:focus{outline:none;}

Guarda cambios y listo. 

[+/-]

Ventana de bienvenida en tu blog

Tras haber visto algún que otro truco para incluir ventanas de aviso en el blog, explicaré cómo puedes incluir una ventana con un mensaje de bienvenida que aparecerá automáticamente al abrir tu blog.

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta y encima pega esta línea:

Sustituye ESCRIBE AQUI TU MENSAJE por tu frase de bienvenida.

Guarda cambios y listo. 

[+/-]

Abrir los blogs de la lista de blogs en la misma ventana

Seguramente conocerás el gadget de blogger de "Lista de blogs" en donde puedes agregar tus blogs favoritos y ver sus actualizaciones, ya que se muestran las últimas entradas de dichos espacios.








Como comprobarás, al hacer clic en un blog o en alguna entrada que hayan publicado, se habre en una ventana nueva. Al parecer, según las últimas consultas que estoy recibiendo, esto molesta en ocasiones, debido a que el navegador se llena de pestañas.

Si quieres deshacerte de estas ventanas y hacer que los blogs de tu lista de blogs y sus respectivas entradas se habran en la misma ventana, sigue los pasos que te iré mostrando a lo largo de la entrada.

> Antes de comenzar, debes tener el gadget de la lista de blogs añadido.

Diseño>edición HTML>expandimos artilugios

Busca la línea que representa el gadget. Será similar a esta:

Y seguidamente borra las tres etiquetas que te muestro en color verde:

• 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  target='_blank'>
  

  
  
  

  
  
  
  
  
  

  
  
  target='_blank'>
  

  
  
  
  
  
  
  
  target='_blank'>
  
  
  
  
  
  
  -
  
  
  
  
  
  

  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  

Una vez eliminadas las etiquetas, guarda cambios.

Ahora simplemente tienes que hacer clic en cualquier blog de tu lista y comprobar que se abre en la misma ventana. ☺ 

[+/-]

Ventana de aviso al pasar el cursor por una palabra o una imagen

Tras haber visto las tres formas de poner ventanas de aviso y cómo personalizarlas, te mostraré este nuevo truco.


Se trata de incluir una imagen o un link que, al pasar el cursor por encima, aparecerá una ventana de aviso.


> Para realizar el truco con texto debes usar el siguiente código:

TEXTO O FRASE DE LA VENTANA')">FRASE O PALABRA

Sustituye:


TEXTO O FRASE DE LA VENTANA: por el texto o la frase que aparecerá en la ventana de aviso.


FRASE O PALABRA: por la palabra o la frase que mostrará la ventana.


Puedes probar el resultado pasando el cursor por la siguiente abreviatura: HTML


> Para realizar el truco con una imagen utilizaremos este otro código:

TEXTO O FRASE DE LA VENTANA')" href="#" onclick="return false">
URL DE TU IMAGEN" height="40"/>

Sustituye:


TEXTO O FRASE DE LA VENTANA: por el texto o la frase que aparecerá en la ventana de aviso.


URL DE TU IMAGEN: por la dirección de tu imagen o tu icono.


Puedes probar el resultado pasando el cursor por el siguiente logo:












Nota:

Cuando tengas la imagen lista, debes incluir en el código el ancho (width="80") y el alto (height="40") para que las medidas sean correctas.

[+/-]

Tooltip con una imagen

Anteriormente expliqué cómo hacer un tooltip decorado y ahora le toca al tooltip con imagen.


Lo que vamos a aprender es la forma de hacer un link de manera que al pasar el cursor por encima aparezca una imagen...

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta ]]> y encima añade estos bloques:

a.tooltip {
text-decoration:none;
color:
#000000;
position:relative;
}
a.tooltip span {
display:
none;
}
a.tooltip:hover span {
top:2em;
display:block;
left:5em;
position:absolute;
background: #ffffff;
}

Puedes cambiar el color que tendrá el enlace en la línea color: #000000; (encontrarás códigos de colores en la tabla de colores).


Guarda cambios.


Ahora siempre que quieras añadir el tooltip debes usar esta línea:

URL DE LA WEB O BLOG"
class="tooltip">TITULO DEL
LINKURL DE TU
IMAGEN">

Sustituye...


URL DE LA WEB O BLOG por la dirección de la web o el blog, por ejemplo http://google.es/


TITULO DEL LINK por el título que tendrá el enlace, por ejemplo Google

URL DE TU IMAGEN por la dirección de la imagen que se mostrará al pasar el cursor por encima.

¡Así de sencillo! =)

[+/-]

Tooltip en el enlace de comentaristas

Anteriormente habíamos visto cómo hacer un tooltip tuneado para los links. Hoy veremos otra forma de usar los tooltips, pero, esta vez lo pondremos en el enlace de comentaristas. Te dejo una imagen para que te hagas una idea...

Diseño>edición HTML>expandimos artilugios

Busca esta línea en tu plantilla:

Bórrala y pega esta en su lugar:

title='FRASE O TEXTO DEL TOOLTIP'>

Sustituye FRASE O TEXTO DEL TOOLTIP por alguna indicación que quieres mostrar en el tooltip, por ejemplo "Clic aquí para ver el perfil".

¡Así de fácil! :-D

[+/-]

Tooltip decorado

Un tooltip es un cuadrito que aparece al poner el cursor sobre algún enlace. Normalmente el tooltip explica y nos informa sobre algo relacionado con el enlace.

Los tooltips son originalmente de un color amarillo-crema pero ahora podrás ponerlos del color que más te guste...













Para poner un tooltip en tu blog deberás agregar unos bloques en el CSS, de forma que podrás "tunear" tu cartelito.

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta ]]> y encima pega estas definiciones:

a.tooltip{
position: relative;
z-index: 24;
color: #707070;
text-decoration: none;
}


a.tooltip:hover{
z-index: 24;
color: #a3a3a3;
text-decoration: none;
}


a.tooltip:visited{
text-decoration: none;
color: #707070;
}


a.tooltip:active{
z-index: 24;
color: #818283;
text-decoration: none;
}


a.tooltip span{ display: none;
}


a.tooltip:hover span{
border: 1px solid #818283;
display: block;
position: absolute;
top: 2.5em;
left: 3em;
width: 14em;
background-color: #cfcfcf;
color: #707070;
font-size: 8pt;
text-align: left;
padding-left: 2px ;
padding-right: 2px;
}

Puedes cambiar el tooltip y decorarlo a tu gusto:


color: #707070; Esto es el color que tendrá el link.


color: #a3a3a3; Esto es el color que tendrá el link al pasar el cursor por encima.


color: #707070; Esto es el color que tendrá el link mientras hacemos clic.


border: 1px solid #818283; Determina el borde del tooltip. 1px es el grosor, solid el estilo (puedes ver los estilos de borde en esta entrada) y #818283 es el color.


background-color: #cfcfcf; Es el color de fondo que tiene el tooltip.


color: #707070; Es el color de la letra del tooltip.


font-size: 8pt; El tamaño del texto en el tooltip.


Una vez tuneado, guarda cambios.


Ahora, siempre que quieras insertar el enlace con el tooltip usa esta línea:

URL DE LA PAGINA" class="tooltip">TITULO DEL ENLACEEL TEXTO DEL TOOLTIP

Sustituye...


URL DE LA PAGINA por la dirección de la web o blog que quieres enlazar, por ejemplo: http://google.es/


TITULO DEL ENLACE por el título del enlace, por ejemplo Google.


EL TEXTO DEL TOOLTIP por el texto que aparecerá en el tooltip, por ejemplo clic aquí para ir a Google.

¡Y ya tendrás tu tooltip!

[+/-]

Enlace o imagen de retroceso

En blogger tenemos los enlaces de navegación al final de las entradas, podemos ponerlos con imágenes, con texto o combinando las dos cosas.


Este truco es diferente, simplemente es una línea de javascript que puede incluirse en una frase o en una imagen y nos sirve para retroceder a la página anterior del blog.


Te dejo unos ejemplos aquí:


<- Volver


Volver


Puedes ponerlo en cualquier parte de tu blog.


Para poner el truco de retroceso con texto usa estas líneas:

Volver

Para poner el truco de retroceso con imagen y texto usa estas líneas:

URL DE TU IMAGEN" align="absmiddle" border="0" width="15" height="15"> Volver

Sustituye URL DE TU IMAGEN por la dirección de tu imagen y configura el ancho (with) y el alto (height) para que la imagen quede en su tamaño real.


Puedes cambiar el texto "Volver" por algo que te guste más, por ejemplo "Retrocede"


Para poner el truco de retroceso con imagen usa estas líneas:

URL DE TU IMAGEN" align="absmiddle" border="0" width="15" height="15">

Sustituye URL DE TU IMAGEN  por la dirección de tu imagen y configura el ancho (with) y el alto (height) para que la imagen quede en su tamaño real.

¡Suerte!

[+/-]

Links con efecto arco iris al pasar el cursor por encima

Este truco es bastante sencillo y muy el resultado es algo realmente precioso.


Con un simple script puedes hacer que tus links cambien a miles de colores automáticamente al poner el cursor por encima de ellos.

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta y encima pega esta línea:

Links con efecto arco iris al pasar el cursor por encima

[+/-]

Listas con "bullets" personales

Te voy a enseñar a crear tus propias listas, listas con bullets personales. Los bullets son los circulitos que salen en una simple lista de blogger, pero con este truco, podrás poner tus bullets favoritos, por ejemplo...

• Ejemplo 1
• Ejemplo 2
• Ejemplo 3

Para hacer esta lista, usamos este código...

URL DE TU IMAGEN O BULLET); color: rgb(148, 0, 211); font-weight: bold; font-size: 12pt;">
• TEXTO DE LA LISTA
• TEXTO DE LA LISTA
• TEXTO DE LA LISTA

Debes escribir lo siguiente:


URL DE TU IMAGEN O BULLET: la dirección (URL) de tu imagen o bullet, podrás encontrar muy lindos iconos en iconlook.


TEXTO DE LA LISTA: la frase o texto que irá en cada nivel, es decir, la palabra o frase que va en la lista ;-D


Si necesitas añadir más cosas a la lista, basta con añadir esta línea (siempre antes de la etiqueta )

TEXTO DE LA LISTA

Si quieres hacer una lista de enlaces, deberás usar este otro código:

URL DE TU IMAGEN O BULLET); color: rgb(148, 0, 211); font-weight: bold; font-size: 12pt;">
• URL DE LA WEB O BLOG">TEXTO DE LA LISTA
• URL DE LA WEB O BLOG">TEXTO DE LA LISTA
• URL DE LA WEB O BLOG">TEXTO DE LA LISTA

Debes incluir lo mismo que antes pero esta vez también deberás poner la URL DE LA WEB O BLOG, que podría ser http://google.es/ por ejemplo ;-D


Al igual que en el anterior código, si deseas añadir más palabras a la lista, añade esta línea  (siempre antes de la etiqueta )

URL DE LA WEB O BLOG">TEXTO DE LA LISTA

Y así quedaría la lista de enlaces...

• Google
• Yahoo
• You Tube

¡Suerte! :-D

[+/-]

Cómo hacer un link

Un link es un enlace que sirve para "unir" otra web o blog con tu espacio. Un link es una palabra o una frase que al hacer click te lleva a otro sitio.


Por ejemplo, un link puede decir: mi buscador favorito y al hacer click puede llevarnos a google. 

Puedes poner los links en entradas (posts) o en un gadget de html-javascript de la parte de diseño de tu blog, de esta forma, verás el link en la sidebar (barra lateral) de tu blog. 

Si lo pones en una entrada, puedes hacerlo de dos formas, o bien usando el planeta con una especie de cadenita encima, que al hacer click, nos permite escribir la dirección de la página a la que queremos enlazar o puedes usar este código:

DIRECCION DEL LINK">TITULO DEL LINK

Y pegarlo en una entrada. Debes borrar la frase que dice DIRECCION DEL LINK y escribir la URL (dirección) de la página o el blog al que quieres enlazar, por ejemplo http://google.es/Cuándo hayas escrito la dirección de la página, debes poner un título, para hacerlo, borra la línea que dice TITULO DEL LINK y pon por ejemplo Google.


Poner links es muy sencillo, y, con ellos, podemos hacer grandes cosas, además de poder navegar sin tener que escribir una dirección. Si además quieres ponerle color al link, puedes hacerlo con esta línea de código:

CODIGO DEL COLOR);" href="DIRECCION DEL LINK">TITULO DEL LINK

Lo pones en una entrada, y al igual que en el anterior código, pones la dirección y el título del link.

Donde dice CODIGO DEL COLOR debes escribir el código de el color que desees, puedes elegir miles de colores en la tabla de colores.


Unos ejemplos: 

> Sin color: El Balcón de Jaime


> Con color: El Balcón de Jaime

¡Así de fácil!

[+/-]

Quitar el marco punteado de los links e imágenes

Es un truco sencillísimo de aplicar. En los blogs, cuando ponemos el cursor encima de un enlace, y hacemos click, aparece un marco punteado, que, en algunos casos, puede sernos útil y en otros bastante incómodo. Si no sabes a lo que me refiero puedes verlo tu mism@...















*El marco punteado también aparece en imágenes.


Si quieres quitarlo, sólo tienes que ir a...

Diseño>edición HTML>expandimos artilugios

Justo encima de la etiqueta ]]> pegamos este código:

a {
outline:none;
}

¡Guarda cambios y listo!
¿A que es fácil?

También interesante...


- Quitar el borde de las imágenes

[+/-]

Efecto hover en las listas de enlaces

Como puedes comprobar, tengo un efecto en mi lista de enlaces (menú) de mi sidebar, que al poner el cursor encima hace que cambie el color, el tamaño y aparezca una imágen a la derecha de las palabras.


Si quieres aprender a realizar este truco sigue los pasos...

Diseño>edición HTML>expandimos artilugios

1) Debes saber el nombre exacto del título que tiene tu elemento de sidebar (barra lateral) por ejemplo, si tenemos el título "buscador" debemos buscar "buscador" no "Buscador". Tiene que estar bien escrito.

También debes tener claro dónde vas a poner el efecto, puede ser en un elemento html-javascript, en una lista de enlaces... etc.


2) Ahora comienza la búsqueda de las propiedades del elemento. Puedes buscar más rápido apretando la tecla "Ctrl" y la tecla "F" al mismo tiempo.

Aparecerá un buscador para localizar el código. Cuando lo tengamos localizado, será algo como esta línea (que es lo que lo define) :

3) Lógicamente, la palabra ":.:Menú:.:" es el nombre de mi lista de enlaces, pero en tu blog aparecerá con el nombre de tu elemento.


Ahora debemos copiar la parte que te señalo en azul:

Si tienes una sidebar solamente, buscamos las propiedades de la sidebar en el CSS, es decir, esta línea:

#sidebar-wrapper {

Si tienes dos sidebars (barras laterales) aparecerá como:

#newsidebar-wrapper {

4) A esa línea le sigue un bloque con todas las medidas y los colores de la sidebar. El bloque finaliza con una llave como esta }


Pués justo debajo pega el nombre del elemento como se muestra a continuación:

#Nombre de tu elemento a:hover {
}

5) Ahora puedes empezar a añadir los efectos... por ejemplo, para que el texto se agrande, salga en negrita, de color azul, y con una flechita verde a la derecha pondremos esto:

#Nombre de tu elemento a:hover {
padding: 0px 15px 0px 0px;
background:url(http://www.iconlook.com/icondb/sweetie/png-8/16-arrow-left.png) no-repeat right;
color: #025ebb;
text-decoration: none; font-size:110%
}

Con eso ya tendremos los efectos añadidos. Sólo será necesario guardar los cambios.

Para editar los efectos...


- background: url (....) es la imagen de fondo (la flechita, en este caso) que está a la derecha, si la queremos a la izquierda cambiaremos "right" por "left"


- color: #025ebb; es el bonito color azul, se puede cambiar a cualquier otro (puedes usar la tabla de colores).


- text-decoration: none; es la decoración del texto al poner el cursor encima (no tiene decoración, pero se le puede añadir "underline" para que aparezca subrayado)


- font-size: 110%; es el tamaño que tiene al pasar el cursor por encima, es el tamaño efecto botón, que se agranda al pasar el cursor (si lo quieres más grande, cambia la cifra a 120 por ejemplo).


También puede añadirse un efecto botón hover (al pasar el cursor por encima de los enlaces) para todos los links (enlaces) de nuestro blog. Este es el post que te explica como hacerlo. 

[+/-]

Mostrar todas las entradas del blog.