Cómo poner imagen cambia en header de blog en Blogger

M

maverickg

Alfa

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 28 Jun 2011

• #1

Hola todos, me gustaria saber como puede poner una imagen en el header de mi blog que cambie a otra imagen cada vez que se le pase el mouse por encima. Se puede hacer con blogger??

Saludos

 

U

ulises

Épsilon

• 29 Jun 2011

• #2

conosco uno, yo lo utilizo pero lo utilizo en un bloque vertical derecho, en mi blog, aka te dejo mi direccion El Psicoasesor , la imagen es la del niño con un enlace a suscripcio por al feed, si te parece aka te dejo el codigo:


<a href='http://direccion de tu feed/feed' class='botonrss'>Feed RSS</a>
El CSS será el encargado de hacer el efecto “hover“, es decir, que al pasar el puntero del mouse por encima se mostrará la segunda figura, dando la sensación de animación.
a.botonrss {
width:166px;
height:180px; /* Dimensiones de la imagen a tu gusto */
text-indent:-9999px;
overflow:hidden; /* Oculatando el texto del enlace */
display:block;
background:url(images/rss-boton.png) no-repeat 0 0; /* Poniendo la imagen como fondo */
}
a.botonrss:hover {
background: url(images/rss-boton.png) no-repeat 0 -180px; /* Al hacer hover, ponemos la segunda imagen de fondo */
}

esto lo puedes agregar en el header o bien un gadnet
espero te sea util n.n

aka un ejemplo El Psicoasesor para ke veas el efecto n.n

 

M

maverickg

Alfa

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 29 Jun 2011

• #3

Hola muchas gracias por responder, me sirve el codigo que me mandaste y me gusta mucho como te quedo algo asi quiero hacer, pero como lo pongo en el header en que parte del codigo de la plantilla??

Te dejo mi blog Enlace eliminado para que veas, lo que quiero hacer es cambiar esa imagen en el header que dice Maverickg.com.ar por una igual pero con efecto de iluminacion cuando se le pase el cursor.

Saludos

 

Julio2201

Zeta

Diseñador

• 29 Jun 2011

• #4

Si lo que queres es poner al lado derecho de tu header imagenes como iconos sociales, lo podes hacer con esto.

Lo primero que tenes que hacer es dividir la cabecera, podes ver este tutorial:

Dividir la cabecera del blog | Ciudad Blogger - Trucos y tutoriales para tu blog

y seria mucho mas facil ayudarte si nos dijeras que imagen quieres colocar para darte el codigo perfecto y no tengas que modificarlo tu.

 

M

maverickg

Alfa

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 29 Jun 2011

• #5

Hola gracias por responder. No lo de poner iconos en la otra parte del hearder no es lo que quiero aunque me gusto y ya lo hice, gracias. Solo quiero que el logo del header cambia cada vez que paso el mouse por encima y que cuando se les haga click enlace al Home del blog, lo he visto en muchos lugares. Te dejo las 2 imagenes que quiero usar

Enlace eliminado

Enlace eliminado

Saludos!

 

Julio2201

Zeta

Diseñador

• 29 Jun 2011

• #6

OK, lo que tenes que hacer es lo siguiente:

Primero, hace una copia de seguridad de tu plantilla, luego te vas a Blogger, Diseño, Edicion de HTML y precionas Ctrl+F para buscar lo siguiente:

Insertar CODE, HTML o PHP:

<b:widget id='Header1' locked='true' title='Colgado del Cable (cabecera)' type='Header'/>

y la sustituis por esta:

Insertar CODE, HTML o PHP:

<b:widget id='HTML99' locked='true' title='' type='HTML'/>

Lo que haremos con esto sera modificar el Gadget de la Cabecera y lo combertiremos en un Gadget HTML, ahora lo que tenes que buscar esta otra linea:

Insertar CODE, HTML o PHP:

]]></b:skin>

Justo encima de esa linea coloca esto:

Insertar CODE, HTML o PHP:

a.logo {
width:358px;
height:70px;
text-indent:-9999px;
overflow:hidden;
display:block;
background:url(http://3.bp.blogspot.com/-UGJWJmVpwew/Tgvkky9XXGI/AAAAAAAABfs/kueeQQX3YFk/s1600/colgadodelcable.png) no-repeat 0 0;
}
a.logo:hover {
background: url(http://3.bp.blogspot.com/-UGJWJmVpwew/Tgvkky9XXGI/AAAAAAAABfs/kueeQQX3YFk/s1600/colgadodelcable.png) no-repeat 0 -70px;
}

Lo que haremos con esto sera el efecto "HOVER" que es cuando pasas el mouse cambia de imagen.
Ahora guarda tu plantilla.

Tenes que ir a Elementos de la página y editar el gadget que esta en la cabecera, le colocas el siguiente codigo.

Insertar CODE, HTML o PHP:

<a href="[COLOR="red"]URL de tu Blog[/COLOR]" class="logo">[COLOR="red"]Nombre de tu Blog[/COLOR]</a>

Tenes que cambiar lo que esta en color ROJO.

Espero que te sirva.
Saludos.

EDITO
Tuve un error, en el codigo CSS pero ya lo corregi.

 

Última edición: 29 Jun 2011

M

maverickg

Alfa

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 29 Jun 2011

• #7

Hola muchas gracias por tu tiempo!! pero cuando reemplazo la primer linea me sale el siguiente error:

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente. <br/>Mensaje de error de XML: The element type "b:section" must be terminated by the matching end-tag "</b:section>".

Error 500

 

Julio2201

Zeta

Diseñador

• 29 Jun 2011

• #8

mmmmm, que raro, lo probe yo.

 

M

maverickg

Alfa

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 29 Jun 2011

• #9

en que blog?? porque tengo 2 y quiero hacer lo mismo en los 2 yo estoy probando el codigo que me mandaste Enlace eliminado

 

Julio2201

Zeta

Diseñador

• 29 Jun 2011

• #10

Yo lo probe en un blog de pruebas que tengo.

 

M

maverickg

Alfa

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 30 Jun 2011

• #11

Gracias!! me sirvio! y me gusto mucho como quedo. Pero lo raro es que me funcion en un blog y en otro no

Enlace eliminado Fijate como me quedo, podria moverlo un poco mas a la izquierda???