Enlace estilo hover

Les traigo un sencillo truco para que se vean muy tierno su link 

pueden ver una prueba dando clic akii y tocando algun enlace.....

Comencemos:

Diseño
Edicion de la Plantilla Html

luego presionamos f3 y buscamos:

a:link

Luego ya con el codigo encontrado reemplazamos lo anterior por lo siguiente:

 a:link,a:visited {
color:#ff5b89;
text-decoration:none;
}
a:hover {
color:#ffd2df;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
background:url(URL ICON);
background-repeat:no-repeat;
border-bottom:1px dotted #ff5b89;
padding-left:18px;
}

AhOra escojen un pequeño gift y copian la URL y la ponen en lugar del texto fucsia

                         

Vista previa para ver que todo este en orden y  listo!! 

PD: en mi otro blog se ve que al tocar el enlace las letras desaparecen porque en el diseñador de plantillas del blog, en la opcion que dice enlaces le puse transparente en color de texto al tocar el enlace  bueno ese es todo el truco xD!!

Espero que les guste.... besitos y saludiiitOs

creditos: wanaseoby x el tuto 

pixel-diary por los gifts

PNG's de CNU (B1A4) (pedido)

hola chicas les traigo estos png pedido de Mensi-san ..... realmente lamento no  haberlas hecho antes pero esq habia estado sin internet asi que estas las dejo por aca y realmente espero que te gusten!! de disculpas hice mas de una xD 

efectos para las imagenes al pasar el cursor

Les traigo algunos efectos simpaticos que pueden usar para sus blog!! funcionan cuando se coloca el cursor sobre las imagenes del blog...

  1er Efecto: efecto giratorio

primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:

img{-webkit-transform: perspective(400px) rotateX(0deg);
-moz-transform:perspective(400px) rotateX(0deg);
-o-transform:perspective(400px) rotateX(0deg) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-transform: perspective(400px) rotateX(360deg) ;
-moz-transform: perspective(400px) rotateX(360deg) ;
-o-transform: perspective(400px) rotateX(360deg);}

 2do efecto: efecto agrandado

primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:

img{
-webkit-transform: perspective(400px) ;
-moz-transform:perspective(400px) ;
-o-transform:perspective(400px) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-transform:perspective(400px) translateZ(150px) ;
-moz-transform:perspective(400px) translateZ(150px) ;
-o-transform:perspective(400px) translateZ(150px) }

3er efecto: efecto transicion

primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:

img{

-webkit-border-top-left-radius: 100px;

-webkit-border-bottom-right-radius: 100px;

-moz-border-radius-topleft: 100px;

-moz-border-radius-bottomright: 100px;

border-top-left-radius: 100px;

border-bottom-right-radius: 100px;

-webkit-transition:All 1s ease;

-moz-transition:All 1s ease;

-o-transition:All 1s ease;

}

img:hover{

-webkit-border-top-right-radius: 100px;

-webkit-border-bottom-left-radius: 100px;

-moz-border-radius-topright: 100px;

-moz-border-radius-bottomleft: 100px;

border-top-right-radius: 100px;

border-bottom-left-radius: 100px;

-webkit-border-top-left-radius: 0px;

-webkit-border-bottom-right-radius: 0px;

-moz-border-radius-topleft: 0px;

-moz-border-radius-bottomright: 0px;

border-top-left-radius: 0px;

border-bottom-right-radius: 0px;}

 4er efecto: efecto que gira hasta desaparecer

 primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:

img{
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-transform: rotate(360deg) scale(0);
-moz-transform: rotate(360deg) scale(0);
-o-transform: rotate(360deg) scale(0)
}