Como por background sua blockquote




Há um bom tempo que eu não trago tutoriais,e hoje eu irei mostrar para vocês como deixar a blockquote com um background.Não sabe o que é uma blockquote ? Exemplo abaixo :


Isso é uma blockquote com background

Linda,não acha ? Agora vamos aprender a fazer ela ! Então,vamos começar? Ok,vamos.

Procure por:

                                                          
   ]]></b:skin

Acima coloque esse código e personalize do seu estilo :


blockquote { border: 1px dashed #000; background-image: url(Coloque aqui a url do seu background); padding: 10px; font-size: 11px; color: #000; text-align: justify; }




Visualize e se estiver tudo ok,salve.Pronto,sua blockquote está linda!

Só que não coloque background escuro demais porque a fonte da letra é preta e pode dificultar a leitura dos seus leitores.Abaixo tem alguns back's para vocês.Beijos e até amanhã!

Azulejo geométricas 02Padrão Labyrinth 02Padrão Sutil 01Retro Pattern 23Padrão Pixel 04Padrão Pixel 16 Pixel Padrão 09Pixel Padrão 01Flores Mini Padrão 01

50 comentários:

  1. Eu adoro blockquote, sempre uso.
    http://magic--teens.blogspot.com.br/

    ResponderExcluir
  2. Oba!Tutu muito útil vou personalizar agora!Beijos~~
    cotidianodeumabarbie.tk

    ResponderExcluir
  3. Linda mesmo ^^

    http://rebucomcafe.blogspot.com.br

    beijinhos

    ResponderExcluir
  4. Que incrível *--* Até pensei em colocar no meu, mais acho que ja ta mto enfeitado por la, quem sabe no próximo tema que eu fizer pra encomenda, to com dois pra fazer mesmo.

    Tem Sorteio do Livro Um homem de sorte la no meu blog, participe!
    http://pepperlipstick.blogspot.com.br/2012/06/sorteio-um-homem-de-sorte.html

    Beijos :*

    ResponderExcluir
  5. Amei o tutorial, a blockquote fica bem mais bonita assim (= Beijos! *-*

    http://dreamsofagirl-blog.blogspot.com/

    ResponderExcluir
  6. Já sabia, fica muito lindo!
    http://pinkpimenta.blogspot.com.br/

    ResponderExcluir
  7. Que legal o tutorial, adorei :D
    http://www.senhoritaliberdade.com/

    ResponderExcluir
  8. Eu não conhecia esse tutorial! Adorei o efeito, muito fofo!

    http://meninamoderna-blog.blogspot.com.br/

    ResponderExcluir
  9. Ai que lindooo! *-* Nossa, demorou anos pra eu saber como fazia isso, agora finalmente sei! Ebaaa! *-*

    Beijos, Milena.
    Livros na Cabeça

    ResponderExcluir
    Respostas
    1. Nossa,kkkk eu amei também e fico feliz em saber que te ajudou

      Excluir
  10. Fica mega fofo eu acho... ahah


    BEIJUXX
    http://ianapaulinhaaaa.blogspot.com.br/

    ResponderExcluir
  11. Vaai ter um concurso lá no blog valendo um colar I♥Rio, Se poder agradeceria muitdo, Participa ?
    http://candypictures-br.blogspot.com/2012/07/sorteio-irio.html

    ResponderExcluir
    Respostas
    1. Boa sorte para quem participar! (:

      Excluir
  12. Muito lindo seu blog perfeitooo!!
    www.portalft.com

    ResponderExcluir
  13. Ótimo tutorial, lindo seu blog flor. http://confissoesdeumablogueira.blogspot.com.br

    ResponderExcluir
  14. Poxa, no meu html não dá ): Meu modelo é pronto D:

    Flor, tá rolando sorteio de um anel lindo de caveiras lá no blog, se quiser participar é só passar lá ><

    Beijos! ♥
    http://www.deliriosdegarota.com/

    ResponderExcluir
    Respostas
    1. o meu também é assim,ainda bem que eu vou mudar é mt mt chato esses layouts prontos,são lindos,mas a maioria dos códigos falta :/ ne? BJUKU

      Excluir
    2. Pois é meninas,eu uso o base Travel que tem os códigos,antes eu usava os free mas com o tempo fui aprendendo a fazer os próprios layout,os free são lindos né,mas em compensação falta muito código!

      Excluir
  15. Gostei bastante das dicas

    Beijos
    @pocketlibro
    http://pocketlibro.blogspot.com.br

    ResponderExcluir
  16. Curti a dica! Assim que tiver com paciência vou colocar no meu... O Em Crise tá precisando de uns toques a mais... hehe Beijos! Em Crise

    ResponderExcluir
    Respostas
    1. hehe é sempre bom inovar!

      Excluir
  17. Oiii flor... adorei o tutorial... sigo siiim =D vc segue de volta?
    www.fashionemcores.com

    ResponderExcluir
  18. Eu não entendo nada de tutorial que triste :/
    tem que fraga muito viu. Parabens

    http://cherryacessorioseafins.blogspot.com.br
    Beijos

    ResponderExcluir
    Respostas
    1. No início eu não entendia nada,mas com o tempo eu aprendi a me virar sozinha,é muito chato não ter um layout exclusivo,dai eu fui aprendendo com o tempo e hoje eu sei o básico.

      Excluir
  19. Adorei,faz um tempo que eu estava procurando!
    wolftheideia.blogspot.com.br

    Tá rolando um jogo lá no blog! Não deixe de participar http://wolftheideia.blogspot.com.br/2012/07/jogo-desvendando-o-guarda-roupa.html

    ResponderExcluir
  20. Olá,adorei seu blog flor!!
    achei muito liindo...
    acabei de cria um cantinho pra mim tbm .
    convido vc e suas leitoras para me seguirem.
    vicio-demenina.blogspot.com.br

    seguindo ja :)
    big big beijokas

    ResponderExcluir
  21. Olá,adorei seu blog flor!!
    achei muito liindo...
    acabei de cria um cantinho pra mim tbm .
    convido vc e suas leitoras para me seguirem.
    vicio-demenina.blogspot.com.br

    seguindo ja :)
    big big beijokas

    ResponderExcluir
  22. adorei! *-*
    ótimo tutorial.

    Bjs

    http://cutekurafuto.blogspot.com.br/

    ~

    LOJA: http://lilysweetstore.mercadoshops.com.br/

    Siga no twitter! sigo de volta :) https://twitter.com/LilySweetStore

    ResponderExcluir
  23. Já uso esse tutorial no meu blog, e adooro, dá um efeito muito interessante *-*
    Amei a sua visita lá no meu blog, e como você pediu estou ajudando com a sua meta. :3 ajuda com a minha também?
    Espero você novamente em meu cantinho, beijão do Our Best Craze

    ResponderExcluir
    Respostas
    1. Obrigada por me ajudar na minha meta *-*

      Excluir
  24. Adorei o tutorial,ñ conhecia ainda mas pelo visto eu já #gamei no tutu,já salvei nos favoritos o tutu pq eu vou mudar o lay do meu blog. hehehehehe

    ResponderExcluir

Obrigada por comentar, seja sempre bem-vindo (a) ♥