Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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) :


<b:widget id='LinkList2' locked='false' title=':.:Menú:.:' type='LinkList'>

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:

<b:widget id='LinkList2' locked='false' title=':.:Menú:.:' type='LinkList'>

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.

luciana dice...

Hola soy Luciana,tu blog es muy interesante!espero que siga asi...suerte!

Jaime Trujillo Escobedo dice...

Hola Luciana!! me alegra mucho que te guste, gracias por venir al Balcón! :-) Saludines :-)

Jairo Merkano dice...

uauh! te respondo desde Jairo Merkano...la verdad...el escaparate me habia solucionado muchas cosas...pero ahora que veo tu blog creo que tiene competencia...

jajaja!!!

saludos...

PD: como haces para poner "estas en: inicio, descargas, "cualquier cosa"... queda muy bien...lo que hace falta aca es un contador de visitas...

•ѕweeтnezz вιтcн dice...

Hey! thnks por pasar a mi blog!
Un halago te gustara :D
Bueno ps creo q me estare pasando por q tienes tantas cosas interesantez! :D
Gracias por el aviso.
un beso. ciao ciao

Jaime Trujillo Escobedo dice...

Hola Jairo Merkano!! me alegra mucho que visites el balcón! el escaparate también es muy bueno.. somos diferentes, Rosa también es muy amable ;-)

Lo del truco de estás en>.... eso lo voy a publicar un día de estos (quizás mañana) ;-)

Saludos!!

Jaime Trujillo Escobedo dice...

Hola •ѕweeтnezz вιтcн!! me alegra que te haya gustado, gracias por venir ;-) Saludines :-)

DianNa_ dice...

Hola, Jaime y gracias por pasarte por mi blog. La verdad es que ese lo tengo parado, demasiado trabajo... publico en el blog "Paseando por Terra", nada más, verás el link en mi perfil.

Aunque te advierto que a veces escribo cosas que aunque no son porno, son subiditas de tono y hay fotos e imágenes algo sin ropa :).

Me pongo de seguidora y si quieres algo, ya sabes dónde ando.

Tu blog es genial, te felicito .

Un beso, cuídate.

El Mejor Rock y Pop de Rosario dice...

Jaime buenisimo tu blog!
me encantan estas cosas.
Ya mismo te linkeo desde mi Blog.
Saludos desde Rosario, Argentina.

Trebison dice...

Ok Jaime jeje, gracias por la ayuda pero ahora cargo otra duda... si te podras fijar mi Sidebar es de dos y en el medio van las entradas,

http:/eduardotrebison.blogspot.com

con el fondo de color negro... quisiera colocar la del medio donde van las entradas de con un fondo algo parecido a esto: http://www.personal-marble.com/images/Marmo%20e%20Travertino/beige%20papiro.jpg en vez del fondo negro, me ayudarias mucho si hay la posiblidad.

Jaime Trujillo Escobedo dice...

Hola DianNa_ ! me alegra que te guste el Balcón ;-) gracias por pasarte a verme! yo me pasaré por el que tu escribes algún día :-) saludos!!!!!

Jaime Trujillo Escobedo dice...

El Mejor Rock y Pop de Rosario!!!!!!!!!!!!!!!!!!!! me alegra muchísimo que te guste!! gracias por el enlace :-) un enorme saludo desde España!! ;-)

Jaime Trujillo Escobedo dice...

Hola Trebison!! te refieres a ponerle un fondo al bloque de en medio donde van los posts entradass? eso es muy fácil ;-) ve a diseño, expandir artilugios y busca la línea que dice:

#main-wrapper {

después pégale esta línea debajo:

background:#000000 url(http://www.personal-marble.com/images/Marmo%20e%20Travertino/beige%20papiro.jpg) ;

ya tiene tu imágen incluida, si quieres otra imágen sólo tienes que cambiar la url (dirección) que hay entre los paréntesis (cuidado, no los borres)

Si necesitas algo más, aquí estoy :-) Saludos :-)!!

Jaime Trujillo Escobedo dice...

AAA se me olvidaba, añádele esto a la línea del background:

background:#000000 url(http://www.personal-marble.com/images/Marmo%20e%20Travertino/beige%20papiro.jpg) repeat-x;

lo de repeat-x hará que cuando un post (artículo) sea muy largo, el fondo no se corte y se repita para cubrir todo el bloque del medio ;-)

Saludos!!

Tito's dice...

Como haces para que al poner el ratón sobre el título de una entrada aparezca ese efecto que tienes en tu blog, es decir, que al poner el ratón sobre el título de una entrada aumente un poco de tamaño. Me gusta mucho tu blog.

Jaime Trujillo Escobedo dice...

Hola Tito's!! mira en esta entrada:

http://elbalcondejaime.blogspot.com/2008/10/links-decorados.html

allí te explico como hacerlo, si necesitas algo más, pregúntame, estaré aquí para ayudarte :-)

me alegra que te guste El Balcón, Saludos!! :-)

ZZMidway dice...

Buenas. Yo estoy intentando hacer esto en el título de un widget en el sidebar. El problema es por una parte que poniendo el título como enlace a nada (un a vacio sin href simplemente para ponerle el class) como enlace no consigo quitar el subrayado aún poniendole un text-decoration: none. Y luego que este mismo título es un desplegable utilizando scriptoc.. y protyp.. y deja de funcionar el desplegable. Ahi alguna manera de hacerlo? Sl2s y thx.

Jaime Trujillo Escobedo dice...

Hola ZZMidway, no se si habrá una manera, intentaré averiguarlo, dame más tiempo :-) Saludos!

ZZMidway dice...

Na dejalo ya he desistido, lo dejaré como esta. Sl2s y thx.

Jaime Trujillo Escobedo dice...

Ok, si necesitas cualquier ayuda, dímelo :-) Saludos!!

Anónimo dice...

ola jaime era para decirte que tus entradas me han servido mucho y que sigas asi.

un saludo.

P.D.: no podrías publicar una entrada sobre como crear páginas secundarias como las tuyas para un amigo, gracias.

Jaime Trujillo Escobedo dice...

Me alegro mucho, Anónimo.

¿A qué te refieres con páginas secundarias? ¿Quieres decir índices?

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo