Blockquote

Blockquotes é um recurso que usamos para enfatizar um trecho de nossos textos. Tipo quando citamos um trecho de outra postagem, ou para dar ênfase a uma passagem em especial.


Vá em Editar HTML da seu template e procure por um trecho mais ou menos assim:

.post blockquote { 
margin:1em 20px; 
}

Podemos adicionar umas linhas na lateral para dar o seguinte efeito:

Para que seu blockquot fique como o exemplo acima basta substituir aquele trecho que você achou pelo seguinte:

.post blockquote { 
color:#333; 
width:350px; 
margin-top: 10px; 
font-size:100%; 
margin-bottom: 10px; 
margin-left: 50px; 
padding-left: 15px; 
border-left: 4px double #5C6625; 
font: normal helvetica, sans-serif; 
}

Ou poderá deixa-lo assim:

Se gostou deste, então pegue o seguinte código:

.post blockquote { 
width:350px; 
color: #000; 
padding: 8px; 
font-size:100%; 
margin: 10px 0 10px 0px; 
text-align: justify; 
border-top: 3px dotted #6B2533; 
border-bottom: 3px dotted #6B2533; 
background: transparent; 
font:normal helvetica, sans-serif; 
}

Ou ainda este:

No caso acima terá um pouca mais de dificuldade, pois você terá que hospedar uma imagem para dar o efeito das "aspas". Olha o código abaixo:

.post blockquote { 
color: #666666; 
margin-left: 20px; 
display: block; 
margin-right: 20px; 
font-size: 90%; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
line-height: 140%; 
background-color: transparent; 
background-image: url(COLOQUE AQUI A URL DA IMAGEM); 
background-repeat: no-repeat; 
padding-top: 2px; 
padding-right: 20px; 
padding-bottom: 4px; 
padding-left: 40px; 
}

Você terá que colocar a URL da imagem no lugar do texto em vermelho.

Aqui vão mais alguns exemplos de blockquot com imagem, neste caso uma imagem de fundo. Veja:

.post blockquote { 
color:#fff; 
width:350px; 
margin-top: 10px; 
font-size:100%; 
padding-left: 18px; 
padding-right: 18px; 
padding-top: 18px; 
padding-bottom: 18px; 
background-image:url(URL DA IMAGEM DE FUNDO); 
font: normal helvetica, sans-serif; 
}

ou esses outros:

.post blockquote { 
color: #0f5718; 
font-size: 90%; 
display: block; 
margin-right: 20px; 
line-height: 140%; 
margin-left: 20px; 
padding-top: 50px; 
padding-right: 20px; 
padding-bottom: 4px; 
padding-left: 70px; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
background-color: transparent; 
background-image: url(URL DA IMAGEM); 
background-repeat: no-repeat; 
}

e isso ai:

Fonte: http://usuariovirtual.blogspot.com/