PARA BLOGUEIRAS | COMO PERSONALIZAR A CAIXA DE CITAÇÃO DO BLOG | TUTORIAL

Faz algumas semanas que não posto nenhuma dica voltada para blogueiras, mas então quando estava escrevendo o post anterior resolvi ensinar nesse post mais uma dica para personalizar seu layout deixando seu blog sempre a sua cara e com sua identidade.

Nem todo mundo usa a opção de caixa de Citação fornecida pela plataforma blogger na hora de escrever seu post. Mas a citação é uma opção bem interessante para diferenciar do texto normal e padrão do blog uma informação extra que seja importante ressaltar. 

COMO PERSONALIZAR A CAIXA DE CITAÇÃO DO BLOG ❤

Exemplo:

Post acima é sobre calendários lindos de 2018, caso queira conferir basta clicar aqui.

1º Passo: Na lateral da sua plataforma blogger clique em Tema e vá na opção Editar HTML do seu blog. Em seguida de um clique em qualquer lugar dentro do html e tecle CTRL+F ou F3 e procure o seguinte tag ]]></b:skin>

2º Passo: Cole o código abaixo ANTES da tag que foi procurada acima no passo 1.

.post blockquote { 

    background: #fff5ee ; /*Fundo da citação*/ 

    border-left:5px solid #BC8F8F; /*Cor da borda como preferir*/ 

    padding: 5px; 

    margin: 5px 10px 5px 10px; 

    }

3º Passo: Essa é a hora em que você irá personalizar conforme seu gosto ou desejo. 

Na opção Fundo da citação, você pode ser livre e escolher a cor que mais lhe agrada lembrando que essa cor tem que está em formato para código como acima. Vou deixar aqui o link de um site onde vocês encontram uma variedade gigantesca de cores que podem estar usando, só clicar aqui. 

Em Cor da borda, você ira escolher a cor que ficara na lateral esquerda da sua citação, essa borda  na cor rosa mais escura que está na minha caixa de citação mostrada no exemplo. Lembrando que você pode alterar a sua posição, onde tem border-left você pode mudar caso deseje que a borda fique do outro lado, sendo que left (esquerdo) e right (direito). 

E para finalizar em Padding, é onde você consegue mudar a largura da borda, quanto maior o valor em pixels (px) maior será a sua largura. 

Por fim basta você salvar e visualizar para ver se tudo funcionou direito, caso tenha dado algum erro só deixar nos comentários ou me enviar um email para julianecorreiacontato@gmail.com me explicando o erro, varei de tudo para ajudar.

Lembre sempre, antes de fazer qualquer alteração no html do seu blog faça um BACKUP para evitar qualquer transtorno futuro. 

...

E ai, o que acharam desse tutorial para personalizar o layout do seu blog? Me conte nos comentários de vocês gostam desse tipo de dica e desses tutoriais rápidinhos. Super beijos!

Com amor, Ju! ❤ 

ACOMPANHE O BLOG:

Pausa pra Criatividade: @Blogpausapc | Pausa pra Criatividade no Pinterest