Tutorial : Como personalizar Blockquote


Olá pessoas, tudo bem ?

Me desculpem por não ter postado ontem, fiquei muito fraca e tonta.

Enfim, vamos para o tutorial !

OBS : Os códigos que eu irei postar aqui, eu peguei do meu template.
Tutorial
Clique no código do template e aperte Ctrl e F
Depois pesquise /* Mobile (se você não achar, diga nos comentários)

Você irá achar uma código parecido com este :


/* Mobile----------------------------------------------- */body.mobile  {  padding: 0 10px;  background-size: 100% auto;}

E ABAIXO de /*Mobile cole o seguinte código :

Clique em Leia mais para continuar



Blockquote SEM hover
blockquote {border-right: 6px solid #000; /*direita*\ border-left: 6px solid #000; /*esquerda*\
background-color: #000;padding: 10px;font-size: 9px;color: #000;text-align: center;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}
Blockquote COM hover
blockquote:hover {border-right: 10px solid #000;border-left: 10px solid #000;background-color: #000;padding: 10px;font-size: 10px;color: #000;text-align: center;-webkit-transition-duration: .50s;}

Você pode colocar os dois blockquotes ou só o sem hover

Em background-color: #000; mesma coisa de cima

Em font-size: 9px; é o tamanho da fonte do blockquote e em color: #000 é a cor da fonte

Em -webkit-transition-duration: .50s altere só o 50s (São os segundos que o blockquote irá ficar com hover)

E em background-color você pode colocar uma imagem ao inves de uma cor, basta colocar background url : "url da imagem"

Veja a explicação de cima para alterar o resto !

Beijos




Nenhum comentário:

Postar um comentário