Blockquote personalizado e com efeito hover

O primeiro tutorial do blog *-*

Blockquote, para quem não sabe, é uma caixinha como a do exemplo abaixo. Ela é muito usada em blogs para dar alguma informação extra para o post, ou fazer um comentário sobre alguma coisa não relacionada a postagem. Também é bastante usada em tutoriais, para colocar códigos. Efeito hover, é quando passamos o mouse por cima de alguma coisa, e essa coisa muda.
Viiu ? Esse é um exemplo de bloquote. Passe o mouse aqui em cima e veja um exemplo de efeito hover. É isso que vamos aprender a fazer hoje.
Entenderam ? Ótimo, agora vamos ao tutorial:

Primeiro, vamos até o seu HTML (Painel > Design > Editar HTML).

Agora você vai procurar no seu HTML a tag ]]></b:skin>. Para encontrar com mais facilidade, é só dar Ctrl+F e digitar essa tag. Ele aparecerá destacado em laranja (ou outra cor dependendo do seu navegador).

Agora, acima da tag, cole o código abaixo:

 blockquote {
border: 1px solid #FF1493;
background-color: #000000;
padding: 10px;
font-size: 11px;
color: #ffffff;
text-align: justify;
}
 blockquote:hover {
border: 1px solid #00FFFF;
background-color: #000000;
}
As partes coloridas são a que vamos personalizar. Entenda o código:

Rosa: aqui vamos personalizar a borda do blockquote. Para alterar o tamanho, basta substituir "1px" por um número maior. "solid" é o estilo da borda, (clique aqui para ver outros estilos), e #FF1493 é a cor em HTML (clique aqui para ver outras cores em HTML).

Azul claro: É o fundo do blockquote. Para mudar a cor, é só mudar a parte destacada por outra cor (sempre em HTML).

Amarelo: Tamanho do texto dentro do blockquote. Recomendo deixar assim.

Verde claro: Cor do texto dentro do blockquote, se for mudar, sempre em HTML.

Laranja: Borda quando o mouse estiver em cima do blockquote (efeito hover). Funciona do mesmo modo que a primeira.

Vermelho: Cor do fundo com mouse em cima.

Se quiser, pode colocar os cantos arredondados, assim como o meu blockquote. É só adicionar o código abaixo:

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

Se quiser que fique arredondado sem o mouse está em cima, adicione depois de blockquote { e se quiser que fique arredondado com o mouse em cima, depois de  blockquote:hover {


Espero que tenham gostado e que usem muuito o tutorial ! Podem reblogar, mas creditem hein !
Beijinhos.

Cursores coloridos

Fiz alguns cursores (setas) coloridinhos, bem fofos. Para colocar em seu blog, basta ir em Painel > Design > Adicionar um Gadget > HTML/JavaScript e cole o código abaixo do cursor escolhido.
























São pouquinhos, mas espero que sejam úteis :) Podem repassar, mas CREDITE SEMPRE.
Beijinhos.

Bem-Vindos ao "Coisas de Garotas Designs"

E aqui vai uma super novidade. Sejam bem-vindos ao meu mais novo espaço, chamado "Coisas de Garotas Designs".

Tumblr_lzmo36lpby1r6ph4vo1_500_large

Esse lugarzinho aqui, nada mais é do que uma expansão do meu blog oficial, o "Coisas de Garotas", onde postarei tudo que sei para deixar o layout do blog de vocês mais personalizado como nunca !

Mas, porque um blog novo, Paulinha ?

Na verdade, eu sempre quis postar tutoriais e coisinhas para blogs lá no Coisas de Garotas, mas percebi que além de ficar MEGA BAGUNÇADO, perderia o foco do blog. Por isso, bem inspirada no que a Emily (do antigo Place Fame) fez, o Place Fame Extras, também quis criar um blog a parte para postar meus tutoriais.

Espero que gostem dessa novidade, e usem muito as dicas que postarei aqui, rs.
Beijinhos.