Tutorial: 5 estilos de blockquote



Bem, hoje eu trouxe 5 estilos de blockquote divos para vocês personalizarem seus layouts. Como não fui eu quem os fiz, em baixo de cada imagem está seu devido crédito. Mas como eu adoro um hover, personalizei algumas coisinhas em alguns códigos. Vamos ver?

Isso é um blockquote!

Vá até modelo>> Editar HTML >> prosseguir. Dê crtl+F e procure por }]]></b:skin>.
Agora cole cole acima disso o código do blockoquote desejado, personalizando como preferir.

Estilo 1

Créditos: Kawaii World
blockquote {
border-right: 7px solid #f99db3;
border-left: 7px solid #f99db3;
background-color: #f5f2f3;
padding: 10px;
font-size: 11px;
color: #777777;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
-webkit-transition-duration: .50s;
}
blockquote:hover {
border-right: 11px solid #be55fb;
border-left: 11px solid #be55fb;
background-color: #f5f2f3;
padding: 10px;
font-size: 11px;
color: #777777;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
-webkit-transition-duration: .50s;
}
::-moz-selection {background:  #ecb8cc;
color: #3c3c3c;
}
::selection { background:  #ecb8cc;
color: #3c3c3c;
}


Estilo 2

Créditos: Kawaii World
blockquote {
border: 3px solid #fafcfd;
background-color: #fbf0ff;
padding: 10px;
font-size: 11px;
color: #a48ead;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: inset 0 0 12px #ecebeb, 0 0 5px #d7bce2;
}


Estilo 3

Créditos: Extras Place Fame
blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/
}


Estilo 4

Créditos: Aulas de HTML
blockquote {
background: #f5f5f5;
border: 1px solid #00688B;
color: #00688B;
font-family: century gothic;
font-weight: normal;
font-size: 11px;
text-align: right;
padding: 7px;
border-radius: 25px;
}
blockquote:hover {
border: 2px solid #000000;
}


Estilo 5 

Créditos: Aulas de HTML
.post blockquote {
background: #efefef url(http://static.tumblr.com/oiizew6/xBQly7u8f/aspas.png) no-repeat left top; /* Backgrounds */border-bottom: 2px solid #AB82FF; /* Estilo da borda */padding: 10px; /* Espaço da esquerda */font-size: 13px; /* Tamanho da fonte */color: #696969; /* Cor da fonte */text-align: justify; /* Alinhamento do texto */-moz-border-radius: 10px; /* Bordas arredondadas */-webkit-border-radius: 10px;
border-radius: 10px;
padding-left: 40px; /* Margem interna da esquerda */padding-bottom: 12px; /* Margem interna da parte da borda */padding-right: 15px; /* Margem interna da direita */padding-top: 10px; /* Margem interna da parte de cima */}

Bem, é isso! Espero que gostem e seja útil!
Malikisses Xx  - 

19 comentários:

  1. Adorei esse blockquote, usarei um no proximo lay!

    paradise-of-glass.blogspot.com
    :*

    ResponderExcluir
  2. certo, e como eu faço para o meu texto aparecer dentro do blockquote??

    ResponderExcluir
  3. adorei os blockquote!
    beeeeijos :3

    Gotas de fofura

    ResponderExcluir
  4. Lindos blockquotes! Adorei <3
    Beijos!

    myacidblackcherry.blogspot.com

    ResponderExcluir
  5. Posso afirmar que o estilo 1 e o 2, foram feitos por mim, do Kawaii World.

    http://www.kawaii-world.net/2012/08/modelos-para-blockquote.html

    ResponderExcluir
    Respostas
    1. Provavelmente a Polly pegou em um blog que não deve ter te creditado, sem saber.
      Já atualizei o post, desculpa. :3

      Excluir
    2. Awn, tudo bem c: E obrigada ~

      Excluir
    3. Desculpa Kaorii, eu creditei o blog do qual eu peguei, assim como a Ingrid disse. Mas ela já arrumou! (:

      Excluir
  6. Lindoo!! Bem o que eu estava procurando!! rubylcfanfics. blogspot.com

    ResponderExcluir
  7. OMG' Que lindoos! *---*

    Super fácil, gostei de todos mais principalmente do ultimo. ♥

    ResponderExcluir
  8. Muito lindos mais já uso um amei *____*

    californiadreams2.blogspot.com.br

    ResponderExcluir
  9. São lindos os estilos, amei o último! ^-^
    Bjos...

    - SammySacional -
    - Dando Uma de Escritora -

    ResponderExcluir
  10. Liindos. *o*

    detalhesdaamooda.blogspot.com

    ResponderExcluir
  11. Que lindoo, eu amei o primeiro acho que vou usar no próximo lay, combina muito bem com o tema! Todos são super lindos e fofos!

    Cliquesnocapricho.blogspot.com xoxo <3

    ResponderExcluir
  12. Todos lindos, o que eu mais gostei foi o modelo 1, uso um parecido rs.
    Beijos,
    Adolescentes do oposto (blog no perfil)

    ResponderExcluir
  13. Usei um! *3*.

    blog-the-memories.blogspot.com

    ResponderExcluir
  14. Aiwn floor tava procurando esses estilos brigada,e visita meu blog sou nova aqui
    ~clique no meu nome para ver o blog Sr.Mamacita~

    ResponderExcluir
  15. Usei o primeiro modelo, é o que achei mais bonitinho ♥
    #May-Sun

    layrakauana.blogspot.com.br/

    ResponderExcluir

Obrigada pelo seu comentário, sua opinião é muito importante!
Se seu perfil for trancado, não se esqueça de deixar o link do seu blog ou pelo menos o nome, para que eu possa retribuir. ♥

« » +