Tutorial - Blockquote Hover

 

Hooy~ 

Bom, Amanhã é Véspera de Natal, Certo? 

Todo Mundo Comemora \o/ 

 Mas... Saindo desse Assunto... 

Vamos aprender a deixa o Blockquote Hover? 

Aqui um Exemplo: 

Exemplo =3 

Vamos Aprender /o/ 

1. Vá em Desing >> Editar HTML 

2. Dê CTRL + F ou F3 e procure por /* Widgets 

3. Abaixo da TAG procurada, Você irá encontrar um Código mais ou menos assim: 

 .sidebar .widget {

  border-bottom: 2px solid $(widget.border.bevel.color);

  padding-bottom: 10px;

  margin: 10px 0;

}

4. Copie o Código abaixo e cole-o depois do ''}'' 

.post blockquote {
font-family: Century Gothic; /* Tipo de fonte que aparecerá em seu blockquote */
background: #f0f0f0; /* Cor do fundo de seu blockquote */
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
padding: 3px; /* acolchoamento */
border-left: 4px solid #000; /* Borda esquerda */
border-right: 4px solid #000; /* Borda direita */
-webkit-transition-duration: .50s;
}
.post blockquote:hover {
border-left: 2px solid #000; /* Borda esquerda quando passa o mouse */
border-right: 2px solid #000; /* Borda direita quando passa o mouse */
-webkit-transition-duration: .50s;
} 

Seu Código deverá ficar assim: 

 .sidebar .widget {

  border-bottom: 2px solid $(widget.border.bevel.color);

  padding-bottom: 10px;

  margin: 10px 0;

}

.post blockquote {

font-family: Century Gothic; /* Tipo de fonte que aparecerá em seu blockquote */

background: #f0f0f0; /* Cor do fundo de seu blockquote */

box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;

padding: 3px; /* acolchoamento */

border-left: 4px solid #000; /* Borda esquerda */

border-right: 4px solid #000; /* Borda direita */

-webkit-transition-duration: .50s;

}

.post blockquote:hover {

border-left: 2px solid #000; /* Borda esquerda quando passa o mouse */

border-right: 2px solid #000; /* Borda direita quando passa o mouse */

-webkit-transition-duration: .50s;

} 

  

Pronto! 

Agora é só Mudar as Cores! 

Para utilizar o Blockquote, É só apertar esse Botão: 

 

 Espero que tenha ajudado! 

Créditos: Senha Incorreta

Sayonara~ u3u