Personalizar citação em destaque o Blockquote no Blogger

em 08/08/2022

Tempo de leitura:

 

Personalizar citação em destaque o Blockquote no Blogger


Blockquote, em português citação, você já deve ter reparado que muitos blogs usam o Blockquote para diferenciar alguma parte importante do texto.


Na sua grande maioria a citação, (Blockquote), são personalizados conforme o layout do blog, gosto do autor e intenção de destacar o trecho abordado.


No Blogger você pode personalizar a tag Blockquote de várias, formas e cores conforme seu desejo e inserir no texto que deseja, para isso veremos  como usar a citação e duas formas de instalar a personalização do Blockquote.


  • Você ainda não sabe onde bem do que estou falando, confira na imagem abaixo:

Exemplo do painel do blog onde se encontra citação


No painel do seu blog esses três pontinhos, você clica nele e logo verá mais recursos para sua postagem, a citação são as aspas, (terceiro item), por padrão elas não têm nenhuma graça e nem destacam o texto.


Para usar o recurso selecione o trecho do texto que deseja destacar e clique nas aspas.


Quando usar: textos e trechos que precisam de destaque, tutoriais, resenhas, trechos de artigos de outros autores, códigos para personalizações (como aqui no blog), entre outras, dependendo do seu conteúdo.


Como já citei acima existem duas formas de inserir a personalização, podendo ser manualmente, nesse caso você pode colocar personalizações diferentes em cada postagem e a automática onde inserimos o código de personalização direto no código-fonte do Blogger.



Personalizando o Blockquote do Blogger manualmente




Vamos a primeira forma de personalizar o Blockquote que é a manual.

Caso você opte pela personalização manual, a forma é a seguinte:

Escreva sua postagem normalmente, quando terminar selecione a parte do texto que você deseja destacar.


No painel de edição clique no lápis que fica a sua esquerda, visualizar HTML, e ao final do artigo inclua o código de personalização desejado com as alterações, (cores, fontes e tamanho), combinando com seu blog.


Retorne a visualização escrever, revise se está tudo correto e publique seu post.

Nessa opção você pode colocar personalizações diferentes em cada postagem.


Agora vamos ver como instalar a personalização de forma automática, que será aplicada a todos os posts que tiverem a citação ativada.


Aplicando a personalização automática para o Blockquote



No painel administrativo do blog vá na aba tema, em seguida editar HTML, dê o famoso CTRL + F e quando abrir a caixa de pesquisa procure pela TAG de fechamento  ]]></b:skin> acima dela inclua o código escolhido.


Vamos aos códigos:


Primeiro Modelo - Blockquote com barra de rolagem, borda dupla em hover ao passar o mouse.


Fica parecido com o que uso aqui no blog.


Exemplo de Blockquote com barra de rolagem, borda dupla em hover ao passar o mouse.


.post blockquote{
height:180px; 
overflow:auto; 
background:#fffafa;
border:Double 4px #ef0993;
height:40px;
margin:6px 12px;
padding:20px;
font-style: Monserrat;
text-align:left;font-size:14pt;margin:4px;color:#000000;
background-color:#fffafa;
margin-top:12px;margin-bottom:14px;
}
.post blockquote:hover{background:#f9efd2;color: #000000;
}



Segundo Modelo - Blockquote com borda e em hover ao passar o mouse.


Blockquote com borda e em hover ao passar o mouse.


blockquote {
background-color: #dee9df;
padding: 5px;
border: 1px dashed #dee1d6;
text-shadow: 0px 1px 0px #977a8c;
box-shadow: inset 0 0 15px #ffffe0, 0 0 3px #afeeee;
color: #94a395;
padding: 10px;
-webkit-transition-duration: .50s;
}
blockquote:hover {
background-color: #dfebe3;
border: 1px dashed #f09fa5;
text-shadow: 0px 1px 0px #000000;
box-shadow: inset 0 0 15px #1e9aad, 0 0 3px #e9ebe4;
color: #bfd7bd;
-webkit-transition-duration: .50s;
}


Terceiro Modelo - Blockquote com borda a esquerda.


Exemplo de Blockquote com borda a esquerda.



.post blockquote {
margin: 1em 13px;
background:#ffffff;  /*cor do fundo do blockquote*/
border: 1px solid #805cbc;    /*cor da borda*/
border-left: 8px solid #010148;    /*cor da borda esquerda*/
padding:10px;    /* espaçamento do texto*/
font-size: 14px;    /*tamanho da fonte*/
font-family:Monserrat;    /*tipo da fonte*/
color:#62768c;    /*cor da fonte*/
}


Quarto Modelo - Blockquote com borda acima.


Blockquote com barra  acima


.post blockquote {
margin: 1em 13px;
background:#fff8ff;  /*cor do fundo do blockquote*/
border-top:5px solid #b13781; /* borda do top */
padding:10px;    /* espaçamento do texto*/
font-size: 14px;    /*tamanho da fonte*/
font-family:Monserrat;    /*tipo da fonte*/
color:#190719;    /*cor da fonte*/
}



Quinto Modelo - Blockquote com bordas arredondadas.


Exemplo Blockquote com bordas arredondadas.


.post blockquote {
border: 2px double #fbc490; /* cor e tamanho da borda */
background-color: ivory;
padding: 10px; /* espaçamento do texto */
text-align:center;
-webkit-border-radius: 20px; /* bordas arredondadas */
-moz-border-radius: 20px; /* bordas arredondadas */
border-radius: 20px; /* bordas arredondadas */
}


Todas as 5 personalizações foram testados nos modelos do Blogger, nenhuma teve problema com sua visualização.

Caso você use algum modelo de template com muitas personalizações ou baixado de outra fonte, e ocorrer do código inserido não aparecer, você pode instalar acima de </head>, para isso inclua o seguinte:


Antes do código de personalização <style> após o termino do código </style>.


Visualize estando OK, salve.


Para inserir manualmente nas postagens escolhidas use a mesma tag de abertura e fechamento destacada em rosa.

Deseja mudar as cores consulte a Tabela de cores.

Deseja aplicar mais personalizações ou realizar mudanças, confira em aprendendo códigos HTML e CSS fáceis o que e como você pode alterar os códigos das personalizações.


Dúvidas, sugestões pedidos deixe nos comentários logo abaixo.

Nenhum comentário , comente também!

Postar um comentário

Você leu um artigo escrito com grande dedicação. Gostou? !
Deixe seu comentário, crítica e sugestão, eles são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Aproveite para inscrever-se e receber as novidades.