[Tutorial] Créditos en un Gadget

Holaaaa~ Tiempo sin publicar, pero eh estado algo ocupada con otros blogs míos, bueno en fin hoy les traigo un tutorial para poner créditos en un Gadget espero les sirva.

VISTA PREVIA CLICK AQUI

1- Vamos a Diseño ---> Agregar un Gadget ---> Elije el de HTML/javascript

Ahora pondrás esto dentro:

<center><style>/*Credits
----------------------------------------------- */
@font-face{font-family:tinytots;src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf')}
.view {
cursor: pointer;
height: 124px;
margin-left: -10px;
overflow: hidden;
position: relative;
text-align: center;
width: 200px;
display: inline-block;
}
.view img {
display: inline-block;
position: relative;
-moz-transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
opacity: 1;
filter: alpha(opacity=100);
}
.view:hover img {
-moz-transform: rotate(620deg) scale(0);
-webkit-transform: rotate(620deg) scale(0);
-o-transform: rotate(620deg) scale(0);
-ms-transform: rotate(620deg) scale(0);
transform: rotate(620deg) scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
.view .mask {
background-color: #D76DF7; /* Color de fondo */
height: 124px;
left: 0;
position: absolute;
overflow: hidden;
top: 0;
width: 200px;
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
opacity: 0;
filter: alpha(opacity=0);
}
.view:hover .mask {
-moz-transform: translateY(0px) rotate(0deg);
-webkit-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
opacity: 1;
filter: alpha(opacity=100);}
.view h4 {
background-color: #ffffff; /* Color de fondo del título */
opacity: 0.8;
color: #75648b; /* Color del texto del título */
text-align: center;
position: relative;
font-family: handy;
text-transform: uppercase;
font-size: 8px;
margin: 9px 0 0 0;
padding: 5px 0;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover h4 {
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view p {
color: #fff; /* Color del texto/descripción/etc xD */
font-family: tinytots;
text-transform: uppercase;
font-size: 8px;
margin: 0;
padding: 15px;
position: relative;
text-align: center;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover p {
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view a.info {
background-color: #ffffff; /* Color de fondo del menú */
font-family: tinytots;
border-radius: 5px;
box-shadow: 0 0 2px #e4e2e5, 0 0 5px #e4e2e5 inset;
color: #000; /* Color de texto del menú */
display: inline-block;
padding: 2px 10px;
text-decoration: none;
margin-top: 8px;
font-family: handy;
font-size: 8px;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view a.info:hover {
box-shadow: 0 0 5px #968ca3;
}
.view:hover a.info {
font-family: tinytots;
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
</style>
 <div class='view img'><img src='http://i.imgur.com/ScN5rvl.jpg' style='border-top: #69efff solid 0px;border-bottom: #ffb1dc solid 0px;border-right: #ffb1dc solid 0px;height: 124px;
width: 200px;border-left: #69efff solid 0px; -Moz-border-radius: 10px; border-radius: 10px;'/>
<div class='mask'>
<h4>CREDITOS</h4>
  <p>Designer: <a class='info' href='http://recursokawaiiworld.blogspot.com/'>Reina Anime</a><br/>Images: <a class='info' href='LINK'>x</a><br/>Others: <a class='info' href='LINK'>X</a><a class='info' href='LINK'>X</a> <a class='info' href='LINK'>X</a></p>
</div></div></center>

Cosas a Cambiar:

Lo que esta de color rojo son los colores usted pueden jugar con ellos hasta que den como les guste la mayoría dice a un lado para que es el color

Lo de color verde es la imagen que se ve primero

Lo de color azul son los enlaces

Bueno eso es todo, espero les sirva

ya saben dudas o sugerencias, comentar

dejar un mensaje en el chat