Tutorial: 10 Modelos de blockquote (citação) para o seu blog



24 de fevereiro de 2018






Oláá! tudo bem com vocês? espero que sim! hoje eu trago um tutorial de HTML bem simples para a personalização de blogs. São os Blockquotes (citações) para blogger. Aqui no blog já tem post antigo com alguns modelos, mas hoje resolvi trazer mais. Todos são  em CSS.

Como usar o blockquote no blogger, depois de digitar a parte do seu post que você quer destacar, no próprio painel de postagem, você seleciona  onde você quer que fique com o blockquote e clica no botão com as duas aspas. Como no print abaixo.

como usar blockquote/citação no blogger


Como todos os códigos são de CSS, para aplica-los é só ir em Tema>> Editar HTML e em seguida clicar em alguma parte do código e digitar CTRL+F na caixinha de pesquisa você cola esse trecho ]]></b:skin>  e acima dele cola qualquer um dos códigos dos modelos abaixo.

 Modelos 


blockquote personalizado blog
Créditos: Chá com os Anjos
blockquote {
border: 3px solid #fafcfd;
background-color: #fbf0ff;
padding: 10px;
font-size: 11px;
color: #a48ead;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: inset 0 0 12px #f6dad8, 0 0 5px #d976a3;
}



blockquote personalizado blog
Créditos: Adolescente Nerd


.post blockquote {
border-radius: 3px;
color: #ffffff;
text-shadow: 1px 1px 0 #B4B2D0;
margin-left: -0px; margin-right: -0px;
padding: 5px;
background: #d3d4df;
-webkit-transition-duration: 1s;
-moz-box-shadow: inset 0 0 0 0px #bbbacd;
-webkit-box-shadow: inset 0 0 0 0px #bbbacd;
box-shadow: inset 0 0 0 0px #bbbacd;
-webkit-transition-duration: 1s;
}
.post blockquote:hover {
background: #bbbacd;
-moz-box-shadow: inset 0 0 0 50px #bbbacd;
-webkit-box-shadow: inset 0 0 0 50px #bbbacd;
box-shadow: inset 0 0 0 50px #bbbacd;
text-shadow: 1px 1px 0 #A8A6D1;
}

blockquote personalizado blog
Créditos: Bunny Crazy
 blockquote {
background-color: #666;
color:#fff;
padding: 15px;
margin: 1em 40px;
-moz-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px;
}


blockquote personalizado blog
Créditos: 4 Teen 
.post blockquote {
padding: 10px 10px;
background:#ededed;
boder-top: 3px solid #a19e9e; /*------------Cor da barra de baixo------*/
border-radius:2px; /*-------------Arredondamento do gadget--------*/
border-bottom: 1px solid #a19e9e;
border-top: 1px solid #a19e9e;
border-right: 7px solid #f556a3;
border-left: 7px solid #f556a3;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-border-radius: 30px 10px / 10px 30px;
border-radius: 30px 10px / 10px 30px;
}
.post blockquote:hover {
border-left: 7px solid #f99eca;
border-right: 7px solid #f99eca;
border-top: 1px solid #a19e9e;
border-bottom: 1px solid #a19e9e;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-border-radius: 10px 30px / 30px 10px;
border-radius: 10px 30px / 30px 10px;
}

blockquote {
border-right: 7px solid #f99db3;
border-left: 7px solid #f99db3;
background-color: #f5f2f3;
padding: 10px;
font-size: 11px;
color: #777777;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
-webkit-transition-duration: .50s;
}
blockquote:hover {
border-right: 11px solid #be55fb;
border-left: 11px solid #be55fb;
background-color: #f5f2f3;
padding: 10px;
font-size: 11px;
color: #777777;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
-webkit-transition-duration: .50s;
}

blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/}
 blockquote: hover {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 15px;
}

