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

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 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 

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;
}

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;
}

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;
}

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 

Instagram | Fã page | Facebook Pessoal | Portfólio