[Tutorial]Créditos Escondidos!

Holaala verdad que este fin de semana no he publicado demasiadoes que la verdad tenia que estudiar & hacer cosas & no podíaademas estoy un poco estresada con el proyecto es que quiero que os divirtáis & yo también claro estabueno no voy a contar nada mas voy con un tutorial que me han pedido varias veces & tenia pendiente de subirlo claro esta dando créditos que están abajo al final de la entrada el tutorial es muy fácil es de poner creditos ocultos como tengo yo ahora

• Plantilla
• Edicion HTLM
• Ctrl+F & buscar  ]]></b:skin> antes de eso pegar este code

/*Credits ----------------------------------------------- */ @font-face{font-family:tinytots;src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf')} .view { cursor: pointer; height: 124px; /* Alto de la imagen */ margin: 1px; overflow: hidden; position: relative; text-align: center; width: 230px; /* Ancho de la imagen */ 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: #9982ad; /* 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; }

Despues guarda & ve a

• Diseño
• Añadir gadget jabascrip/htlm
• Y pega este código

 <div class='view img'><img src='Imagen de los creditos' style='border-top: #69efff solid 0px;border-bottom: #ffb1dc solid 0px;border-right: #ffb1dc solid 0px;border-left: #69efff solid 0px; -Moz-border-radius: 10px; border-radius: 10px;'/>
<div class='mask'>
<h4>CREDITOS</h4>
  <p>Designer: <a class='info' href='url del blog del diseñador'>Nombre del Autor</a><br/>Images: <a class='info' href='url del sitio de las imagenes'>Nombre del sitio</a><br/>Others: <a class='info' href='url del blog'>X</a> <a class='info' href='url del blog'>X</a> <a class='info' href='url del blog'>X</a></p>
</div></div></div>

CREDITOS 

Esto es todo esta todo bien señalado para que lo podáis editar & tal espero que os haya gustado & esta a sido la ultima entrada de esta semana la semana que viene publicare mas & mas y antes del viernes ya que tengo puente un beso & que paséis un buen empiece de la semana