18 de jul de 2012

2 blockquotes


Ooi gente! Como vão vocês? Espero que estejam bem, hoje eu trouxe para vocês 2 blockquotes desenvolvidos por mim, eu aprendi a editar esses blockquotes num tutorial do Sweet Poison.

Para usar os blockquotes, você deverá colar o código fornecido antes de ]]></b:skin>

Blockquote #1
.post blockquote {
background: #FFC0CB;
border-right:5px solid #000000;
text-align: right;
padding: 5px;
margin:10px 20px 10px 20px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
.post blockquote:hover {
background: #DDA0DD;
border-right:15px solid #000000;
text-align: right;
padding: 5px;
margin:10px 20px 10px 20px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}


P.S: o tamanho dele não muda, é que na imagem ficou ruim

Blockquote #2
.post blockquote {
background:#98FB98 ;
border-right:20px solid #228B22;
text-align: left
padding: 5px;
margin:10px 20px 10px 20px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.post blockquote:hover {
background:#CAFF70 ;
border-right:40px solid #458B00;
text-align: left
padding: 5px;
margin:10px 20px 10px 20px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
Entendendo os códigos:

A parte em negrito significa as cores, tanto no hover quanto sem o hover. Background é o fundo e Border-right... é a borda.
A parte sublinhada significa a borda, você pode mudar para right (direita) ou left (esquerda), a largura você pode mudar também, lembrando de deixar sempre diferente a do hover, e o estilo vocês podem mudar para dashed ou pointed, mas aconselho deixar do jeito que está.

Espero que gostem dos blockquotes, são meus primeiros. Por favor creditem se forem usar e não repassem.

Um grande beijo para vocês.

8 comentários:

  1. Achei bem legal!!
    Eles fazem diferença em uma portagem!!

    Beijos!!
    Blog|Twitter

    ResponderExcluir
  2. que lindo os efeitos!! Ameei o noovo lay, divo *-*
    # >>> Morangos Também Falam

    ResponderExcluir
  3. Olá adorei o tuto :)
    Amei seu blog, ja estou seguindo !
    Beijos :*

    http://www.melhoresmeninas.blogspot.com

    ResponderExcluir
  4. Oi, afiliação e só pedir :)
    Adorei o tutorial.
    http://blogmuitofofodaaline.blogspot.com.br/

    ResponderExcluir
  5. Que lindos, gostei! *_* Todos os blockquotes que eu uso no gdos sou eu que faço, adoro personalizar P:
    → Garota do Olhar Sincero

    ResponderExcluir
  6. AAAAAAAAAAAAAAAAAAAmeeeeeeeeeeeeeei

    ResponderExcluir
  7. Época de votações!
    Já começaram as votações para o concurso “Meu blog é Maravilhosamente Teen”, do blog Famosos Stars, e você está participando!
    Vote no seu blog, chame os amigos, quem quiser... kk!!:
    http://www.famosos-famososstars.blogspot.com.br/
    E se quiser colocar o selinho, para seu blog ter mais chances de ganhar, pegue clicando nesse link:
    http://www.famosos-famososstars.blogspot.com.br/2012/07/votacoes-iniciadas.html#comment-form
    Boa Sorte!!! :)
    Bjs,
    Laura
    http://www.famosos-famososstars.blogspot.com.br/

    ResponderExcluir
  8. Pefeeeito, adoreeei ! Ajudou mt hahah
    www.smallog.blogspot.com

    ResponderExcluir

Obrigada por ler e comentar!
Deixe o link do seu blog (ou seu perfil aberto) para que eu possa retribuir. Não gosto muito de responder dúvidas via comentários, então prefiro que você mande na ask ali ao lado ->
Comentários de divulgação sem nada sobre o post não serão retribuidos. Fale pelo menos um pouquinho sobre o post, por favor.
Faça aos outros aquilo que você quer que façam para você.