Quote Personalizado II

Esse estilo está editado somente para o tumblr. Bem fácil e lindo.


Bom, para ter esse resultado é necessário de imagem das aspas. As que eu fiz, eram de tamanho 40x40.

Veja o resultado:



Adicione o código abaixo em seu CSS, entre <style> e </style> (você deve mudar a url do background abaixo pela imagem de suas aspas):

 
.quote {
 padding-left: 3em;
 width: 32px;
 height: 28px;
 background: url(http://static.tumblr.com/uarvpk1/N4Ym48g6b/aspas.png) no-repeat;
 padding: -4px;
 margin-bottom: -28px;
 }
 
.quot {
 margin-left: 450px;
 width: 32px;
 height: 28px;
 background: url(http://static.tumblr.com/uarvpk1/RYim48g5k/aspa.png) no-repeat;
 padding: -4px;
 margin-top: -28px;
 }

.source { text-align: right;
font-size: 10px;}

Depois procure em seu código por {block:quote} e faça as alterações abaixo:

<!-- quote --!>
{block:Quote}<div class="quote"></div><h1>{Quote} </h1><div class="quot"></div> {block:Source} <div class="source">- {Source}</div> {/block:Source} {/block:Quote}

Percebam que foi adicionado a div do quote antes e depois de {Quote} e a div do source antes de {source}. Isso é o que você deverá adicionar em seu código. Não apague nada que tem em seu código, pode dar algum problema :S Pronto. Visualize antes de salvar para se certificar que ficou tudo certo.

Qualquer dúvida, só deixar ai nos comentários.