sábado, 5 de abril de 2014

Blockquote personalizado


Olá amores!! Esse é o primeiro post do blog e hoje vou ensinar vocês como personalizar o blockquote do seu blog ,e para quem não sabe o que é um blockquote eu vou explicar.  

O que é um blockquote 
Blockquote é uma caixa de texto usada geralmente para destacar algo,como um código,avisos etc..

isso é um blockquote

Então vamos lá!!  


- Vá em Modelo > Editar HTML > aperte CTRL+F e procure por ]]></b:skin> 
-Quando achar escolha algum dos códigos abaixo e cole-o acima de ]]></b:skin>   




/***** Blockquote com efeito hover by Little W0nd3rl4nd,não remova os créditos ******/
.post blockquote {
background: #FF69B4;
padding: 8px;
font-family: pf Arma Five;
text-shadow: 1px 1px 1px #a78d9a;
font-size: 8px;
color: #ffffff;
border: 1px solid #bea7b3;
outline-offset: -2px;
outline: 1px dashed #fff ;
 -webkit-transition: all 0.5s ease;
-webkit-transition-duration: .50s;
}
.post blockquote:hover {
background: #FF1493;
letter-spacing:1px;
-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out;
padding: 8px;
font-family: pf Arma Five;
font-size: 8px;
color: #fffff;
}
/***** Blockquote com efeito hover by Little W0nd3rl4nd,não remova os créditos ******/






/***** Blockquote com efeito hover by Little W0nd3rl4nd,não remova os créditos ******/
.post blockquote {
background: #EE82EE;
padding: 8px;
font-family: pf Arma Five;
text-shadow: 1px 1px 1px #a78d9a;
font-size: 8px;
color: #ffffff;
border: 1px solid #bea7b3;
outline-offset: -2px;
outline: 1px dashed #fff ;
 -webkit-transition: all 0.5s ease;
-webkit-transition-duration: .50s;
}
.post blockquote:hover {
background: #DDA0DD;
letter-spacing:1px;
-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out;
padding: 8px;
font-family: pf Arma Five;
font-size: 8px;
color: #fffff;
}
/***** Blockquote com efeito hover by Little W0nd3rl4nd,não remova os créditos ******/







/***** Blockquote com efeito hover by Little W0nd3rl4nd,não remova os créditos ******/
.post blockquote {
background: #87CEFF;
padding: 8px;
font-family: pf Arma Five;
text-shadow: 1px 1px 1px #a78d9a;
font-size: 8px;
color: #ffffff;
border: 1px solid #bea7b3;
outline-offset: -2px;
outline: 1px dashed #fff ;
 -webkit-transition: all 0.5s ease;
-webkit-transition-duration: .50s;
}
.post blockquote:hover {
background: #7EC0EE;
letter-spacing:1px;
-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out;
padding: 8px;
font-family: pf Arma Five;
font-size: 8px;
color: #fffff;
}
/***** Blockquote com efeito hover by Little W0nd3rl4nd,não remova os créditos ******/


-Depois é só salvar
-Caso você queira de outra cor é só trocar a cor do seu blockquote,altere onde está destacado de azul pelo código da cor que você quer,tem dois códigos destacados de rosa o primeiro é a cor do normal e o segundo a cor do hover.

Espero que gostem e usem                         

Ask aberta para pedidos,perguntas e sugestões          Bjss!



Um comentário:

  1. o que isso?? bloquete?? pode me explicar??

    me responda lá http://animedoqem.blogspot.com.br

    ResponderExcluir