PS.: MELHOR VISTO NO GOOGLE CHROME

27 agosto 2013

Tutorial - Blockquote Personalizado - 2013


Exemplo


Achei esse tutorial muito bom e útil. Simples e com efeito dos lados que se espandem.


1. Vá em Modelo > Editar HTML > Clique na primeira seta > Procure por ]]></b:skin> e cole acima o seguinte código:

blockquote {
padding: 5px;
font-size: 11px;
color: #696969;
background-color: #f7e9e2;
border-right: 9px solid #ddc69f;
border-left: 9px solid #ddc69f;
text-align: center;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
-webkit-transition-duration: .50s;
}
blockquote:hover {
border-right: 3px solid #ddc69f;
border-left: 3px solid #ddc69f;
-webkit-transition-duration: .50s;
}

Caso não tenha o blockquote no seu layout e não sabe como colocar, é só fazer o mesmo processo, só que dessa vez o código seria este:


.post blockquote {
background #efefef:
border-left: 3px solid #ff4aa5;
padding: 5px;
}






Nenhum comentário:

Postar um comentário