Colocar cualquier tipo de imagen como cabecera del blog

¡ 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.


Colocar cualquier tipo de imagen como cabecera del blog

Algo fundamental en un blog es el uso de una atractiva cabecera, un logotipo curioso o simplemente un título especial. En muchas ocasiones nos preguntamos si añadir una imagen gif (ya sea con o sin movimiento) o con cualquier otro formato en la cabecera o header del blog es posible.

Y, aunque previamente aprendimos a mostrar en la cabecera, un fondo de imagen en movimiento, no hemos visto aún la forma de hacerlo con una imagen en particular.

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

Busca este bloque y añade las líneas que ves en color verde:

#header-wrapper {
visibility: hidden; display: none; height: 0px;
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ahora busca esta línea:

<div id='header-wrapper'>

Y añade este código justo encima:

<center><a href='URL DE LA PAGINA'><img title="Inicio" src='URL DE LA IMAGEN'/></a></center>

Sustituye URL DE LA PAGINA con la dirección de tu blog, de manera que al hacer clic sobre la imagen, ésta nos lleve al inicio de la bitácora.

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

Las etiquetas <center> y </center> al principio y al final del código, centrarán la imagen. Para alinearla a la izquierda simplemente debes borrarlas. Si por el contrario, prefieres alinearla a la derecha, cámbialas por <right> y </right>.

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

Read More

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

Cómo instalar Headers o cabezeras aleatorias

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

Headers aleatorios.

Con este truco tendremos la posibilidad de mostrar diferentes headers (cabeceras del blog) cuando cada vez que actualices el blog.

Lo primero de todo debemos tener las imágenes que vallamos a poner en los headers preparadas.

Las subimos a un servidor de imágenes, o a blogger, esto nos servirá.
Importante! si ya tenemos una imágen en la cabecera, debemos eliminarla, si no lo hacemos, nos "tapará" las otras.

Ahora vamos a diseño-edición HTML- expandir plantilla de artilugios, y lo pegamos donde vemos muchas "llaves" como esta } por ejemplo con los headers quedaría bién.

#header {
background:#476 url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}

Colocamos este código antes de </head> (aunque también funciona en un gadget o elemento html-javascript que encontrarás en la parte de Diseño.)

<script type="text/javascript">
var banner= new Array()
banner[0]="URL DE IMAGEN"
banner[1]="URL DE IMAGEN"
banner[2]="URL DE IMAGEN"
banner[3]="URL DE IMAGEN"
banner[4]="URL DE IMAGEN"
var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");

</script>

Este código puede mostrar 5 imágenes de cabecera.

Read More

Cómo instalar cabeceras que cambien constantemente

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

Headers (cabeceras) que cambian automáticamente

Bueno, el título lo dice todo, este fantástico truco nos da la opción de poder darle un aspecto más "vivo" a nuestro blog, se trata de headers (cabeceras) que van cambiando automáticamente cada vez que navegamos por el blog...

(1) Lo primero debes preparar las imágenes que aparecerán en la cabecera. Intenta que tengan el mismo tamaño.

(2) Las subiremos a un servidor, (blogger nos sirve) como Tinypic para poder obtener después la url.

(3) Si estás listo y tienes todo preparado, ¡manos a la obra!

Diseño>edición HMTL>expandimos artilugios

Buscaremos en la parte del CSS el bloque que representa al header.

Empezaría con la línea #header { y terminaría con una llave }

Elimina el bloque por completo y pon este en su lugar...

#header {
background:#476 url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}

Ahora guardamos Cambios.

Busca la etiqueta </head> y antes pon este script:

<script type="text/javascript">
var banner= new Array()
banner[0]="URL DE IMAGEN"
banner[1]="URL DE IMAGEN"
banner[2]="URL DE IMAGEN"
banner[3]="URL DE IMAGEN"
banner[4]="URL DE IMAGEN"
var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>

En URL DE IMAGEN debes escribir la dirección (URL) de tus imágenes.

Ten en cuenta que puedes poner las imagenes que quieras pero siempre has de tener un numero por debajo del total, lo puedes comprobar, el primero empieza en 0 y después sigue normal...

Eso es todo, ¡Suerte!

Read More