sábado, 2 de octubre de 2010

Modificar titulo de los post - blog trucos

Personalizar los títulos de los mensajes


En este tutorial, solo estudio sobre la forma de personalizar los títulos de los puestos.
Veremos cómo cambiar el tamaño de la fuente y el color, la forma de alinear el texto del título, cómo establecer el tipo de fuente y la forma de las fronteras de inserción.


En las plantillas predeterminadas, el título del post es representado por las variables:




. Post h3
. Publicar un h3 - (hotlink)
. Post h3 a: visited - (Enlace ya ha visitado)
. Post h3 a: hover - (ratón más)

Todos los estilos que desea aplicar a los valores debe estar incluida en estos tramos.

En la parte de CSS de los patrones de plantilla, las variables de los títulos de los puestos son los siguientes:




. Post h3 (
margin: 0 0 0.25 en;
padding: 0 0 4PX;
font-size: 140%;
font-weight: normal;
line-height: 1.4em;
color: $ titlecolor;
)

. H3 a,. H3 mensaje Escribir a:,. Visitado Post h3 fuerte (
display: block;
text-decoration: none;
color: $ titlecolor;
font-weight: normal;
)

. H3 fuerte. Mensaje Escribir h3 a: hover (
color: $ textcolor;
)





Personalizar el tamaño de la fuente:

De forma predeterminada, el tamaño de fuente para los títulos, se fija en 140%.
Pero usted puede cambiar el tamaño, cambiando el 140% del valor correspondiente al tamaño de fuente que desee.
Ejemplo:
font-size:22px;




Personalizado color de la fuente:

Tenga en cuenta que el código de ejemplo mencionamos arriba, el color del título de la entrada se establece en la definición de las variables, que son valores que se pueden modificar directamente en el panel "Fuentes y colores" de Blogger.
La mayoría de las plantillas existentes, tales como patrones de Blogger (mínimo) utilizar estos ajustes preestablecidos a la CSS, lo que es fácil cambiar estos colores a través del panel sobre "modelo de diseño."
Pero se puede aplicar un color CSS directamente en el tramo, cambiando $ titlecolor el valor correspondiente sobre el color que desea que el título de la entrada tiene.
Ejemplo:
color: # FFFFFF;





Alineación de texto del título:

text-align: izquierda -> alineado a la izquierda del título.
text-align: derecho -> derecha alineados título.
text-align: center - title> alineado con el centro.
text-align: justificar - la alineación title> justificado (hace que el texto que figura en una línea que se extiende tocar la izquierda y derecha).




Conjunto de fuentes para el título:

Puede establecer la fuente para el título directamente en la sección de CSS, basta con incluir la definición de la fuente que desea, ajustar su fuente preferida, seguida de algunas alternativas para ella, y adjuntar la lista con una fuente genérica, por lo que si el navegador del usuario no puede encontrar la memoria del equipo a la primera fuente, utilice el segundo y así sucesivamente.
Ejemplo:
font-family: "Trebuchet MS, Arial, Serif;




Establecer el estilo de fuente:

Font-style: normal y cursiva.
Si desea que el origen del título se presenta en cursiva, se incluye la variable de la CSS para el estilo de fuente.
Ejemplo:
font-style: italic;
La fuente puede ser que lleve a cabo en negrita (bold).
Ejemplo:
font-weight:negrita;






Establecer Transformación fuente:

Puede definir las transformaciones de la fuente del formato de título de la entrada en mayúsculas o minúsculas.
Para establecer la propiedad para la conversión de texto se pueden asignar las siguientes variables:
text-transform: none; -> ningún efecto.
text-transform: capitalizar; - mayúsculas> primeras letras de las palabras.
text-transform: mayúsculas, -> TODO EN MAYÚSCULAS.
text-transform: minúsculas; -> todas las letras minúsculas.
font-variant: small-caps -> convierte las letras mayúsculas de menor altura.
font-variant: normal -> no hay variante efecto.




Establecer la decoración de la fuente:


Para la decoración de la fuente del título que se pueden asignar las siguientes variables:

text-decoration: underline; - title> subrayado.
text-decoration: línea-a través, - line> con el título.
text-decoration: línea alta, - línea alta title>.
text-decoration: none; -> ningún efecto.




Ajuste el espacio entre las letras del título:

Usted puede ajustar el espacio entre caracteres, o el espacio entre las letras del título.
Ejemplo:
letter-spacing: 1px;




