Personalizar los enlaces de tu blog o web

Personalizar los enlaces de tu blog o web 

Hola amigos,

En está entrada les mostraré como personalizar los enlaces de su sitio o web.

Primero tienen que ir a  Plantilla y crear copia de seguridad del blog después Editar HTML, Teclean CTRL + F y buscan  a:link { abajo de él está a:visited { y luego a:hover {

• a:link Es el modo en que se ven los links antes de hacer clic en ellos.
• a:visited Es el modo en que se ven los links después de dar clic sobre ellos.
• a:hover Es el efecto que da al pasar el mouse sobre un link de tu sitio.

Abajo de estas propiedades encontraremos sus atributos color (el que le da el color) y text-decoration(el efecto del link)

Para personalizarlos lo único que debemos hacer es cambiar estos atributos, en color podemos poner el color que sea, por ejemplo #00000 si queremos que sea completamente negro y así sucesivamente.
Y para personalizar  text-decoration aquí les dejo los efectos que podemos usar:

• underline: muestra el subrayado
• none: quita el subrayado
• blink: link parpadeante, esté ultimo podría no funcionar en algunos navegadores.

Personalizando el atributo a:hover

Ahora dejo aquí algunas de las maneras en las que puedes cambiar el aspecto de los enlaces cuando pasas el puntero o cursor por encima de los enlaces. A esté tipo de efectos se le conoce como hover. Les recuerdo que para agregar los siguientes efectos tienen que ir a  Plantilla y crear copia de seguridad del blog después Editar HTML, Teclean CTRL + F y buscan a:hover { Una ves lo encuentren eligen el efecto deseado de la siguiente lista, cuando decidan que efecto utilizar se van hacía la lista del final de esté post, y copian el código, por ejemplo sí les gusto el efecto 1. copian:  a:hover { color: darkblue; } y sustituyen el atributo que copiaron por el de su plantilla.

(1) a { color: darkblue; text-decoration:underline; }
(1) a:hover { color: darkblue; }


a:hover {font-size:16px;}   cambiará el tamaño del texto del link
a:hover {background:#fe6700;}   cambiará el fondo a color naranja (el color lo pueden cambiar)
a:hover {background-image:url(http://dl.getdropbox.com/u/647003/stars.gif);}   mostrará unas estrellitas en el link

1. Este es un enlace plano subrayado sin efecto hover.
2. Este es un enlace que cambia a subrayado.
3. Este es un enlace en el que desaparece el subrayado.
4. Este es un enlace que cambia de color.
5. Este es un enlace que cambia de color y desaparece el subrayado.
6. Este es un enlace con borde discontinuo abajo que cambia a continuo.
7. Este es un enlace con borde continuo abajo que cambia a discontinuo.
8. Este es un enlace sin subrayado que cambia de color.
9. Este es un enlace que cambia su color de fondo.
10. Este es un enlace con borde punteado abajo que cambia a continuo.
11. Este es un enlace que cambia a multicolor.
12. Este es un enlace que aparece con una línea superior.
13. Este es un enlace que aparece subrayado y con una línea superior.
14. Este es un enlace que aparece con un borde superior y otro inferior.
15. Este es un enlace que aparece con un borde que lo rodea.
16. Este es un enlace con cambio de color de texto y fondo.
17. Este es un enlace con cambio de color mediante transición.
18. Este es un enlace con cambio de color y fondo mediante transición.
19. Este es un enlace cuyo estilo cambia a negrita.
20. Este es un enlace que sale con efecto "tachado".
21. Este es un enlace cuyo estilo cambia a cursiva.
22. Este es un enlace con cambio de texto a pequeñas mayúsculas (small-caps).
23. Este es un enlace que incorpora sombras de texto.
24. Este es un enlace que aparece en una caja redondeada con color de fondo.
25. Este es un enlace en el que aparece el destino.
26. Este es un enlace con borde inferior discontinuo y cambios de color.
27. Este es un enlace cuya separación entre caracteres cambia.
28. Este es un enlace el que aparece un icono.
29. Este es un enlace que toma forma de flecha.
30. Este es un enlace que se acerca.
31. Este es un enlace con mensaje emergente¿A qué esperas para ver esto?.

(1) a { color: darkblue; text-decoration:underline; }
(1) a:hover { color: darkblue; } 

(2) a { text-decoration: none; }
(2) a:hover { text-decoration: underline; } 

(3) a { text-decoration: underline; }
(3) a:hover { text-decoration: none; } 

(4) a { text-decoration:underline; }
(4) a:hover { color: #E06C1F; } 

(5) a { text-decoration:underline; }
(5) a:hover { text-decoration: none; color: #E06C1F; } 

(6) a { text-decoration: none; border-bottom: dashed 1px; }
(6) a:hover { border-bottom: solid 1px; } 

(7) a { text-decoration: none; border-bottom: solid 1px; }
(7) a:hover { border-bottom: dashed 1px; } 

(8) a { text-decoration: none; }
(8) a:hover { color: #e06c1f; } 

(9) a { text-decoration: none; padding: 1px 3px; }
(9) a:hover { background: #ccc; } 

(10) a { text-decoration: none; border-bottom: solid 1px; }
(10) a:hover { border-bottom: dotted 1px; } 

(10) a { text-decoration: none; border-bottom: dotted 1px; }
(10) a:hover { border-bottom: solid 1px; } 

(11) a { text-decoration: none; }
(11) a:hover { -webkit-background-clip: text; color: white; -webkit-text-fill-color: transparent; background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363)); background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); }
(12) a { text-decoration: none; }
(12) a:hover { text-decoration: overline; } 

(13) a { text-decoration: none; }
(13) a:hover { text-decoration: overline underline; } 

(14) a { text-decoration: none; }
(14) a:hover { border-bottom: solid 1px; border-top: solid 1px; } 

(15) a { text-decoration: none; border: solid 1px transparent; padding: 1px; }
(15) a:hover { border: solid 1px; } 

(16) a { text-decoration: none; background: #ccc; padding: 1px 3px; }
(16) a:hover { background: #e06c1f; color: white; } 

(17) a { text-decoration: underline; -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; }
(17) a:hover { color: #e06c1f; } 

(18) a { text-decoration:none; background: #ccc; padding: 1px 3px; -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; }
(18) a:hover { background: #e06c1f; color: white; webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; } 

(19) a { text-decoration: none; }
(19) a:hover { font-weight: bold; } 

(20) a { text-decoration: none; }
(20) a:hover { text-decoration: line-through; } 

(21) a { text-decoration: none; }
(21) a:hover { font-style: italic; } 

(22) a { text-decoration: none; }
(22) a:hover { font-variant: small-caps; } 

(23) a { text-decoration: none; }
(23) a:hover { text-shadow: 2px 2px 2px #aaa; } 

(24) a { text-decoration: none; border-radius: 10px; padding: 2px 5px 5px 5px; }
(24) a:hover { background: #ccc; } 

(25) a { text-decoration: none; }
(25) a:hover:after { content: " (" attr(href) ") "; } 

(26) a { text-decoration: underline; background: #ccc; text-decoration: none; padding: 1px 3px; border-bottom: dashed 1px #777; }
(26) a:hover { background: #e06c1f; color: white; border-bottom: dashed 1px white; } 

(27) a { text-decoration: none; }
(27) a:hover { letter-spacing: 1px; } 

(28) a { text-decoration: none; }
(28) a:hover:before { content: url("http://img2.blogblog.com/img/icon18_edit_allbkg.gif"); } 

(29) a { text-decoration: none; padding: 1px 3px; }
(29) a:hover { background: #ccc; position: relative; font-style: italic; }
(29) a:hover:after { content: " "; position: absolute; height: 0px; width: 0px; border-color: transparent transparent transparent #ccc; border-style: solid; border-width: 15px; } 

(30) a { text-decoration: none; padding: 1px 3px; display: inline-block; -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1.4s linear; transition: all 1s linear; }
(30) a:hover { background: #ccc; color: white; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4); -webkit-transform: scale(1.5,1.5); -moz-transform: scale(1.5,1.5); -ms-transform: scale(1.5,1.5); -o-transform: scale(1.5,1.5); transform: scale(1.5,1.5); -webkit-transition: all .8s linear; -moz-transition: all .8s linear; -ms-transition: all .8s linear; -o-transition: all .8s linear; transition: all .8s linear; } 

(31) a { text-decoration: none; position: relative; }
(31) a span { text-decoration: none; width: 100px; height: auto; line-height: 20px; padding: 10px; font-size: 14px; color: #719DAB; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #fff; background: rgba(255,255,255,0.9); border-radius: 5px; pointer-events: none; position: absolute; left: 0; bottom: 200px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } 

(31) a:hover span { opacity: 0.9; left: 50%; bottom: 10px; color: #000000; }
(31-HTML) Este es un <a href="javascript:void();">enlace con mensaje emergente<span>¿A qué esperas para ver esto?</span></a>.

Esto ha sido todo sí les queda alguna duda, por favor dejarla en los comentarios, yo les responderé tan pronto como pueda. Sí les ha gustado el post compartanlo en sus redes sociales.