Tutorial: Blockquote personalizado com efeito hover
segunda-feira, fevereiro 02, 2015
Hoje eu trouxe um tutorial bem útil e simples que achei no Blogueira Rebelde. Vou ensinar como adicionar um blackquote personalizado aos seus posts. Ele contém o efeito hover, que é quando você passa o mouse em cima e ele muda de cor.
Pra quem não sabe, isso é um blackquote :)
Primeiro, vá ao Painel do seu blog > Modelo > Editar HTML. Então, procure (Ctrl+F) por ]]></b:skin> e acima, cole o seguinte código:
blockquote {padding: 5px;font-size: 11px;color: #COR DA LETRAbackground-color: #COR DO FUNDO
border-right: 9px solid #COR DA BORDA DIREITA
border-left: 9px solid #COR DA BORDA ESQUERDA
text-align: center;box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;-webkit-transition-duration: .50s;}blockquote:hover {border-right: 3px solid #COR DA BORDA DIREITA HOVER
border-left: 3px solid #COR DA BORDA ESQUERDA HOVER
-webkit-transition-duration: .50s;}
Os trechos em negrito são editáveis, portanto configure com as cores que quiser, utilizando o código HTML da cor desejada. Eu indico essa tabela de cores aqui. Por fim, é só salvar.
Depois, quando quiser utilizar o blackquote, basta selecionar o trecho na postagem e clicar no ícone de aspas na aba de opções da postagem.
Espero que tenham gostado :)
2 comentários
Muito legal!
ResponderExcluirMelhor Blog <3
ResponderExcluir