Hoje é dia de mais um tutorial! E o tuto de hoje é sobre blockquotes personalizados em vários modelos.
Os modelos foram todos personalizado por mim, então não retire os créditos viu! Vamos lá.
Para adicionar um blockquote você precisa apenas clicar nesse ícone 
Agora que você já sabe adicionar um blockquote no post você precisa personalizá-lo para ficar bonitinho né!
Agora que você já sabe adicionar um blockquote no post você precisa personalizá-lo para ficar bonitinho né!
Vá em Editar HTML, aperte Ctrl+F e procure por ]]></b:skin>
Acima dele você adiciona os códigos do blockquote. Tem que ser acima viu gente, nunca embaixo.
/*Blockquote Personalizado Modelo 1 - blog-justmarie.blogspot.com*/
blockquote {
border-bottom: 1px dashed #63B8FF;/* cor da borda */
border-top: 1px dashed #63B8FF;/* cor da borda */
background-color: #F5F5F5; /* cor de fundo */
padding: 10px;
font-size: 12px; /* tamanho da fonte */
color: #000000; /* cor da fonte */
text-align: justify;
border-radius: 3px; /* bordas arredondas, se não quiser apague a linha */
border-left: 2px solid #63B8FF; /* cor da borda */
border-right: 2px solid #63B8FF; /* cor da borda */
}
/*Blockquote Personalizado Modelo 2 - blog-justmarie.blogspot.com*/
blockquote {
background-color: #F5F5F5; /* cor de fundo */
padding: 10px;
font-size: 12px; /* tamanho da fonte */
color: #000000; /* cor da fonte */
text-align: justify;
border-radius: 3px; /* bordas arredondas, se não quiser apague a linha */
border-left: 2px solid #63B8FF; /* cor da borda */
border-right: 2px solid #63B8FF; /* cor da borda */
}
/*Blockquote Personalizado Modelo 3 - blog-justmarie.blogspot.com*/
blockquote {
background-color: #F5F5F5; /* cor de fundo */
padding: 10px;
font-size: 12px; /* tamanho da fonte */
color: #000000; /* cor da fonte */
text-align: justify;
border-radius: 3px; /* bordas arredondas, se não quiser apague a linha */
border-left: 5px solid #63B8FF; /* cor da borda */
border-right: 5px solid #63B8FF; /* cor da borda */
border-bottom: 1px solid #63B8FF;/* cor da borda */
border-top: 1px solid #63B8FF;/* cor da borda */
}
/*Blockquote Personalizado Modelo 4 - blog-justmarie.blogspot.com*/
blockquote {
background-color: #F5F5F5; /* cor de fundo */
padding: 10px;
font-size: 12px; /* tamanho da fonte */
color: #000000; /* cor da fonte */
text-align: justify;
border-radius: 20px; /* bordas arredondas, se não quiser apague a linha */
border-left: 1px dashed #63B8FF; /* cor da borda */
border-right: 1px dashed #63B8FF; /* cor da borda */
border-bottom: 1px dashed #63B8FF;/* cor da borda */
border-top: 1px dashed #63B8FF;/* cor da borda */
}
Eles foram todos testados e não ouve nenhum errinho! Ele é personalizável, ou seja, você pode mudar as cores e espessura das bordas se quiser (1px para mais fina e 5px para grossa).
Qualquer dúvida, comentem que eu estarei aqui para responder!
XOXO
Nenhum comentário:
Postar um comentário
Obaa vai comentar?! Antes que mande seu comentário certifique-se de que está de acordo com as regrinhas:
1- Comentários de "Seguindo segue de volta" ou parecidos serão ignorados se não comentarem sobre o post.
2- Comentários com palavras de baixo nível serão ignorados. Tenha mais respeito.
3- Críticas são fundamentais, fique à vontade para criticar o blog, só assim poderei melhorar!
4- Deixe sempre o link do seu blog para que eu possa fazer uma visitinha!
Seguindo as regrinhas, seu comentário será publicado com muito prazer!
Obrigado e beijinhos *--*
_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-