tutorial
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.
Eu espero que tenho ajudado vocês.
Beijos
Até.
- 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é.
Peguei o primeiro! - mudei a cor. -
ResponderExcluirPeguei o segundo Cams, obrigado. - Mudei as cores -
ResponderExcluirPeguei o segundo e mudei as cores :3
ResponderExcluirPeguei o terceiro, deixei ele rosinha mesmo porque combinou com o layout que eu estou usando agora ><
ResponderExcluirhttp://confu-sa.blogspot.com.br/
Utilizei o ultimo, muito lindo! ^^
ResponderExcluir