{ Como personalizar o blockquote (citações) do blogger | butlariz

Anuncio layout

Anuncio layout
Encomende já o seu layout!
- 7.12.17

Como personalizar o blockquote (citações) do blogger

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

Comente com o Facebook:

8 comentários:

  1. Lariz, eu to gritando aqui!
    Eu entrei em teu blog pra comentar informando o quanto ele ajudou na formulação do meu layout e tu me posta exatamente o tuto de blockquote hoje? No mesmo dia?
    Menina, já vou copiar e usar lá!
    http://www.vintem.net.br/ rola a página que tem o crédito... sou tua fã a tempos!

    ResponderExcluir
    Respostas
    1. Oie Vin, tudo bem?

      Ahhhh, fico muito feliz em poder ajudar, e que você goste tanto do meu trabalho ♥ Seu blog ficou incrível, eu adorei os detalhes, você soube encaixar os tutoriais direitinho, amei! Obrigada pelo carinho, e pelo reconhecimento, viu?

      Beijos ♥

      Excluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. Que vontade de tacar essas citações todas no meu layout miga ♥
    Que coisa mais linda aaaaaaaaaaaaaaaaaaa / Os com florais são absurdamente lindos, queria ter essa cara de romântica mas é tipo colocar coroa de flor no Shrek

    ResponderExcluir
    Respostas
    1. Ficaram lindinhas né? kkkkkk Ai miga kkkk mas faz um blockquote lindo que combine com vc <3 eu adoro personalizar ele!

      Excluir
  4. Ah como eu amo esses seus tutoriais!
    Já vou instalar!
    Um beijo minha lindaa
    https://rafaelleventura.blogspot.com.br/

    ResponderExcluir

• 2015 - 2017 Feito com ♥ por Lariz Santana