Follow my blog with Bloglovin

15 março 2018

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.

Tutorial para personalizar a caixa de citação do blog

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:

Tutorial para personalizar a caixa de citação do blog
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:







3 comentários:

  1. Siga o meu blog por favor. https://rdamakeu.blogspot.pt/

    ResponderExcluir
  2. O seu blog é incrivel, já li vários post's <3
    www.cinthiafabiana.blogspot.com

    ResponderExcluir
    Respostas
    1. Aaaah, obrigada Cinthia! Fico feliz em saber que está gostando dos posts <3

      Excluir

❤ Seu comentário é muito IMPORTANTE para o andamento do blog, deixe sua opinião, dica, elogio, critica (com fundamento) ou sugestão.
❤ Deixe o link do seu blog para visitarmos!
❤ Não ofenda nem desrespeite ninguém.
❤ Instagram @blogpausapc