30 de novembro de 2014

Quote/Citação Personalizado


Vamos a mais um tutorial. Esse vou ensinar a você personalizar o quote de seu theme/layout tanto do blogger como do tumblr.


Primeiro vamos ao blogger. Para quem não sabe o quote é quando escrevemos algo e colocamos como "citação". No blogger colocamos ele selecionando esse botão:


Vá em MODELO >> Editar HTML >> e procure por:

.post-body blockquote ou .post blockquote

Ao achar troque o código existente por esse:

.post-body blockquote {
background: url(http://static.tumblr.com/uarvpk1/N4Ym48g6b/aspas.png) no-repeat;
padding-left: 3em;
font-style: italic;
font-family: georgia;
fon-size: 8px;
width: 400px;
}

Se o seu código original não existir o "-body" retire ele senão não vai funcionar. Eu vou criar algumas imagens e disponibilizar em outro post e coloco o link aqui. Que no caso vocês devem trocar pelo código em negrito.
Visualize e veja se está tudo certo. Estando, salve.
O resultado será esse:

Fica muito mimoso né?!

Agora vou ensinar para fazer isso no Tumblr.

Primeiramente em seu css(style) cole esse código:

.quotemdp{
background: url(http://static.tumblr.com/uarvpk1/N4Ym48g6b/aspas.png) no-repeat;
padding-left: 3em;
font-style: italic;
font-family: georgia;
fon-size: 8px;
width: 400px;}

Lembrando que o link é negrito você pode mudar e colocar a imagem que deseja. Agora em seu código procure por {Quote} e substitua por esse:

 <div class="quotemdp">{Quote} </div>


O resultado será o mesmo mostrado na imagem acima.
Qualquer dúvida, só passar nos comentários. Não repasse meu tutorial.

0 comentários :

Postar um comentário