Como Colocar Balão Personalizado com o Número de Comentários do Lado do Título do Post - Versão #2

Já havia falado a respeito deste assunto no post "Como Colocar Balão Personalizado com o Número de Comentários do Lado do Título do Post" Mas, nesta postagem mostrarei outra forma de colocar o balão com o número de comentários no título de cada postagem. OK!

Siga-nos no twitter:

Seguir @DicashotBlogger

Recomende o DicasHot no Google:

No painel do Blogger, entre na aba “modelo” e em seguida, na edição HTML do seu template, dê um Ctrl + F e procure pela tag 

]]></b:skin>

ANTES dela o código a seguir

.numComments {

background: url(URL-DA-SUA-IMAGEM) no-repeat top right;

float:right;

text-align: center;

padding: 10px 0 0 0;

margin-top : -15px;

font-size: 150%;

width: 50px;

height:50px;

color: #fff;

}

.numComments a:link{

color: #fff;

}

.numComments a:visited{

color: #fff;

}

Novamente, dê um Ctrl + F e procure por

<b:if cond='data:post.title'>

ABAIXO dela, cole o código

<span class='numComments'>

<a expr:href='data:post.url'>

<data:post.numComments/></a></span>

Caso seu template não tenha as mesmas dimensões do código, você pode alterar nas partes:

float:right - Posição do elemento á direita
margin-top: -15px - Posicionamento da imagem ao topo
width: 50px - largura da imagem
height: 50px - altura da imagem
font-size: 150% - tamanho da fonte da numeração