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:

Lilly disse...

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 :*

Yasmin Meira - [GAROTA DESCOLADA] disse...

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

Thaís *-* disse...

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

Kαrolıпε Soαrεs≀^~^= disse...

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

Gab disse...

Adorei!
Funciona muito bem,

Beijinhos =*
www.fanaticospornoticia.tk

Ana Freire disse...

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

Luanna disse...

Ameei o tuto vou fazer agora no blogger.

Renata Maia disse...

Tava precisando mesmo!

Amaanda disse...

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

Amaanda disse...

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

Rafaela. disse...

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

Biih Barbonii disse...

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

Cherry Liah disse...

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

Amanda Bailarina disse...

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

SGabrielle disse...

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

MariKnowles disse...

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! :)

MariKnowles disse...

text-decoration: #FFFFFF; q *_*

Cherry Liah disse...

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

Mari disse...

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.

Isa Moraes disse...

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?

Isa Moraes disse...

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

1GiuliaFerreira1 disse...

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

Luamar Lopes Soares disse...

Amei, usando♥

Giuliaf Ferreira disse...

Usei no meu blog, dá uma olhada?

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

Mari Lautner disse...

Não deu certo ;/

V Cabral disse...

não deu certo

Geronda disse...

Não deu certo!

lauramolan disse...

Deu super certinho ! :D

Sarah Ninsi disse...

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

Vic disse...

liah nunca da certo o que estou fazendo de errado?

Edja Clarelis disse...

Deu certinho *-*

Vic disse...

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

Blog Da Vic ♥

Dulcinéa Benevides disse...

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/

Laura Ribeiro ♥ disse...

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

B. Menezes disse...

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ááááá

B. Menezes disse...

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

Unknown disse...

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... (^-^)

Unknown disse...

Adoreeei esse *-*
Muito boooom ;]

photoscapeforme.blogspot.com

Bárbara S. disse...

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

Luiz Gustavo disse...

no meu naum deu certo, fica invisivel. =(

Laura disse...

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/

Anônimo disse...

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

Unknown disse...

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

Bárbara Ximenes disse...

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

space-sweet-girl.blogspot.com.br

Anônimo disse...

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/

Anônimo disse...

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

Unknown disse...

Não funcionou!!!!!
sanduichedeassunto|blogspot

Filha de Poseidon disse...

Obrigada! Amei o tuto

Arielle B. disse...

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

tarcisio disse...

otimo! testei no meu blog!

http://gibiseciagratis.blogspot.com

Anônimo disse...

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.

Anônimo disse...

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??

Anônimo disse...

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^^!

Geysa Gabriela disse...
Este comentário foi removido pelo autor.
Geysa Gabriela disse...

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

Thaís Hentges disse...

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

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

Unknown disse...

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

Unknown disse...

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

Isabella Twifan disse...

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

Anônimo disse...

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...

Anônimo disse...

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

Unknown disse...

*-* adorei

Unknown disse...

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

Bárbara Bittencourt disse...

Muito bom seu tutorial

Bárbara Bittencourt disse...

Mais não funcionou

LauraGuimarães disse...

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

Mel Vilaca disse...

ameei

Postar um comentário