.post-body:first-letter { float:left; color: #333333; font-size:100px; font-family:none; line-height:80px; padding-top:1px; padding-right:5px; } font-style: italic; } span.letracapital{ float: left; font-size: 40px; line-height: 35px; /* Dobla el alto de linea menos 1 pixel */ font-family: Georgia, "Times New Roman", Times, serif; color: #2583ad; /* Azul */ padding-right: 5px; } -->

Recent Posts

Personalizar los bloques entrecomillados

22 may 2016

Vamos a explicar como podemos personalizar los bloques entrecomillados de nuestras entradas.



Para personalizar estos bloques entrecomillados entra en Diseño> Edición de HTML y busca esto:

blockquote{                                                                                  ------------                                                                                      -----------                                                                                       -------------                                                                                     }                                                                                                                                                                                             
y lo cambiamos por este otro.


blockquote {background: #A9F5D0

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXFupD1U1o2E2h6kSq9QuilUjqRBVvU0vZSdivPCd5AYHLV7POMVitCkx_cBxS_cHieLnA5H_Pr-fv56XhQCTPfiMkFr6XXkLzADVkM38qepYijloqJ3TJaR-jjFNAp-ImmC3sNHvB9V4/s200/blockquote.png)
top left no-repeat;


margin: 10px 15px 3px 3px;


padding: 5px 15px 10px 32px;


border-top: 1px solid #DDD;


border-right: 1px solid #666;


border-left: 1px solid #DDD;


border-bottom: 1px solid #666;


font-style: italic;


}

font-size:14.0pt;mso-bidi-font-size:11.0pt'>border-top:
1px solid #DDD;


border-right:
1px solid #666;


border-left:
1px solid #DDD;


border-bottom:
1px solid #666;


font-style:
italic;


}

n";mso-ansi-language:EN-US'>border-bottom: 1px solid#666;

font-style: italic;


}  

Y el resultado será esto:

Con esté quedará así

blockquote {

margin: 10px 15px 3px 3px;

padding: 5px 15px 10px 15px;

border-left: 5px solid #FF8000;

font-style: italic;

}

Y con esté quedará así

.post-body blockquote {

 padding:10px;

border-color: #999; /* Color del borde */

background: -webkit-linear-gradient(top, white, #E0E0E0); /* Gradientes


*/

background: -moz-linear-gradient(top, #fff, #E0E0E0);

background: -ms-linear-gradient(top, #fff, #E0E0E0);

background: -o-linear-gradient(top, #fff, #E0E0E0);

box-shadow: 0px 0px 15px #000000; /*



Sombra */

}

.post-body blockquote:before {

content: "\201C";

font-family: Georgia;

font-size:40px;

font-weight: bold;


line-height:0px;

vertical-align:middle;

}

.post-body blockquote:after {

content: "\201D";

font-family: Georgia;

font-size:40px;

font-weight: bold;

line-height:0px;

vertical-align:middle;

padding-top:10px;

}


No hay comentarios:

Publicar un comentario

Deja tu comentario y en breve te contestaremos