Tutorial: Blockquotes Personalizados.

Olá gente! Bom, hoje eu trouxe uns blockquotes personalizados, já que faz um tempo que veem me pedindo pra postar alguns blockquotes e o que usamos aqui no blog também, sem mais delongas eu vou postar ele e mais uns outros bem bonitos. Dou créditos ao blog Iris Joven que foi de onde eu tirei os blockquotes. 

E agora para ver os blockquotes cliquem em leia mais. 

Bom para colocar os blockquotes você vai em "Editar HTML" clica no quadro e aperta Ctrl+F e procura por ]]>  Ao achar essa tag em cima você cola o código do blockquote que você preferir.

• Primeiro Blockquote.

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
blockquote {
background-color: #F7F4F5;
padding: 10px;
font-size: 8px;
font-family: silkscreen;
color: #000;
text-align: center;
box-shadow: inset 0 0 10px #ECEBEB, 0 0 3px #D2D1D3;
-webkit-transition-duration: .50s;
}
blockquote:hover {
background-color: #9E4385;
box-shadow: inset 0 0 10px #ECEBEB, 0 0 3px #9E4385;
padding: 10px;
color: #000;
text-align: center;
-webkit-transition-duration: .50s;
}

• Segundo Blockquote

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
  blockquote {
background-color: #F0F0F0;
border-right: 10px solid #Bf64C7;
border-left: 10px solid #BF64C7;
padding: 8px;
font-size: 8px;
font-family: silkscreen;
color: #000;
text-align: center;
}

• Terceiro Blockquote

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
blockquote {
background-color: #FFF0F5;
padding: 10px;
font-size: 10px;
font-family: silkscreen;
color: #000;
text-align: center;
-webkit-transition-duration: .50s;
Border: solid 1px #ed71b7
}

• Quarto Blockquote

 blockquote {
border-right: 7px solid #080808;
border-left: 7px solid #fd0691;
background-color: #f5f2f3;
padding: 10px;
font-size: 15px;
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 #648d9d;
border-left: 11px solid #fd0691;
background-color: #f5f2f3;
padding: 10px;
font-size: 15px;
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;
}

Eu espero que tenho ajudado vocês.
Beijos
Até.