plantillaaqua: 12/27/14

Konichiwa Kawaii's jajajaj xDD . Hoy ando de Humor x33 Bueno siempre , anduve viendo que publicar & vi este gadget de creditos de la Plantilla ;
-Dije hoy que tengo todo mi dia Libre subiré todos los Tutos que pueda x3
-Entoonces me llego a la mente lo de poner en mi plantilla el gadget de créditos de plantilla
pero no lo pude hacer pos Por que ; El HTML Se travo xD.
Entonces dije ; Mientras se compone hare la entrada xD [Mucho xD]
Aquí empezamos ; el gadget de Creditos de Plantilla es este ;

& Al pasar el Cursor Queda Asi ;

Bueno entonces Empezemos el Tutorial :33

1ºPASO; - Nos vamos a la Sección Plantilla & das clik en editar HTML

Pulsas CTRL + F Te saldrá una cajita donde Buscas el Siguiente Codigo ; ]]></b:skin>

Asi nos ira quedando detrás de ]]></b:skin> Pondremos el Siguiente código ;

/*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;
}

Le damos en Guardar
Nos vamos a Diseño ; --> Añadir gadget --> HTML JAVASCRIPT
& COLOCAS EN LA CAJITA QUE APARECE EL SIGUIENTE CODIGO
<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>
---------------------------------------------------------------------------------------------------
& Listo ya hemos terminado recuerda colocar la imagen de créditos ; Poner
el url del diseñador etc.
Espero que te haya Gustado este tutorial :333 Nos vemos en el Proximo Chaito♥♥
Credditos ;C&L

sábado, 27 de diciembre de 2014

NUEVA AUTORA! ; Laura Vanessa

[Tutorial]Como Poner un gadget de Creditos de Plantilla ;3