Modificar titulo de los post – blog trucos

  • octubre 2, 2010

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

No Comments Found