3color Shiny Link. Enlace Brillante Tricolor

CLIC AQUÍ: VISTA PREVIA

Para este tutorial hay muchas formas de aplicarlo, ya sea en todo el blog como en un lugar específico hasta una sola palabra. Para dejarme entender lo explicaré por áreas en donde se puede emplear el uso de este código.

En todo el Blog

1. Ir a Tema de Blogger. Y buscar /* Content usando la combinación  Ctrl  +   F  
2. Podrás ver el sgte. código del cuadro NEGRO. Reemplazar todo eso por el código del cuadro ROSADO. Clic en  Guardar Tema 

CAMBIAR ESTE...
a:link { text-decoration:none; color: $(link.color); } a:visited { text-decoration:none; color: $(link.visited.color); } a:hover { text-decoration:underline; color: $(link.hover.color); }

...POR ESTE
a:link { background-image:-webkit-gradient(linear,left top,right top,from(#ff57cc),to(#ffde00)); /*color de enlace*/ -webkit-background-clip: text; -webkit-text-fill-color: transparent; } a:visited { background-image:-webkit-gradient(linear,left top,right top,from(#ff57cc),to(#ffde00)); /*color de enlace visitado*/ -webkit-background-clip: text; -webkit-text-fill-color: transparent; } a:hover { background-image:-webkit-gradient(linear,left top,right top,from(#ff99e0),to(#fef668)); /*color de enlace al pasar el curso*/ -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

En un Widget Específico

1. Otra vez desde Tema de Blogger clic en Editar  HTML , buscar el código del widget a modificar. Por ejemplo modifiquemos el widget de Entradas Populares su código ID es PopularPosts1.
2. Nuevamente desde Tema clic en el botón  Personalizar 
3. Clic en Opciones avanzadas y buscamos Agregar CSS.
4. Copia y pega el siguiente código. Clic en  Aplicar al blog 

/* 3color Shiny Link ----------------------------------------------- */ #PopularPosts1 a:link { text-transform: uppercase; font-weight: bold; font-size: 80%; background-image:-webkit-gradient(linear,left top,right top,from(#ff57cc),to(#53c2d6)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #PopularPosts1 a:hover { background-image:-webkit-gradient(linear,left top,right top,from(#ff99e0),to(#83e3f4)); }

Solo Algunas Palabras

1. Si el caso fuera que no queremos modificar todo los enlaces del blog, y sólo queremos que este efecto se vea de vez en cuando en algunas palabras. Haremos lo sgte.
2. Una vez más desde Tema clic en el botón  Personalizar 
3. Clic en Opciones avanzadas y buscamos Agregar CSS.
4. Copia y pega el siguiente código. Clic en  Aplicar al blog 

/* 3color Shiny Link ----------------------------------------------- */ a.shinylink { text-transform: uppercase; font-weight: bold; font-size: 80%; background-image:-webkit-gradient(linear,left top,right top,from(#ff57cc),to(#53c2d6)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } a.shinylink:hover { background-image:-webkit-gradient(linear,left top,right top,from(#ff99e0),to(#83e3f4)); }

¿Cómo usar el código Solo Algunas Palabras?

1. Desde el lugar donde publicarás el enlace, verás que el código del enlace es: <a href="URL" >Tu-texto-aquí</a>
2. Sólo debemos agregar después de <a el siguiente código class="shinylink"
3. Quedando así: <a class="shinylink" href="URL" >Tu-texto-aquí</a>

Es todo! Espero se haya comprendido, cualquier duda deja un comentario o envíame un mensaje.