Uma forma de conseguir mais comentários no seu blog pode ser mostrar o número de comentários dentro de um balão ou alguma outra imagem no inicio da postagem, ou seja, ao lado do título 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.
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/AVvXsEjd56vcCln-cXqRpGcqVExpNIu5RfHuR9X0ZdnY1ArtBPrx3w_11pc-RvYeO7cPM_e22tl-bKtPx_7uc7RC_9AdoAVtpoUZ_7lVPUNXVLVWSvxoPYmvRUQppSBb-rA_uZEFo8ecPHvSpRQ/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/AVvXsEjd56vcCln-cXqRpGcqVExpNIu5RfHuR9X0ZdnY1ArtBPrx3w_11pc-RvYeO7cPM_e22tl-bKtPx_7uc7RC_9AdoAVtpoUZ_7lVPUNXVLVWSvxoPYmvRUQppSBb-rA_uZEFo8ecPHvSpRQ/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(URL DA IMAGEM) no-repeat top right; width:48px; height:48px;
A frase em vermelho é onde você deve colocar o endereço da imagem que deseja exibir no canto superior da postagem(ao lado do título), 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.
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 número, portanto altere esse valor até o número 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 número que aparece dentro do balão podemos criar um estilo CSS com o nome post-comment-link-arriba e colocar no início do html do blog, junto com o trecho body.
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}
Esperamos que essas dicas sejam úteis para vocês leitores, Obrigado pela Visita!
Nenhum comentário:
Postar um comentário