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~
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> <a href="URL DEL DISEÑADOR" style="color: #444444 text-decoration: none;">NOMBRE DEL DISEÑADOR</a>
<br /><b>Images:</b> <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> <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!!
Buen tuto ^^
ResponderEliminarMuy buen tuto!
ResponderEliminarSaludos! :v