Manual on how to decorate the link comments on Blogger.

The liaison publication of comments is the element that has a greater visual appeal and on which generally seeks to draw attention, more than anything to get more comments. This is about customize the link publication of comments to encourage users to your blog click on it and leave your opinion that I got from zona cerebral which has main purpose to remove the text of the link and maintain only the number of comments to put it on a background

HTML

The first thing you must do is identify the location where you want to show the link, through the section of blog posts in the edit panel of page elements on Blogger. Once this is done, it is necessary to make changes to the HTML code for inclusion in the first line of post (under the title) or in any of the three zones into which divides the footer of the entry ( post-footer), following the instructions in this tutorial to personalize your recent posts on Blogger.

In this case, the block of code that must be transported from one place to another is as follows:


<span class=’post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>
<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 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
<!– backlinks –>
<span class=’post-backlinks post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>
<b:if cond=’data:post.showBacklinks’>
<a class=’comment-link’ expr:href=’data:post.url + “#links”‘><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

As you can see in the preview of your own template, the link will consist of remarks by the number of comments published in the inning, followed by the text that you have entered into the section of blog posts panel editing page elements . For example: 0 Comments, 0 Opinions, animals 0, 0 Reflections unusual… or any other formula. You know that the limit is your imagination.

However, sometimes you might want to remove the text of the link and maintain only the number of comments to put it on a background image. To achieve this alone should be deleted values "<data:top.commentLabel/>" and "<data:top.commentLabelPlural/>" code block earlier identified in the following picture:

So the resulting code would be:

<span class=’post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>
<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>
</b:if>
</span>
<!– backlinks –>
<span class=’post-backlinks post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>
<b:if cond=’data:post.showBacklinks’>
<a class=’comment-link’ expr:href=’data:post.url + “#links”‘><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

CSS

The class of CSS code for the link comments, is one that takes its name. "Comment-link", so there is where you have to add different attributes relating to the format of the element, such as wallpaper, font, size , Margins, borders, etc.. Keep in mind that the comments link is a link, so they look like normal link or by passing the mouse over, classes will be determined by the CSS code specific to the text links: "" ": Hover", "a: visited."

Here is an example of customization in which the text was deleted and the link has been added a background image, used in the template for Blogger Blue Blog:


.comment-link {
font: 400 11px/22px “Georgia”, Times New Roman, Times, serif;
background: url(http://img207.imageshack.us/img207/8013/commenttg3.png) no-repeat top left;
height: 30px;
width: 57px;
text-align: center;
float: right;
margin: 5px 0 0 0;
color: #2e98a5;
}