06 junho 2016

Estilos de Blockquote para Blogger


Quem não gosta de destacar um trecho, sinopse ou algo no blog que ache importante, para seus leitores? Pois é, neste pensamento que pensei em trazer alguns estilos de BLOCKQUOTE, que usamos muito para este quesito, destacar.
Em outro tutorial ensinei como colocar, mas vou relembrar este detalhe e dar a vocês estilos em CSS. Não é difícil, mas necessita sua atenção.
Antes de qualquer coisa, lembre-se de fazer um backup do seu design. Não sabe, então veja este TUTORIAL. Prevenir sempre é bom, pode dar alguma coisa de errado, ou simplesmente você não tenha gostado do estilo. Aí, é só fazer upload do design no blog.

Para destacar e fazer com que o blockquote funcione você deve fazer o seguinte:
* Na area de preparo de postagem, depois de ter feito o seu post, você deve selecionar o texto, trecho que deseja destacar. Após selecionado você vai clicar nas "aspas" que tem logo acima, embaixo do titulo da postagem, nas configurações da sua postagem. Como mostra na imagem abaixo, destacado em vermelho.

Pronto! Agora clica em salvar, atualizar ou publicar.

Agora vamos entender como colocar o codigo CSS, que vai dar estilo ao seu blockquote, no blogger.
*Acesse o painel do seu blogger. 
1º) Vá no menu no lado direito e clique em MODELO.
2º) Clique em PERSONALIZAR.
*Vai abrir outra pagina, onde você pode personalizar, de forma facil e simples, seu blog. Nesta parte, você vai clicar em AVANÇADO. Como mostra a imagem a seguir.

*Vai abrir outro menu ao lado, você vai descer a barrinha ate final, e vai ver ADICIONAR CSS, clique nele.

*Abrirá uma caixa em branco (nesta imagem, eu já tinha adicionado o código, mas ela vai abrir sem nada, totalmente em branco). Dentro da caixa (1º) você vai colar o codigo do estilo de blockquote que escolheu. 
*Após adicionar, você vai observar como vai ficar. Gostou? Agora só clicar logo acima no botão laranja onde esta escrito APLICAR NO BLOG. Ele vai applicar e só voltar ao blog.

Pronto, vc acabou de adicionar o estilo ao blockquote sem precisar acessar o HTML. Facil, não é!

Agora vou dar a vocês o codigo CSS de alguns blockquotes que separei.
 Modelo 1
Normal
Hover






Código do modelo 1

.post blockquote {
background: #2aa4cf;
padding: 10px;
color: #ffffff;
border-top: 20px solid #444;
transition:border-top-color 400ms;
-webkit-transition:border-top-color 400ms;
-moz-transition:border-top-color 400ms;
}
.post blockquote:hover {
background:#444;
border-top-color:#2aa4cf;
}

Modelo 2
Normal
Hover

Codigo modelo 2

.post blockquote {
    text-align:left;
    font: 14px/24px Arial, sans-serif;
    color: #414d65;
    padding: 0.5em 10px;
    margin: 1.5em 10px;
background:#a8c3be;
    }
    .post blockquote:before {
    content: open-quote;
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ce8598;
    float: left;
    position: relative;
    border-radius: 25px;
    margin-right: 0.5em;
    vertical-align: -0.4em;
    display: block;
     height: 25px;
     width: 25px;
    }
    .post blockquote:after {
    content: close-quote;
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ce8598;
    float: right;
    position: relative;
    border-radius: 25px;
    margin-right: 1em;
    vertical-align: -0.5em;
    display: block;
    height: 25px;
    width: 25px;
    }
    .post blockquote:hover:after, blockquote:hover:before {
    background-color: #6c8f95;
    transition: all 350ms;
    -o-transition: all 350ms;
    -moz-transition: all 350ms;
    -webkit-transition: all 350ms;
    }

Modelo 3

Codigo modelo 3

.post blockquote {
background: #fff url(https://3.bp.blogspot.com/-YXTlF8rViZs/V1V19mI0axI/AAAAAAAABk8/yl44VxbLQXEO2UuzgrtKDtSNjcw6YG46ACLcB/s1600/blockquote%2Brosa.png) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Modelo 4
Código do modelo 4

blockquote {
margin-bottom: 20px;
line-height: 1.65em;
font-weight: 300; padding: 20px 20px 20px 50px;
color: #fff;
border-top: 5px solid #77818d;
font-size: 16px; margin-bottom: 20px;
line-height: 1.65em;
font-weight: 300;
padding: 20px 20px 20px 50px;
color: #fff;
border-top: 5px solid #77818d;
border-left: 5px solid #dfdfdf;
background: #f4f4f4;
color: #999999;
padding: 20px;
font-size: 17px;
font-style: italic;
line-height: 24px; margin: 30px 60px;
}
blockquote p { margin: 0; }

Modelo 5
Codigo do modelo 5

.post blockquote {
padding:10px 15px;
margin: 5px 15px;
outline: 1px dashed #fff;
outline-offset: -4px;
background: -webkit-linear-gradient(#571c22, #ccc2b8);
background: -moz-linear-gradient(#571c22, #ccc2b8);
background: -o-linear-gradient(#571c22, #ccc2b8);
font-size: 15px;
color: #fff;
font-family: Times;
 -moz-box-shadow: -1px 2px 5px #ccc;
  -webkit-box-shadow: -1px 2px 5px #ccc;
  box-shadow: -1px 2px 5px #ccc;
}
.post blockquote:before {
content: "\201C";
color: #e9e5da;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post blockquote:after {
content: "\201D";
color: #e9e5da;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding:15px 0px 0px 5px;
}

Modelo 6
Código do modelo 6

.post blockquote{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 18px;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
.post blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #9c667e;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.post blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;

Modelo 7
Código do modelo 7

.post blockquote {
padding:10px 15px;
margin: 5px 15px;
outline: 1px solid #fff;
outline-offset: -4px;
background:#f5fcda;
font-size: 15px;
color: #5d1b05;
font-family: Times;
 -moz-box-shadow: -1px 2px 5px #ccc;
  -webkit-box-shadow: -1px 2px 5px #ccc;
  box-shadow: -1px 2px 5px #ccc;
}
.post blockquote:before {
content: "\201C";
color: #e7899b;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post blockquote:after {
content: "\201D";
color: #e7899b;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding:15px 0px 0px 5px;
}


Modelo 8
Código do modelo 8

.post blockquote {
background: linear-gradient(#f2eed5, #fffaea) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #5b1901;
margin: 30px 15px 5px;
padding: 15px 30px;
position: relative;
font: 1.2em/1.2 Cambria,Georgia,sans-serif;
font-weight: bold;
 }
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #f3edd5;
border-style: solid;
border-width: 50px 0px 0px 20px;
top: -50px;
content: "";
display: block;
left: 50px;
position: absolute;
width: 0;
 Espero que o tutorial, de alguma forma, tenha te ajudado.
Quer algum tutorial? Pode deixar nos comentários ou através do email contato@meuinfinito.com.br
Agora deseja um design maravilhoso? Contrate meus serviços. Peça um orçamento através do email anazuky@hotmail.com ou pela Fanpage.

Nenhum comentário:

Postar um comentário