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...
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.
Hola soy Luciana,tu blog es muy interesante!espero que siga asi...suerte!
Hola Luciana!! me alegra mucho que te guste, gracias por venir al Balcón! :-) Saludines :-)
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...
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
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!!
Hola •ѕweeтnezz вιтcн!! me alegra que te haya gustado, gracias por venir ;-) Saludines :-)
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.
Jaime buenisimo tu blog!
me encantan estas cosas.
Ya mismo te linkeo desde mi Blog.
Saludos desde Rosario, Argentina.
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.
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!!!!!
El Mejor Rock y Pop de Rosario!!!!!!!!!!!!!!!!!!!! me alegra muchísimo que te guste!! gracias por el enlace :-) un enorme saludo desde España!! ;-)
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 :-)!!
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!!
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.
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!! :-)
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.
Hola ZZMidway, no se si habrá una manera, intentaré averiguarlo, dame más tiempo :-) Saludos!
Na dejalo ya he desistido, lo dejaré como esta. Sl2s y thx.
Ok, si necesitas cualquier ayuda, dímelo :-) Saludos!!
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.
Me alegro mucho, Anónimo.
¿A qué te refieres con páginas secundarias? ¿Quieres decir índices?