Páginas

quarta-feira, 3 de maio de 2017

Número de Comentários ao Lado do Título da Postagem

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(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPwmFI35kCDcQiiCY5yl039uobOPo_oOnt1MkDwT4GCFOTCvMm7WiPlk9dKjGrlzahIyH3KaJDXHSNwMrwx64pJ-Rp7udiSTuRGVB_u5eLXjdXeGA-vkcbPExQcttDKJf0Yt3a7DAkJPI/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(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPwmFI35kCDcQiiCY5yl039uobOPo_oOnt1MkDwT4GCFOTCvMm7WiPlk9dKjGrlzahIyH3KaJDXHSNwMrwx64pJ-Rp7udiSTuRGVB_u5eLXjdXeGA-vkcbPExQcttDKJf0Yt3a7DAkJPI/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(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPwmFI35kCDcQiiCY5yl039uobOPo_oOnt1MkDwT4GCFOTCvMm7WiPlk9dKjGrlzahIyH3KaJDXHSNwMrwx64pJ-Rp7udiSTuRGVB_u5eLXjdXeGA-vkcbPExQcttDKJf0Yt3a7DAkJPI/s400/bubble.png) no-repeat top right; width:48px; height:48px; 
Isso é a imagem de fundo, então troque o endereço http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPwmFI35kCDcQiiCY5yl039uobOPo_oOnt1MkDwT4GCFOTCvMm7WiPlk9dKjGrlzahIyH3KaJDXHSNwMrwx64pJ-Rp7udiSTuRGVB_u5eLXjdXeGA-vkcbPExQcttDKJf0Yt3a7DAkJPI/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. 

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. 

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} 

Nenhum comentário:

Postar um comentário