- Home
- Tutoriais Blogger
- Balão com Número de Comentários ao Lado do Título
- Bordas arredondadas nas colunas
- Box Flutuante Assinar Feed via Email
- Centralizar o titulo do post no blog
- Código da Caixa de Seguidores do Twitter - Fan Box
- Código para Proteger seus artigos de cópias
- Artigos mais populares na sidebar
- Colocar Barra de Rolagem no blog
- Colocar o Pássaro do Twitter Voando no Blog
- Criando um menu horizontal
- Banner para seu blog com caixa HTML para o código
- Como instalar widget acima da coluna de postagens
- Programas
- Contactos
Balão com Número de Comentários ao Lado do Título
Para fazer essa alteração entre na pagina editar html, marque a opção expandir modelos de widgets e procure por: <class='post-title entry-title'> ou <b:includable id='post' var='post'>. Qual deles usar depende do modelo do seu template geralmente os templates novos usam a primeira opção.
Então logo depois coloque este código:
<span class='post-comment-link-arriba' style='background: url(https://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/s400/bubble.png) no-repeat top right; width:48px; height:48px; text-align:center; float:right;padding-top:8px'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a>
</b:if>
</span>
Agora vamos falar sobre os ajustes necessários e como >trocar a imagem do bolão nos comentários do blog, veja esse trecho do código:
style='background: url(https://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/s400/bubble.png) no-repeat top right; width:48px; height:48px; text-align:center; float:right; padding-top:8px'
Aqui está toda a formatação de texto e posicionamento da imagem, então vamos por partes:
Trocar a imagem de fundo (balão)
background: url(https://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/s400/bubble.png) no-repeat top right; width:48px; height:48px;
Isso é a imagem de fundo, então troque o endereço https://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/s400/bubble.png pela url de outra imagem que goste mais ou combine melhor com o seu template, você pode achar uma imagem no google, fazer um com um programa para edição de imagens ou achar icones prontos, depois hospede a imagem e coloque o endereço da imagem no código acima. (caso tenha duvidas leia: Imagem não aparece).
Os dois valores 48 é o tamanho da imagem, então deve fazer os ajustes com o tamanho da nova imagem que utilizar.
Posicionar corretamente o número de comentários dentro do balão
padding-top:8px esse é o espaço acima do numero, portanto altere esse valor até o numero de comentários ficarem na posição correta, lembre-se esse código muda a posição no sentido vertical (para cima e para baixo), na direção horizontal está centralizado automaticamente.
deixe como você quer e salve e depois visualize