Balão com Número de Comentários ao Lado do Título
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

Translate to English Translate to Spanish Translate to French Translate to German Google-Translate-Portuguese to Italian Translate to Russian Translate to Chinese Translate to Japanese

Rating: 2.2/5 (184 votos)

ONLINE
2









Total de visitas: 16393