Balão com Número de Comentários ao Lado do Título da Postagem
Uma forma de conseguir mais comentários no seu blog pode ser mostrar o numero de comentários dentro de um balão ou alguma outra imagem no inicio da postagem, ou seja, ao lado do titulo de cada post do blog. Isso pode ser uma maneira de incentivar os visitantes a deixarem seu comentário ou pelo menos ler o que os outros já falaram sobre aquele assunto.
Leia também:
Como ter Mais Comentários, Mais Visitas
Ganhar Tempo e Conseguir mais Visitas no Blog
Trabalhe Melhor - Organize-se e Ganhe Tempo
Link do Tutorial da imagem - Paginas extras para o Blogspot
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwXOUV2gBLVUDbTAKVXWTkR4n7S-fGncNiam8-BfK1LtS_qnfUrrl_VB4HEV4_9URHjnbih98NxS7u53hGRACEYuXf6NFA18OAS6b4u0Xdc_4ZNhdFyUGND42CQO8Hz7Zg1XDvbZ7XF8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwXOUV2gBLVUDbTAKVXWTkR4n7S-fGncNiam8-BfK1LtS_qnfUrrl_VB4HEV4_9URHjnbih98NxS7u53hGRACEYuXf6NFA18OAS6b4u0Xdc_4ZNhdFyUGND42CQO8Hz7Zg1XDvbZ7XF8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwXOUV2gBLVUDbTAKVXWTkR4n7S-fGncNiam8-BfK1LtS_qnfUrrl_VB4HEV4_9URHjnbih98NxS7u53hGRACEYuXf6NFA18OAS6b4u0Xdc_4ZNhdFyUGND42CQO8Hz7Zg1XDvbZ7XF8/s400/bubble.png) no-repeat top right; width:48px; height:48px;
Isso é a imagem de fundo, então troque o endereço https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwXOUV2gBLVUDbTAKVXWTkR4n7S-fGncNiam8-BfK1LtS_qnfUrrl_VB4HEV4_9URHjnbih98NxS7u53hGRACEYuXf6NFA18OAS6b4u0Xdc_4ZNhdFyUGND42CQO8Hz7Zg1XDvbZ7XF8/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.
Formatação do Numero de comentários (texto)
Para formatar o texto, ou seja, o numero que aparece dentro do balão podemos criar um estilo CSS com o nome post-comment-link-arriba e colocar no inicio do html do blog, junto com o trecho body. Veja Onde colocar os códigos no blog.
Então coloque esses estilos CSS para formatar os links:
.post-comment-link-arriba a{color:#fff;font-size:18pt}
.post-comment-link-arriba a:hover{color:#ff0;text-decoration: underline overline}
Veja aqui como Alterar cores dos links - CSS e também outras opções de formatação de texto
Fizemos esse tutorial depois de receber um cometário falando sobre o assunto, pois em meio a tantos assuntos que já tratamos aqui no Dicas para Blogs esse de colocar o numero de comentários ao lado do titulo do post ainda não tinha sido mostrado. Esperamos que gostem deste tutorial e seja útil para outros blogueiros também.
Leia também:
Como ter Mais Comentários, Mais Visitas
Ganhar Tempo e Conseguir mais Visitas no Blog
Trabalhe Melhor - Organize-se e Ganhe Tempo
Link do Tutorial da imagem - Paginas extras para o Blogspot
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwXOUV2gBLVUDbTAKVXWTkR4n7S-fGncNiam8-BfK1LtS_qnfUrrl_VB4HEV4_9URHjnbih98NxS7u53hGRACEYuXf6NFA18OAS6b4u0Xdc_4ZNhdFyUGND42CQO8Hz7Zg1XDvbZ7XF8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwXOUV2gBLVUDbTAKVXWTkR4n7S-fGncNiam8-BfK1LtS_qnfUrrl_VB4HEV4_9URHjnbih98NxS7u53hGRACEYuXf6NFA18OAS6b4u0Xdc_4ZNhdFyUGND42CQO8Hz7Zg1XDvbZ7XF8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwXOUV2gBLVUDbTAKVXWTkR4n7S-fGncNiam8-BfK1LtS_qnfUrrl_VB4HEV4_9URHjnbih98NxS7u53hGRACEYuXf6NFA18OAS6b4u0Xdc_4ZNhdFyUGND42CQO8Hz7Zg1XDvbZ7XF8/s400/bubble.png) no-repeat top right; width:48px; height:48px;
Isso é a imagem de fundo, então troque o endereço https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwXOUV2gBLVUDbTAKVXWTkR4n7S-fGncNiam8-BfK1LtS_qnfUrrl_VB4HEV4_9URHjnbih98NxS7u53hGRACEYuXf6NFA18OAS6b4u0Xdc_4ZNhdFyUGND42CQO8Hz7Zg1XDvbZ7XF8/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.
Formatação do Numero de comentários (texto)
Para formatar o texto, ou seja, o numero que aparece dentro do balão podemos criar um estilo CSS com o nome post-comment-link-arriba e colocar no inicio do html do blog, junto com o trecho body. Veja Onde colocar os códigos no blog.
Então coloque esses estilos CSS para formatar os links:
.post-comment-link-arriba a{color:#fff;font-size:18pt}
.post-comment-link-arriba a:hover{color:#ff0;text-decoration: underline overline}
Veja aqui como Alterar cores dos links - CSS e também outras opções de formatação de texto
Fizemos esse tutorial depois de receber um cometário falando sobre o assunto, pois em meio a tantos assuntos que já tratamos aqui no Dicas para Blogs esse de colocar o numero de comentários ao lado do titulo do post ainda não tinha sido mostrado. Esperamos que gostem deste tutorial e seja útil para outros blogueiros também.
Marcadores: Códigos, Configurações Avançadas, Mais visitas, Scripts