Atualização: Gente, perdão! Eu errei um código e por isso vocês não estavam achando rsrsrs Já arrumei, então tentem de novo que agora tem que funcionar! :)
Gente, vocês não tem noção de como esse tutorial foi pedido desde que troquei o layout! Me surpreendi pelo fato de terem me pedido tanto, porque esse tutorial é bem conhecido e já visto em vários blogs. Mas tudo bem, já que pediram, vim aqui trazer!
É bem simples, entre no seu HTML e busque (Ctrl+F) por ]]></b:skin>
Acima dele coloque o código abaixo, substituindo a parte destacada pela url do seu modelo de balão.
.comment-bubble {
float: left; /* posicionamento a direita, pode mudar para right*/
width : 78px; /*largura da imagem do balão*/
height : 83px; /*atura da imagem do balão*/
background : url(http://migre.me/cXyq7) no-repeat;
font-size : 32px; /*tamanho da fonte do número de comentários*/
margin-top: -19px; /*margem em relação ao topo, ajuste o nº se precisar*/
margin-left: 10px; /*margem em relação ao lado esquerdo, ajuste o nº se precisar*/
padding: 3px; /* espaçamento interno*/
text-align : center; /*texto centralizado*/
}
Lembre-se que em margin-top números negativos sobem e positivos descem. Já em margin-left números positivos vão para a direita e negativos para a esquerda.
Visualize e se estiver tudo certo salve. PS: O balão ainda não vai aparecer.
Agora marque a caixinha "Expandir modelos de widget" e procure por :
Agora marque a caixinha "Expandir modelos de widget" e procure por :
<b:includable id='post' var='post'>
Abaixo dele coloque o seguinte código :
<b:if cond='data:post.allowComments'> <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if>Agora visualize, e se o balão tiver certinho, salve.
Balões (se usar credite):
Um ótimo tutorial >.< E é bem procurado mesmo.
ResponderExcluirBjs.
Amei,ja estou usando no meu blog ^^
ResponderExcluirbeijos, http://insanelikesky.blogspot.com
Adorei era esse que estava faltando para meu blog *--*
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirFicou ótimo...obrigada pela dica, abraços.
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirO último códico para ser colocado eu nao acho no meu html oq faco???
ResponderExcluirtbem não achei
Excluirtambem não achei.. (???)
Excluirtenta clicar em "expandir modelos de widget", pode estar lá :)
ExcluirTb já fiz isso, sempre quando eu nao acho eu clico em expandir mas nao ajudou... tem a ver com o template? O meu é de Viagem.
ExcluirNão achei . =cc
ExcluirSabe se dá para por no template Minima? Obrigada, eu adorei o tutorial! Muito criativo, amei mesmo <3
ResponderExcluirBeijos
too-kawaii
Ótimo tutorial *-*
ResponderExcluircr4zy-world.blogspot.com.br
lindo demais as imagens, nunca vi mais linda. bjs Danny Toledo
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluircaramba, é lindo, e seu novo layout é maravilhoso tbm!
ResponderExcluirvou tentar fazer esse tutorial, porque é lindo e magnífico!
amei!
Adolescente Nerd
Amei o tutu!
ResponderExcluirE os balões!
Vou pôr no meu blog!
Linda, hoje é aniver de 3 meses do P.A.S.!
Dá uma passadinha lá responde a enquete e comenta!
Temos lay novo!
Bjinhos Vick♥//Princesa de All Star
--> http://princesadeallstar-vick.blogspot.com.br/
ResponderExcluirE como faço para colocar a data nessa bolinha? bjus
ResponderExcluirjá fiz o tutorial, dá uma olhadinha na página Goodies :)
ExcluirAnny só não achei aquele codigo "h3" e não consegui colocar se puder me ajudar agradeço :))
ResponderExcluirOlá! Eu errei aquele código, já atualizei o post com o certo. Peço que tente de novo :)
ExcluirAmei o tuto do seu blog eu amo o Go Imagine S2
ResponderExcluirNossa,procurei feito louca por esse tuto,e encontrei aqui de uma forma tão simples.Testei e funcionou perfeitamente,vou usar um desses balões em meu próximo layout,e claro darei os créditos.Seguindo aqui,pode seguir o meu?
ResponderExcluirhttp://barbieseumundopink.blogspot.com.br/
Abraços!
Funciona em comentários dos disqus?
ResponderExcluirhttp://returningtodarkness.blogspot.com.br/
Não sei linda, mas não custa tentar né :)
ExcluirEu fui uma dos que pediram esse tutorial! Amei, muito mais simples que eu pensei. Dá até para trocar a imagem do balão por algo simples personalizado pela html, já que sou péssima editando imagens e nenhuma dessas combina com meu próximo lay. Beijos!
ResponderExcluir♥ blogthistime.blogspot.com
Isso ai linda, fica legal mesmo com css só! :)
ExcluirEste comentário foi removido pelo autor.
ResponderExcluirMinha amiga foi uma das que pediu ^-^
ResponderExcluirAdorei o tutorial , você poderia fazer um sobre como personalizar a caixinha de comentários ? ( não sei como chama )
Seguindo fofa :3 Beijos
site : isastrondisas.blogspot.com
Já postei o tutorial linda, olha lá nos goodies =)
ExcluirAdorei amiga, sou péssima em HTML, tive muito trabalho para montar meu blog, mas não possui esses detalhes que vc ensinou, talvez me arrisque... Beijokinhas
ResponderExcluirhttp://carlafabieene.blogspot.com.br/
Adorei o tuto, próximo layout vou fazer.
ResponderExcluirTe indiquei num meme de incentivo a leitura, espero que gostem.
guriavintagee.blogspot.com
Estava louca por esse tuto! Eu já conhecia o tutorial, mas não estava conseguindo colocar abaixo da data da postagem que nem aqui no seu blog, vou tentar fazer, vai ajudar muito *--*
ResponderExcluirBeijoos, Dedessa Carvalho <3
http://lovellysummer.blogspot.com.br/
Ai que legal (:
ResponderExcluirVou tentar fazer quando mudar o layout !!!
Adorei seu cantinho (:
Estou seguindo voce flor, se puder retribuir ficarei super feliz !!!
Bom final de semana florzinha !
De uma passadinha no blog, tem post novinho !
www.lacodemetal.blogspot.com
Com amor, thamy ;*
Acheii muito legal!!Mais não consigo fazer :(
ResponderExcluirBeijos!!
Sigo seu blog segui o meu:
http://perfectgirlever1.blogspot.com.br/
Não consegui fazer :/ O balão de comentários não aparece (só o número de comentários). Além disso, eu queria colocar o balão abaixo da data da postagem (que nem no seu blog), mas não consegui de maneira alguma, já mexi no código e nada :( Você pode ajudar?
ResponderExcluirBeijoos, Dedessa Carvalho <3
http://lovellysummer.blogspot.com.br/
também não consegui
Excluirpode me ajudar?
simples-garotaa.blogspot.com
Também estou tendo o mesmo problema ;//
ExcluirOlá Anny! Tudo bem? Bom eu AMEI esse tutorial quando eu li, TIPO, MESMO. Eu até coloquei no meu blog (OBS.: Eu ainda tô editando), mas eu gostaria de saber sobre outra coisa. Bom, como você colocou o título do gadget do seu blog assim? Eu queria saber como é... Ficaria muito agradecida!
ResponderExcluirBjos & Queijos,
Nanda.
Fica lindo, já está no meu próximo layout (:
ResponderExcluirSeus tutoriais são um máximo ^^
beijos ;*
- Wordland
Hey Anny! Também estava louca pelo tutorial #ConfissõesDaAnna. As datas atuais da blogosfera andam bem comuns e desde de que vi aqueles layouts mais profissa, fiquei afim de por no blog. Testei agorinha mesmo e deu certo, só não vou colocar já porque em breve vou trocar o lay e esse estilo *na minha humilde opinião* fica melhor em designs mais clean e menos enfeitadinhos demais como o atual do WC.
ResponderExcluirP.S: Cê já começou a fazer a seleção das imagens para o 8 on 8? Pode parecer que demora mas o mês passou tão rápido que dia oito também nem deve demorar a chegar :B
Um beijo,
@annolivers || World Cutest
Ainda não linda, mas pode deixar que eu vou separar as fotos haha Na verdade eu ainda quero tirar algumas :p
ExcluirBeijos linda!
ameeei demais,
ResponderExcluirviste meu blog, sou nova na area ,
http://chuvas-de-pesamentos.blogspot.com.br/
Amo esse tutorial, usava no velho layout do meu blog e acho que realmente dá aquela carinha de "detalhes fazem a diferença", rsrs. Amo o blog, e o conteúdo também sempre ótimo (;
ResponderExcluirBom, vim aqui também para falar que seu blog foi um dos escolhidos para ajudar a divulgar a "Campanha de Incentivo à Leitura", uma campanha super legal, que está mobilizando vários blogs, com o intuito de estimular os nossos leitores a ler livros, se quiser ajudar é só visitar o seguinte link lá no blog para saber mais informações de como particicar. Obrigada desde já. Segue o link abaixo:
http://closettaberto.blogspot.com.br/2013/01/campanha-incentivo-literario.html
Beijos, Camila.
www.closettaberto.blogspot.com
@blogcloseta
Já conhecia o tutorial. Já usei também, e recomendo pra quem não usa. Fica perfeito *-*
ResponderExcluirO blog é lindo, continue assim (:
Seguindo ^^
beijos ;*
- Worldland
Linda estou usando no meu blog
ResponderExcluirhttp:blogdapaulinhacss.blospot.com
Amei!! Mas uso um Template Free, que já vem com um balão...
ResponderExcluirnossasfeminicesoficial.blogspot.com
Ah Anny, obrigada pelo tutorial! Já estava procurando por ele a um bom tempo (:
ResponderExcluirEstou fazendo o novo layout do meu blog e com toda certeza vou usá-lo nele.
Beijos *-*
http://cenariumfashion.blogspot.com.br/
Este comentário foi removido pelo autor.
ResponderExcluirolá Anny, estou apaixona pelo seu blog, ele é muito fofo *--*. estava vendo em algumas postagens aqui do seu blog, que você entende bastante quando o assunto é layouts, editar html, essas coisinhas de blog,a séculos que venho procurando algum template ou layout que se encaixe ao perfil do meu blog, daí pensei o seguinte , você poderia fazer um layout para meu blog? ele é bem simples,simples mesmo, mas ta faltando esse toque, pra ele ficar mais bonito e arrumado.por favor Anny, caso você possa fazer deixa a resposta lá no meu blog, mesmo que seja não ta ok. vou lhe agradecer muito se você puder fazer este favor pra mim. beijos *-*
ResponderExcluirhttp://acerejarosa.blogspot.com.br/
Oi linda, atualmente só faço layouts pagos, por encomenda :)
ExcluirMuito bom o post, gostei. O seu blog é lindo ou também adorei.
ResponderExcluirEstou seguindo aqui. Você se importa de seguir o meu também?
Siga se gostar (nao vai gostar T.T) coloquei ja seu blog na minha barra de favoritos *--*
Beijos
sentierodellerose1.blogspot.com
Otimo tutorial ! :)
ResponderExcluirBeijos,
http://www.paaradateen.com
Adorei o tuto ,fácil e fica lindo de qualquer jeito... adorei as imagens foi você quem fez?? Um abração..
ResponderExcluircaindoonareal.blogspot.com.br/
Anny vooç poderia deixar seu seu e-mail num comentario sabe eu to terminando o meu blog (sou nova nesse ramo) e tenho muitas duvidas que queria perguntar´ para vooç*--*
ResponderExcluirE se não quiser não tem problema :D
Oi amor eu amo demais teu blog, estou sempre acessando, queria saber qual é o teu template? é free ou é pago? porque como eu vejo nos tutorias tu ensinando a fazer varias coisa, caixa de pesquise, cabeçalho em toda tela muitos outros mas toda vez que tento fazer eu não consigo parece q não entra mas dai em qual template tu testa essas coisa pq eu não consigo é o de viagem só queria saber o tipo daí eu mudo no meu e consigo fazer os tuos teus! Muita obrigada amor, espero que responda! Beijooos
ResponderExcluirOi amore, eu que faço meus templates, e uso o modelo travel azul (que tem bordinhas em cima), e sempre funciona aqui.
ExcluirSe eu conseguir vou usar um dos balões ok?
ResponderExcluirComo faz pra mudar a cor do número??
ResponderExcluirOi!!
ResponderExcluirJá sigo o seu Blog, você pode seguir o meu também?
Beijocas
http://nomundodajujuba.blogspot.com.br/
Lindos!
ResponderExcluirhttps://www.facebook.com/MaryMundiMix
www.marymundimix.blogspot.com
Awn amei o tutorial...
ResponderExcluirhttp://kawaii-little-things.blogspot.com.br
Já tive um balão no meu blog, mas era diferente. Mas acabou dando um erro depois.
ResponderExcluirSeguindo!! Passa no meu blog se quiser:
http://hora-de-celebrar.blogspot.com.br/
Que perfeeeeito esse blog, amei o post, saber como tornar o blog mais atrativo é sempre bom *--*
ResponderExcluirSeguindo...
--xoxo--
myuniverse2012.blogspot.com
oie !eu não sei muito bem esse negocio de medida sabe... vc pode me passar o seu ?? com as informações ja certinhas?? beijokas
ResponderExcluirConseguii!To usando o balãozinho de imaginação roxo!!Bjoos amo seus tutos
ResponderExcluirEuu ainda nun consegui coloquei o Url do balão que eu queria mais não apareceu. :(
ResponderExcluirmais vou tentando hehe.
Meu Blog: http://soumeninatimida.blogspot.com.br/
Se eu conseguir vou usar um dos baloes ta? beijo! amo seu blog
ResponderExcluirPorque no meu blog o balão fica dentro da area das postagens não fora??
ResponderExcluiré porque o meu é do modelo simples???
tem que mexer no margin-left :)
ExcluirEu ameeii,mais tentei mil vezes e não consigui!!:(
ResponderExcluirnao consegui :(
ResponderExcluirBê eu conseguii ficou lindo,séra que você ensina a colocar essa bola,circulo com a data dentro?
ResponderExcluirE como nós mesmas criar nosso desenhinho desse?
seu cabeçalho foi feito por você mesma?foi pelo Inkscape?
Aceita afiliação?
responde lá no blog por favor:
simples-garotaa.blogspot.com
Eu peguei ^^ , fazendo-discipulos.blogspot.com
ResponderExcluirParabéns.
ResponderExcluirAdore o tutorial *-*
Bem fácil de entender, tava lutando para alterar, cheguei aqui e consegui de primeira *-*
Beijos flor.
Oi, eu queria saber como tira depois os comentarios do rodape e deixa só os do balão?
ResponderExcluirAnny, muito obrigada mesmo, eu peguei seus códigos , para fazer meu novo post, pode deixar que vou credita,
ResponderExcluirBeijos
http://gotutos.blogspot.com.br
Não importa o quanto eu leia sobre html nos outros blogs, teu blog me encanta! Você explica de forma muito simples e aqui tem um visual limpinho *-* Só tenho que te dizer MUITO OBRIGADA por gostar de fazer isso e por fazer tão bem! Beijo
ResponderExcluirAdorei o tutorial!
ResponderExcluirConsegui colocar lá no blog! ^^
BjO
http://www.the-sook.blogspot.com.br/
O meu balao so fica atras da area de postagem, e nao vem para frente
ResponderExcluirComo arrumar?
cupcakeofchocolate.blogspot.com.br
O html e o > editar html
ResponderExcluirOiii obrigada pelo tuto, adoreiii, estou aproveitando bem os tutoriais que você colocou aqui.... parabnessss!!!! Bjsss
ResponderExcluirwww.almanaquechic.blogspot.com
Seus tutoriais são ótimos :3
ResponderExcluirestou te seguindo, dá uma olhadinha no meu :3
Fica lindo. :)
ResponderExcluirhttp://ancorasdayanca.blogspot.com.br/
foi ótimo!!!!!!!
ResponderExcluirhttp://agnesvata.blogspot.com.br/
Adorei me ajudou muito Bjos...
ResponderExcluirPeguei todos <3'
ResponderExcluirusei também! ótimo
ResponderExcluirNo meu o número fica fora da img, por que ? já alterei as margens tudo que podia e nada muda de lugar só o balão !
ResponderExcluirme ajudou muito , estou usando
ResponderExcluirhttp://cutecoreia.blogspot.jp/
Não deu certo no meu =/
ResponderExcluirUsei o tuto e um balão no meu novo layout. Obrigada <3
ResponderExcluirwww.amoraoprimeirorimel.com
Ficou do lado esquerdo :( retirei...
ResponderExcluirAdorei o tutorial! Mas o meu blog não tem esse body e tals kkkkk então não consegui :(
ResponderExcluirBom, mas como eu achei divo os balões eu peguei para usar em cabecalhos! É isso bjo lindo blog :3
feminicesadolescentes.blogspot.com
Oi,
ResponderExcluirAmei o tutorial, irei usar !
Faz um post de como colocar a data dentro de um balão ao lado do título do post. O seu layout é muito perfeiro, parabéns.
ResponderExcluirAmeeeeeeeeei o seu blog! Seguindo com certezaaa! Bjãaao, sucesso pra ti!!!
ResponderExcluirLife Style
Não consegui achar :(
ResponderExcluirAlana querida, muito obrigada, usei no meu novo template, deu super certo. Deus te abençoe.
ResponderExcluirNão funciona no meu =[
ResponderExcluirO meu da tudo certo mais quando chega no final quando vo salva na segunda parte sempre aparece erro oque eu faço ??
ResponderExcluirAwwnt muito obrigada flor! Consegui botar, espero que você continue com esse seu talento de ser uma blogueira! XOXO
ResponderExcluirNão consigo,faço o passo a passo e não vai,o que acontece ?
ResponderExcluirO meu funcionou só que ao invés de ficar no final das postagem como imaginei que ficaria,ele ficou ao lado do titulo das postagem...Isso é normal ou fiz algo errado?
ResponderExcluirwww.piimentaarosa.blogspot.com
Muda o número que fica na tag: margin-left ou margin-top ;)
Excluircolocar qual numero mais ou menos?
ExcluirAmeeei, queria colocar no meu mas o meu blog eu acho que ta com problema, não consigo ver os comentários... :( Seguindo gata amei o blog!!!
ResponderExcluirLife Style
Os meus comentarios tambem não estão aparecendo, voce ja resolveu o problema ?
Excluiraonde fica a caixinha Expandir modelos de widget???? urgenteee
ResponderExcluirNão tem, só procurar pelo código mesmo ;)
ExcluirOlá sempre uso esse seu código, mas se quiser colocar esse mesmo balão no final da postagem tem jeito° beijoo
ResponderExcluirOlá sempre uso esse seu código, mas se quiser colocar no footer da postagem, tem como? bjo
ResponderExcluirAmei seu blog! Visita o meu? Viver de Leitura
ResponderExcluirOii linda, amei o tutorial. Usei um no meu blog, obrigada!! Bjss
ResponderExcluirNão estou conseguindo, salvo e da certo mais na hora de aparecer não aparece.. Amei o seu Blog
ResponderExcluiro balao de comentario esta no topo da postagem do lado do titulo oque eu faço ????
ResponderExcluirNo meu fica em cima o balão, como faço para deixa-lo no final do post?
ResponderExcluirO meu balão não aparece, só aparece o numero de comentarios. O que pode ser? :(
ResponderExcluir