Créditos: Just Like That 
@FONT-FACE {FONT-FAMILY: "ARMA FIVE"; SRC: URL('HTTP://STATIC.TUMBLR.COM/BSALULU/QXQMMC6LM/PF_ARMA_FIVE.TTF');}
BLOCKQUOTE {
FONT-FAMILY: ARMA FIVE;
FONT-SIZE: 8PX;
PADDING: 7PX;
MARGIN-LEFT: 17PX;
MARGIN-RIGHT: 17PX;
BORDER-RADIUS: 4PX;
TEXT-ALIGN: CENTER;
BACKGROUND: #F5F5F5;
BORDER-RIGHT: 3PX SOLID #B1C7D3;
BORDER-LEFT: 3PX SOLID #B1C7D3;
BOX-SHADOW: INSET 0PX 0PX 5PX #DDD;
-WEBKIT-TRANSITION: ALL 0.50S EASE;
}
BLOCKQUOTE:HOVER {
FONT-FAMILY: ARMA FIVE;
FONT-SIZE: 8PX;
PADDING: 7PX;
MARGIN-LEFT: 17PX;
MARGIN-RIGHT: 17PX;
BORDER-RADIUS: 4PX;
TEXT-ALIGN: CENTER;
BACKGROUND: #F5F5F5;
BORDER-RIGHT: 0PX SOLID #B1C7D3;
BORDER-LEFT: 0PX SOLID #B1C7D3;
BOX-SHADOW: INSET 0PX 0PX 5PX #DDD;
-WEBKIT-TRANSITION: ALL 0.50S EASE;
}


Créditos: Paradizing
.post-body blockquote {

background-color: #fdd8d9;

border-bottom: 2px solid #faa7a8;

text-shadow: 0px 1px 0px #fbddde;
-webkit-border-radius: 20px;
-moz-border-radius: 29px;
box-shadow: inset 0 0 15px #f0b0b1, 0 0 3px #eec1c2;
color: #ee8789;
padding: 10px;
-webkit-transition-duration: .50s;
}
.post-body blockquote:hover {
background-color: #eadbd9;
border-bottom: 2px solid #bf928c;
text-shadow: 0px 1px 0px #f1c3bc;
box-shadow: inset 0 0 15px #c9b0ad, 0 0 3px #dec1be;
padding: 10px;
color: #a88a86;
-webkit-transition-duration: .50s;
}

Créditos: Sekai Bakawaii

 .post blockquote {

background:#FFD39B; /* cor de fundo */

margin:15px; /* margem entre a borda da area de postagem e a caixinha de blockquote */
padding:15px; /* margem interna */
border-top:5px solid #FF7F24; /* borda do top */
}

Créditos: Adolescente Nerd


/* Blockquote Simple: The Lovers*/

.post blockquote {
background: #f5f5f5;
border-left: 8px solid #66cdaa;
color: #000000;
font-family:century gothic;
font-size: 13px;
text-align: center;
padding: 5px;
}


Espero que tenham gostado! qual foi seu modelo favorito? até a próxima postagem 

5 comentários:

  1. Que ótimo exatamente o que eu preciso pro meu blog de projeto eletrico

    ResponderExcluir
  2. salvando seu post pra eu colocar no meu blog. Eu tenho blockquote, mas quero mudar.

    Vidas em Preto e Branco

    ResponderExcluir
  3. Adorei demais esse seu post. Muito útil.

    ResponderExcluir
  4. Eu amo blockquotes, são tão fofos <3

    ResponderExcluir
  5. Teus posts são feitos com muito capricho e muito objetivos, não tem como errar o passo a passo. Parabéns. Beijos

    ResponderExcluir

Fã page | Twitter | Instagram

Críticas construtivas são sempre bem vindas.
Deixe o link do seu blog no final do comentário e retribuiremos a visita
Aceitamos TAG's, se não a respondermos, provavelmente nós já devemos ter respondido anteriormente por outra indicação.
Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2018. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo