Personalizar blockquote do blog

|
Oi Cerejas! Hoje vou ensinar vocês a usar o blockquote do blogger.
Blockquote é tipo uma caixinha que você põe nos textos para destacar alguma citação.
Veja um exemplo:

Oi, eu sou um blockquote :)

Hoje vamos aprender como por isso no seu blog! É bem simples, basta fazer tudo certinho.
Abra seu blog, clique em Design > Editar HTML.
Aperte Ctrl+F e na caixa de pesquisa coloque:  ]]></b:skin>
Cole acima de ]]></b:skin> , o seguinte código:


.post blockquote {
background:url(LINK DA IMAGEM DE FUNDO AQUI) ; /*Altere o fundo como preferir*/
border:2px dashed #2b2a59; /*Altere a cor da borda como preferir*/
padding: 5px;
margin:10px 20px 10px 20px;
}


Agora é só alterar conforme quiser. Substitua LINK DA IMAGEM DE FUNDO AQUI pelo link da imagem que vc quer por no fundo do blockquote.

Se quiser colocar apenas cor de fundo, substitua url(LINK DA IMAGEM DE FUNDO AQUI) por: #código da cor.
Mude também a cor da borda se quiser, é só alterar o código da cor. Pra aumentar a espessura da borda é só modificar 2px pelo valor que quiser.
Depois de modificar tudo, salve! ^^

Quando quiser usar o blockquote nos posts , é só clicar naquele botão com aspas:
image
Espero que tenham gostado! Kissus.

67 comentários

  1. Hey meninas, tdu bem?

    Eu queria fazer um pedido. Tem como vocês fazerem um tutorial de como mudar o cursor no blogger?

    Obrigada.

    Beijos :*

    ResponderExcluir
    Respostas
    1. Este comentário foi removido pelo autor.

      Excluir
    2. Ai amei amiga !! No meu blog ficou super lindo *-* visita ? marrylins.blogspot.com

      Excluir
    3. Já foi feito esse tutorial. Se voce olhar na aba "Godies" voce irá encontrar.
      Bjs,linda!

      Excluir
  2. Amei esse tuto! vou fazer agora mesmo! beijos
    http://thegossipfame.blogspot.com

    ResponderExcluir
  3. Nossa super interessante, concerteza irei fazer o mesmo!! Amei o tutorial, sempre queria destacar alguma coisa...
    XOXO,
    bonequinhadeluxo10.blogspot.com

    ResponderExcluir
  4. Muito legal isso, eu já fiz uma vez mas tirei sem querer a agora consegui graças a vocês ^^ beijos obrigada.

    ResponderExcluir
  5. Adorei!
    Funciona muito bem,

    Beijinhos =*
    www.fanaticospornoticia.tk

    ResponderExcluir
  6. O cursor do blog chama favicom e e muiito facil editar.
    Amei o tutorial um capricho *--*

    ResponderExcluir
    Respostas
    1. Nãão amor! O favicon é aquela imagem que fica ao lado do nome de seu blog, vc também pode editá-lo, de uma maneira beeem fácil.
      Já o cursor é a setinha que você mexe para clicar, e etc. Vc pode mudar a do seu pc, ou simplesmentee a do seu blog, e a liah já ensinou!!
      beijos e desculpa o incomodo viu??

      Excluir
  7. Ameei o tuto vou fazer agora no blogger.

    ResponderExcluir
  8. ameei muito o tuto \oo consegui ficou bem fofo *-*

    ResponderExcluir
  9. ameei muito o tuto \oo consegui ficou bem fofo *-*

    ResponderExcluir
  10. Como eu coloco mais de um blockquote no mesmo post? alguem me ajuda? '-'
    brigadinha. :*

    ResponderExcluir
  11.  Liah, no meu blog não funciona, só fica o blockquote em branco. mas fiz tudo certinho!
    É por causa do layout?

    ResponderExcluir
  12. Acho dificil ser por causa do layout, pq ele funciona em todos. Talvez o link da imagem esteja quebrado, tente usar só cor como plano de fundo pra ver se funciona.

    Ad áliaSá, adalia-sa@hotmail.comBlog: http://cherry-liah.blogspot.comTwitter: @HeyLiah




    Subject: [cherryliah] Re: http://cherry-liah.blogspot.com/2011/02/personalizar-blockquote-do-blog.html

    ResponderExcluir
  13. quero  ser afiliada tah?
    bj
    http://a-vida-no-ballet.blogspot.com/

    ResponderExcluir
  14. que fácil isso né  ? E eu achando que ia me complicar toda D; 
    Awwn , amei o tuto Liah ;* 

    ResponderExcluir
  15. Estranho, todo tutorial que envonve o dá errado, eu colo certinho, mas saí errado. Não sei se a culpa é minha que estou fazendo errado ou pela quantidade de tutoriais que utilizam ele que estou usando. Ótimo tutorial! :)

    ResponderExcluir
  16. text-decoration: #FFFFFF; q *_*

    ResponderExcluir
  17. hum, não sei o que pode estar dando errado...  Mas  vc conseguiu colocar esse?

    ResponderExcluir
  18. Não mas no meu blog teste só consegui fazer apenas um tutorial com o <*/b:skin>, acho que é pela quantidade que eu uso mesmo.

    ResponderExcluir
  19. Liah, não sei o que houve, mas não deu certo no meu blog :/ Mas o tutorial tá muito bom, bem explicado e pá, acho que o problema é meu blog mesmo. O que eu faço?

    ResponderExcluir
  20. Não funcionou linda, eu peguei outro código em outro blog, mais simples, mas esse funcionou. Mas obrigada mesmo assim. 

    ResponderExcluir
  21. Usei no meu blog. Dá uma olhada? http://baggirl-bg.blogspot.com/ 

    ResponderExcluir
  22. Usei no meu blog, dá uma olhada?

    http://nut-tv.blogspot.com/

    ResponderExcluir
  23. Deu super certinho ! :D

    ResponderExcluir
  24. Não deu certo Liah, coloquei tudo certinho - mais infelizmente não deu );
    O blockquote fica invisivel ....

    ResponderExcluir
  25. liah nunca da certo o que estou fazendo de errado?

    ResponderExcluir
  26. Hiper-util, o meu blokquote é hover, mas, assim também fica muuuuito cute *-*
    Beijos.

    Blog Da Vic ♥

    ResponderExcluir
  27. Não deu certo,
    coloquei tudo certinho
    mais infelizmente não deu
    O blockquote fica invisível.
    Ótima semana pra você!
    Beijos!
    http://neiabenevides11.blogspot.com/

    ResponderExcluir
  28. Ameeei!
    Só deu um pequeno probleminha,não fica retinho :'(
    Mas ok né U.U
    http://bolodemorango.blogspot.com.br/

    ResponderExcluir
  29. O meu nunca funciona!Quer dizer,no meu blog (especificamente o official biacmenezes.blogspot.com.br) não funciona!!!No outro sim mas neste não.Buááááá

    ResponderExcluir
  30. Please,me diga o q estah acontecendo.Tds os tutos que envolvem blockquote dão errado!o blockquote fica invisivel buaaa!Eu precisava dele.
    biacmenezes.blogspot.com.br

    ResponderExcluir
  31. Uau super show seu tutorial de Blockquote (^-^)' ajudou bastante, mas edite o tutorial ok ;) há um erro é que você diz que temos que colar o código logo em cima de ]]> sendo que, temos que colar o código em "/* Posts" enfim, ajudou muito, e espero que este meu comentário também possa ajudar pessoas que estão com essa dificuldade. Arigatoo...

    by: Gruung Bloo
    http://ophera-phantom.blogspot.com.br/
    Visite-me, abri recentimente!

    Sucesso... (^-^)

    ResponderExcluir
  32. Adoreeei esse *-*
    Muito boooom ;]

    photoscapeforme.blogspot.com

    ResponderExcluir
  33. Estava mt precisando desse tuto ! Obg pela dica ! ^^
    Bjs, Stardolleiras

    ResponderExcluir
  34. no meu naum deu certo, fica invisivel. =(

    ResponderExcluir
  35. No meu blog, coloquei um cursor diferente, e, quando eu coloco esse efeito, volta a ser a setinha branca e o outro cursor some.

    http://spectrasdiary.blogspot.com.br/

    ResponderExcluir
  36. Oiii *-*

    Amei demais seu blog , simplesmente lindo , sou uma blogueira novata e estava procurando toturiais para poder fazer um layout para meu blog , e praticamente consegui fazer tudo direitinho graças a seus toturiais (incluindo este)e gostei muito do resultado :D

    (Creditei tudo claro)

    Já agora eu tenho um problem :/
    Há uns tempos estava vendo um toturial aqui para personalizar o gadgets , usei e ficou muito cute , ficou com a parte de cima achatada e por baixo arredondada.
    Mas agora eu queria por como estava antes e não consigo tirar ele , já tentei mudar modelos mas aquilo fico mesmo no gadget.

    Podia ajudar-me por favor?
    Dá uma olhadinha aí perfectometixa.blogspot.com , e veja se me pode ajudar por favor , eu não consigo tirar aquilo mesmo!

    Beijinhos

    ResponderExcluir
  37. Já disse que amo esse blog!? Pois então, AMOOOOOOOOOOOOOOOOOOO <3 Amei o tuto :D

    ResponderExcluir
  38. Ótimo tuto! Créditos eternos lá no meu blog OIEPOWQIE-
    Kisses

    space-sweet-girl.blogspot.com.br

    ResponderExcluir
  39. Liah vc sabe q te plagiaram nesse post ? vê : http://blog-curiosidadesteen.blogspot.com.br/2012/06/personalizar-blockquote-do-blog.html ! kiss ! http://she-dream-with-paradise.blogspot.com.br/

    ResponderExcluir
  40. Oi Liah!! Adorei o tuto. Vc poderia fazer um de como mostrar as fotos do instagram q nem tem no seu blog! Obg

    ResponderExcluir
  41. Não funcionou!!!!!
    sanduichedeassunto|blogspot

    ResponderExcluir
  42. Já faz um tempo que visito o Cherry Bomb e já usei alguns tutoriais, você uma diva. E mais uma vez usei outro tutorial daqui, modifiquei um pouco mas o resultado ficou divo.
    Beijos linda
    Meu blog: http://themidnightdesign.blogspot.com

    ResponderExcluir
  43. otimo! testei no meu blog!

    http://gibiseciagratis.blogspot.com

    ResponderExcluir
  44. Muito bom! eu queria fazer um pedido,queria saber como personalizar o gadget ''Assuntos'' tipo o teu assim,e na pagina de goodies também,queria saber como fazer aquilo,Obrigado (; Adoro seu blog.

    ResponderExcluir
  45. Pessoal, vocês podem usar este código: .post blockquote{ margin:10px auto; padding:10px; border-radius:10px; text-align:justify; /*Alinhamento do texto*/ background:#696969; /*Cor de fundo*/ border:#ccc 2px solid; /*Cor e estilo da borda*/ é só colar antes/acima da tag: ]]>
    é muito mais fácil^^!

    ResponderExcluir
  46. Eu usei ta? Mas eu coloquei os créditos ^^

    Meu blog: http://joaneta-chan.blogspot.com.br/

    ResponderExcluir
  47. Obrigado pela ajuda ^^
    http://confissoesdumaotaku.blogspot.com.br/

    ResponderExcluir
  48. usando e creditando!
    recantodafadaalice.blogspot.com.br/

    ResponderExcluir
  49. Adorei Liah, adoro essas coisas, mas infelizmente o meu blog não é do tema Travel... Eu não sei mexer no modelo Travel, não sei tirar aquele sombreado que fica quase no blog inteiro, acho feio então...

    ResponderExcluir
  50. Adorei o Post Liah,Foi Muito Util,Obrigadinho,e..Beijinhos
    Continue Assim..Adoro O Cherry <33

    ResponderExcluir
  51. Consegui, adorei o post, obrigada!
    http://leticiakoliveira.blogspot.com.br/

    ResponderExcluir
  52. Oiee, adorei o tutorial mas quando fui na minha área de html não tinha o ]]> . E agora? Como eu faço???
    Beijos

    ResponderExcluir