Cómo hacer efecto de aumentar el título al pasar el cursor

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Esto de las transiciones con CSS3 es algo que a todos encanta por la variedad de efectos que podemos obtener y sin necesidad de utilizar ningún script, todo es CSS.

Uno de estos efectos que me han preguntado es cómo hacer para que la imagen de la cabecera (o el título del blog en caso de que no tengamos imagen) pueda aumentar al pasar el cursor con este efecto suave y deslizante.

Primero hay que procurar tener la imagen en un tamaño grande, esto es para que no se pixele al aumentarse. Con esto quiero decir que si por ejemplo, la imagen de la cabecera aumentará a 400px de ancho entonces el ancho original de la imagen debe ser de 400px o más.

Luego, hay que saber las medidas que tendrá la imagen cuando esté pequeña, para eso tendremos que sacar las medidas proporcionalmente para que no se desproporcione al reducirla (¿ves? te dije que algún día te serviría)

Ahora sí, entra en la Edición HTML de la plantilla y agrega antes de ]]></b:skin> lo siguiente:

#header img {
width:200px; /* Ancho de la imagen en su estado normal */
height:200px; /* Alto de la imagen en su estado normal */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header img:hover {
width:400px; /* Ancho de la imagen al pasar el cursor */
height:400px; /* Alto de la imagen al pasar el cursor */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Cambia los valores de width y height, width es el ancho de la imagen, y height el alto, en color verde verás a cuál corresponde cada una.
Si lo crees conveniente puedes agregar unos márgenes para que la imagen no parezca que se va hacia la derecha, es decir, que dé la impresión que el zoom es desde el centro, para ello agrega debajo de #header img:hover { esto:

margin-top:-10px;
margin-left:-30px;

Puedes jugar con esos valores hasta que des con los correctos.

Pero si no usas una imagen como cabecera entonces también puedes aplicar este efecto al título del blog.


Nombre de mi blog



El procedimiento es similar; agrega antes de ]]></b:skin> esto:

#header h1 {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header h1:hover {
font-size:80px; /* Tamaño del texto al pasar el cursor */
color:#FF00FF; /* Color del texto al pasar el cursor */
margin-left:-30px; /* Margen izquierdo */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Aquí es menos complicado pues no tienes que saber las medidas de ninguna imagen, sólo debes poner el tamaño de la fuente que tendrá el título del blog al pasar el cursor. Aunque por supuesto puedes agregar ahí otras propiedades como un color diferente, y también puedes usar los márgenes para que el texto se aumente desde el centro, pero si no quieres estas dos últimas opciones puedes eliminarlas sin problema.

Y así de sencillo puedes tener tu cabecera del blog con efecto de zoom al pasar el cursor, aunque, lamento desilusionar a los usuarios de Internet Explorer pues ellos no verán ningún efecto de deslizamiento. Otra razón más para usar un navegador moderno.

Read More

Icono en los títulos de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Imagen o icono a la derecha de los títulos de las entradas

Los títulos de las entradas en blogger pueden modificarse de muchas formas, y una de ellas es agregándoles una imagen o icono a su derecha.

Aunque también puede hacerse por medio de unas líneas de CSS, explicaré el procedimiento para realizar el truco en HTML (lo que tiene ventajas... Podremos añadir una imagen de fondo y un icono distinto a la derecha).

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

Busca este bloque de código:

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Y añade la línea que aparece resaltada en verde a continuación:

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>
<b:if cond='data:post.url'>
<img style="margin-right:4px;" src= "URL DEL ICONO"/><a expr:href='data:post.url'><data:post.title/></a>

<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Reemplaza URL DEL ICONO por la dirección de tu imagen o icono ^[+].

Haz vista previa para ver el resultado y guarda la plantilla para terminar.

Read More

Cómo mostrar sólo los títulos de las entradas en el diseño

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Mostrar sólo los títulos de las entradas en las páginas de etiquetas

En blogger, al abrir las páginas de etiquetas, las entradas salen desplegadas o "abiertas", complicando así la navegación del usuario o causando problemas a la hora de cargar el blog.

Con este truco, tus entradas aparecerán recogidas, siendo sólo visible el título de éstas.

Al hacer clic en el título de la entrada, el visitante podrá leer el artículo completo en de forma individual.

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

Busca la siguiente línea:

<b:include data='post' name='post'/>

Bórrala e incluye este bloque en su lugar:

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<li></li><data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Por último Guarda cambios.

Read More

Cómo añadir subtítulos debajo de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Añadir subtítulos debajo de los títulos de las entradas

Se me ocurrió un truco que puede resultaros de bastante utilidad. Se trata de añadir subtítulos bajo los títulos de las entradas:

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

Busca la etiqueta ]]></b:skin> y justo encima agrega este bloque de CSS:

.post h3 sub {
font-size: 14px !important;
display: block !important;
font-weight: normal !important;
background: transparent;
}

Ahora guarda cambios.

Para incluir un subtítulo en cualquier entrada, deberás escribir el título de la siguiente forma:




Es decir, el subtítulo debe llevar la clase _{al principio y la clase} al final.

Como ves, incluir una breve descripción al encabezado de una entrada no es algo complicado.

Read More

Agrega una imagen o icono en el título de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Imagen o icono en el título de las entradas (modo simple)

Ya hemos aprendido a incluir una imagen o un icono a los títulos de nuestras entradas por medio del HTML de nuestra plantilla. Dicho procedimiento era un tanto complicado pero tenía la ventaja de que la imagen aparecería en todos los títulos por igual.

Este segundo truco, y no por ello, de menor importancia, posee otra notable característica, o más bien hace lo contrario que el anterior: aplica una imagen o un icono a los títulos escogidos (se hace "manualmente").

Bastará con abrir una entrada cualquiera y en el recuadro del título, incluir el código que contiene la imagen:



Código:

<img src="URL DE LA IMAGEN"/>

Reemplaza URL DE LA IMAGEN por la dirección de tu icono ^[+].

El lugar en el que insertes el código no importa, ya sea antes, después o entre el título.

Publica la entrada y listo.

Read More