viernes, 4 de diciembre de 2015

2do Tutorial: personalizar titulos de entrada.

Holitas, holotas! xD
bueno acá para no dejar tan inactivo el blog, les dejaremos otro tutorial!! *u*

Para usar estos códigos deben ir a
PLANTILLA → PERSONALIZAR → OPCIONES AVANZADAS → AÑADIR CSS

Solo es cuestión de copiar y pegar el código.
1- Agregar un cuadro y centrar titulo de entrada

.post h3 {
border: 2px solid #000000; /**Grosor y color del recuadro**/
margin:.25em 0 0;
padding:0 0 0px; 

font-size:170%; /**Tamaño del texto**/

line-height:1.4em; /**Altura del recuadro**/

}

h3.post-title a, h3{

color: #000000; /**Color del título**/
text-align: center; /**centrar título**/
}






* border: 2px solid #000000; /**Grosor y color del recuadro**/

Acá puedes variar el grosor, tipo y color del recuadro.
 



Solid:                                                            

Dotted:.........................................................

Dashed: -----------------------------------------

Double: _____________________________



2- Como agregar una imagen al titulo

Con este código podemos agregar una imagen al titulo del blog, así como lo tenemos nosotros :p
** También puedes agregar una imagen gif si quieres. :p

.post h3 {
padding-left: 20px;
background: url(http://3.bp.blogspot.com/-lzX83ZwY8d0/VmFt5-NOKLI/AAAAAAAAAmg/S6-l03EKLSI/s1600/001.png) center left no-repeat;
border-bottom: 2px solid #000000; /**Línea inferior **/
margin:.5em 0 0;
padding:0 0 2px;
font-size:190%; /**Tamaño del texto**/
line-height:1.9em; /**Altura de**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: right; /**posición del título**/
}

background: url
Aquí debes colocar la url de tu imagen.... Si quieres que te haga uno en especial solo dinos en un comentario.
proporciona la imagen que quieres... de preferencia que sea una entera, osea de cuerpo completo :P
Estas son las que he hecho :P






border-bottom: 2px solid #000000; /**Línea inferior **/

Acá podes elegir el grosor del borde inferior, color y que tipo de borde quieres.



Solid:                                                            

Dotted:.........................................................

Dashed: -----------------------------------------

Double: _____________________________





Posición del título
Si quieres puedes cambiarlo en la posición que más te guste

Center - El titulo estará en el centro
Right - El titulo estará en la derecha de la entrada (así como lo tenemos nosotros)


3- Titulo con imagen de fondo

.post h3 {
background: url("URL dela imagen") top left repeat;
margin:.5em 0 0;
padding:0 0 2px;
font-size:160%; /**Tamaño del texto**/
line-height:2em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: center; /**centrar título**/
}

background: url("URL dela imagen") top left repeat;
Como ya dijimos antes, la url va acá.


No hay comentarios:

Publicar un comentario