como personalizar o blockquote citações do blogger

Oi gente! O post de hoje é mais um da série Tutorial + Freebie (clica!), onde alguns freebies se combinam para deixar o seu layout ainda mais lindo! E nesse post, vou te ensinar a personalizar o Blockquote do blogger (quando a gente faz um post com citação, sabe?), e também te disponibilizar 6 modelos lindos para usar. É só copiar e colar!

Vamos ao tutorial?

1. No seu painel do blogger, clique em Tema, e depois em Editar HTML. Vai abrir uma página com códigos, você precisa clicar no meio desses códigos, apertar no seu teclado ctrl+f para fazer uma busca.

2. Na caixa de busca que abriu, procure por: ]]></b:skin>

Caso você queira personalizar seu blockquote do seu jeito, acima de ]]></b:skin> cole o seguinte código:

blockquote.tr_bq {
    padding: 40px;
    font-style: italic;
    margin: 0px;
    color: #000;
    background-color: #f9eed8;
    background-image: url(URLDAIMAGEM);
}

Para personalizar:

#000 – Cor do texto
#f9eed8 – Cor de fundo
URLDAIMAGEM – Caso você queira alguma imagem de fundo, só colocar a url dela aqui.

Mas, se você quiser usar algum desses modelos feitos com muito amor pra vocês, é só copiar o código logo abaixo da imagem que você gostou, e colar acima de ]]></b:skin> no seu layout.

→ Lembrando que todos eles da pra mudar a cor de fundo no código, só trocar o: background-color: #códigodacor (tabela de cores: aqui)

blockquote.tr_bq {
    padding: 40px;
    font-style: italic;
    font-size: 12pt;
    margin: 0px;
    color: #000;
    background-color: #f8f8f8;
}
blockquote.tr_bq:before {
    content: ”;
    background-image: url(https://i.imgur.com/Grx1TVa.png);
    display: block;
    background-size: 100%;
    width: 72px;
    height: 61px;
    float: right;
    margin-top: -41px;
    margin-right: -43px;
}
blockquote.tr_bq:after {
    content: ”;
    background-image: url(https://i.imgur.com/Grx1TVa.png);
    display: block;
    background-size: 100%;
    width: 72px;
    height: 61px;
    float: right;
    margin-top: -41px;
    margin-right: -43px;
}
blockquote.tr_bq:after {
    content: ”;
    background-image: url(https://i.imgur.com/BDx9tHC.png);
    display: block;
    background-size: 100%;
    width: 72px;
    height: 61px;
    float: left;
    margin-top: 1px;
    margin-left: -40px;
}

blockquote.tr_bq {
    padding: 40px;
    font-style: italic;
    font-size: 12pt;
    margin: 0px;
    color: #000;
    background-color: #fff5ea;
    margin-top: 30px;
    margin-bottom: 30px;
}
blockquote.tr_bq::before {
    content: ”;
    background-image: url(https://i.imgur.com/49WwO9Y.png);
    display: block;
    background-size: 100%;
    width: 115px;
    height: 87px;
    float: left;
    margin-top: -87px;
    margin-left: -87px;
}
blockquote.tr_bq:after {
    content: ”;
    background-image: url(https://i.imgur.com/ABUTxtg.png);
    display: block;
    background-size: 100%;
    width: 115px;
    height: 87px;
    float: right;
    margin-top: 3px;
    margin-right: -86px;
}

blockquote.tr_bq::before {
    content: ”;
    background-image: url(https://i.imgur.com/L2DjVKE.png);
    display: block;
    background-size: 100%;
    width: 165px;
    height: 77px;
    float: left;
    margin-top: -70px;
    margin-left: -87px;
}
blockquote.tr_bq {
    padding: 40px;
    font-style: italic;
    font-size: 12pt;
    margin: 0px;
    color: #000;
    background-color: #eef2f3;
    margin-top: 13px;
    margin-bottom: 13px;
}
blockquote.tr_bq:after {
    content: ”;
    background-image: url(https://i.imgur.com/V9NGD0Q.png);
    display: block;
    background-size: 100%;
    width: 165px;
    height: 78px;
    float: right;
    margin-top: 3px;
    margin-right: -76px;
}

blockquote.tr_bq::before {
    content: ”;
    background-image: url(https://i.imgur.com/OIMHAVA.png);
    display: block;
    background-size: 100%;
    width: 144px;
    height: 27px;
    float: left;
    margin-top: -52px;
    margin-left: 0px;
}
blockquote.tr_bq:after {
    content: ”;
    background-image: url(https://i.imgur.com/W3csrzM.png);
    display: block;
    background-size: 100%;
    width: 84px;
    height: 72px;
    float: right;
    margin-top: 3px;
    margin-right: -62px;
}
blockquote.tr_bq {
    padding: 40px;
    font-style: italic;
    font-size: 12pt;
    margin: 0px;
    color: #000;
    background-color: #f1f1f1;
    margin-top: 13px;
    margin-bottom: 13px;
}

blockquote.tr_bq::before {
    content: ”;
    background-image: url(https://i.imgur.com/B28iMLd.png);
    display: block;
    margin: auto;
    background-size: 100%;
    width: 191px;
    height: 35px;
    margin-top: -62px;
    margin-bottom: 30px;
}
blockquote.tr_bq {
    padding: 40px;
    font-style: italic;
    font-size: 12pt;
    margin: 0px;
    color: #000;
    background-color: #fff7f9;
    margin-top: 13px;
    margin-bottom: 13px;
}

blockquote.tr_bq {
    padding: 40px;
    font-style: italic;
    font-size: 12pt;
    margin: 0px;
    color: #000;
    background-color: #f5f6f2;
    margin-top: 13px;
    margin-bottom: 13px;
    background-image: url(https://i.imgur.com/upwJ9d0.png);
    background-size: 119%;
    background-position: -72px -45px;
}

Ufa! E aí, gostaram do post? Gostaram dos modelos? Se usarem algum, deixa o link do seu blog nos comentários pra eu poder ver ♥ E se tiverem dúvidas, é só comentar!

Ah, vocês tem sugestões de tutoriais, dicas, ou freebies que eu possa disponibilizar? Me contem, eu vou amar saber!

Com muito amor,
Lariz