Inserte el borde en el título:

Si quiere añadir un borde para el título, basta con incluir la variable de la frontera con CSS.
Ejemplos:
border: 1px solid # 000000 - borde> a través del área de título.
border-bottom: 1px solid # 000000 - borde> justo debajo del título.
frontera-top: 1px solid # 000000 - borde> justo por encima del título.


Ejemplos:
border: 1px solid # 000000;
box-shadow: # ccc 4PX 5px 10px;
-Moz-box-shadow: # ccc 4PX 5px 10px;
-Webkit-box-shadow: # ccc 4PX 5px 10px;
-Moz-border-radius: 10px;
-Webkit-border-radius: 10px;
border-radius: 10px;

En el ejemplo anterior, los bordes son redondeados y tienen un efecto de sombreado.





Ajuste el color de fondo para el título:

Si desea incluir un color como el fondo del título, sólo tiene que añadir la línea "de fondo" y aplicar estilos a la misma.
Ejemplo:
de fondo: # CFCFCF;







Todos los estilos que se aplican a h3. mensaje, debe aplicarse también en:
.. Publicar un h3, h3 mensaje a:. Visitó, Correos h3 fuerte


Ahora que usted entiende las formas en que puedes personalizar el título de los mensajes, vemos un ejemplo con código completo a continuación:




. Post h3 (
margin: 0 0 0.25 en;
font-family: "Trebuchet MS, Arial, Serif; tipo / *-- fuente - * /
relleno: 15x;
font-size: 22px; tamaño / *-- fuente - * /
font-weight: bold; / font *-- negrita - * /
alineación / *-- justificada - * /; justificar: text-align
text-decoration: none; / *-- fuente sin decorar - * /
text-transform: mayúsculas; / *-- mayúsculas - * /
letter-spacing: 1px; / *-- espaciado entre las letras - * /
text-shadow: 1px 2px 3px # 000; efecto / *-- sombra en la fuente - * /
font-style: normal; estilo de fuente / *-- normal - * /
line-height: 1.4em; / *-- espacio - * /
color: # FFFFFF; / font color *-- - * /
border: 1px solid # 000000; / *-- borde alrededor del título - * /
/ * Sombreado efecto sobre el borde * /
box-shadow: # ccc 4PX 5px 10px;
-Moz-box-shadow: # ccc 4PX 5px 10px;
-Webkit-box-shadow: # ccc 4PX 5px 10px;
/ * Borde redondeado * /
-Moz-border-radius: 10px;
-Webkit-border-radius: 10px;
border-radius: 10px;
de fondo: # dadada, color / *-- fondo - * /
)

. H3 a,. H3 mensaje Escribir a:,. Visitado Post h3 fuerte (
display: block;
text-decoration: none; / *-- fuente sin decorar - * /
text-transform: mayúsculas; / *-- mayúsculas - * /
letter-spacing: 1px; / *-- espaciado entre las letras - * /
text-shadow: 1px 2px 3px # 000; efecto / *-- sombra en la fuente - * /
font-style: normal; estilo de fuente / *-- normal - * /
line-height: 1.4em; / *-- espacio - * /
color: # FFFFFF; / font color *-- - * /
border: 1px solid # 000000; / *-- borde alrededor del título - * /
/ * Sombreado efecto sobre el borde * /
box-shadow: # ccc 4PX 5px 10px;
-Moz-box-shadow: # ccc 4PX 5px 10px;
-Webkit-box-shadow: # ccc 4PX 5px 10px;
/ * Borde redondeado * /
-Moz-border-radius: 10px;
-Webkit-border-radius: 10px;
border-radius: 10px;
de fondo: # dadada, color / *-- fondo - * /
)

. H3 fuerte. Mensaje Escribir h3 a: hover (
color: # 000000;
)


Recuerde, el código anterior es sólo un ejemplo, personalizar el título del mensaje de acuerdo a su gusto y color para que coincida con la plantilla.




ATENCIÓN:

Los códigos de la superficie de los puestos publicados en este tutorial fueron tomadas de la plantilla Minima. Si la plantilla ya ha sufrido muchas modificaciones en el puesto, probablemente esta pieza debe estar presente de otro modo.


Fuente

1 comentarios:

Anónimo dijo...

Ya que te tomás un minuto para copiar, pegar y traducir automáticamente, tomate 1 minuto más para ajustar la traducción

Publicar un comentario en la entrada

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones