8 may 2015

[Tutorial] Créditos #1 {100% mío}

Hiii! Siento tener esto tan abandonado... Hacer entradas de tutoriales me quita mucho tiempo así que no puedo hacerlas muy seguido...Pero bueno XD
Hoy os traigo el tutorial de como hacer los recuadros de créditos que suelo poner últimamente en mis plantillas! Es sencillo pero es fácil, rápido de poner, y queda bien!
Es totalmente mío así que si lo usan dejen créditos porfa~

Ejemplo~
Os enseñare a como poner el recuadro rosa clarito, con el fondo del gadget o sin el!
CON FONDO
Este es el más sencillo! ^^
Vamos a Diseño >> Añadir Gadget >> HTML / Javascript >> Y ponemos el siguiente código, editándolo según los colores de tu plantilla!

<div style="background: #fff; border-radius: 10px 10px 10px 10px; border: 2px solid #ffe4e4; box-shadow: 2px 2px 10px #ffe4e4; box-shadow: inset 0 0 16px #ffe4e4, 0 0 0px #ffe4e4; color: #ffc9c9; text-align: center;"><b><br /><span style="font-size: medium;">NOMBRE PLANTILLA</span></b><br /><b>Designer:</b>&nbsp;<a href="URL DEL DISEÑADOR" style="color: #444444  text-decoration: none;">NOMBRE DEL DISEÑADOR</a>
<br /><b>Images:</b>&nbsp;<a href="URL de donde sacas las imágenes" style="color: #444444  text-decoration: none;">Nombre de donde sacas las imágenes</a>
<br /><b>Others:</b>&nbsp;<a href="URL de sitios que te han ayudado" style="color: #444444  text-decoration: none;"></a><br /><br /></div>

---> Si quieres añadir un diseñador más, añade luego de <a href="URL DEL DISEÑADOR" style="color: #444444; text-decoration: none;">NOMBRE DEL DISEÑADOR</a> , copias esa y la pegas justo detrás otra igual! Y así para cada diseñador!
---> Para otro de donde sacas las imágenes, después de <a href="URL de donde sacas las imágenes" style="color: #444444; text-decoration: none;">Nombre de donde sacas las imágenes</a> , copias esa y la pegas justo detrás otra igual! 
---> Para otro de páginas de ayuda, después de <a href="URL de sitios que te han ayudado" style="color: #444444; text-decoration: none;"></a> , copias esa y la pegas justo detrás otra igual! Si quieres cambiar el icono de la URL pon lo que quieras en la parte donde aparece el 

PARA EDITAR COLORES
#fff ---> Fondo del recuadro!
10px 10px 10px 10px ----> Para redondear los bordes! Cada numero representa el redondeado de cada esquina, así que, si lo quieres menos redondeado disminuye el numero, y si lo quieres más redondeado lo aumentas!!
2px solid #ffe4e4 ---> Esto es el borde del recuadro! El "2px" es el tamaño del borde; El "solid" es el tipo de borde [recomiendo SOLID o DASHED]; "#ffe4e4" representa el color del borde [HTML de los colores]
#ffc9c9 ----> Sombra del recuadro (el color rosa del ejemplo que va hacia dentro del recuadro)! Este aparece 4 veces, así que deberas poner el color 4 veces para que aparezca correctamente. [HTML de los colores]
center ----> Posición del recuadro, CENTER ; LEFT ; RIGHT.
#444444 ----> Color de los nombres que aparecen en el recuadro! Recomiendo ponerlos todos del mismo color! [HTML de los colores]

SIN FONDO
Primero, deberás tener ya el recuadro puesto (usando el mismo tuto anterior)! Entonces iremos a Plantilla >> HTML>> Y buscaremos [Ctrl F] el titulo del gadget donde has puesto el código anterior.
Entonces encontrarás algo así:
El código que encuentres será esto:
<b:widget id='HTML2' locked='false' title='CRÉDITOS' type='HTML'>
El HTML2 es lo que estábamos buscando! Copias y guardas ese código.
Y entonces buscamos ]]></b:skin>
Arriba de ese código, pegamos esto:
#HTML2{
Background: none;
}
NOTA: Sustituye el HTML2 por el que has encontrado tu!
NOTA2: Si has puesto algún código para el diseño del gadget [tipo un borde o algo así] y no quieres que aparezca, solamente copia el código que le has puesto a tu gadget y lo pegas dentro del que os he dicho yo, pero cambiando todos los números por 0 para que no aparezcan! Para que lo entendáis mejor, aquí so dejo un ejemplo:
Tu código del diseño no debe ser exactamente igual, quizás tengas otras cosas así que fijaos en lo que habíais o querréis poner y luego haced lo que os he enseñado ^^

Luego de todo esto, vas a Vista Previa y miras si esta todo como querías!! Y si es así, a guardar! :3

Y esto a sido todo el tuto! Cualquier duda me dicen~ Y si lo usan, pongan créditos!!
post signature

2 comentarios: