iBlognet

Home Blogger Google

Customizing Read More and Comments Link in Blogger

by Editor

In blogger default template, the read more link is nothing but just a simple link to view the full post. Moreover the link to comment section can be either seen below the blog post title or in the post footer section stuffed with other items, which is quite not visible. This might look less attractive for a reader to read and comment on the article. In this post I will show you how to customize your read more link with number of comments and how to link directly to comment form section from your blogger homepage.


Step 1: Login to your blogger account. Goto Design > Edit HTML and tick on Expand Widget template. Now click on Download Full Template.

Step 2: Search for ]]></b:skin> and paste the following code just above it

.rmopi a {
color:#FFF;
background: #000;
float:right;
text-decoration: none;
font-family:Georgia;
font-size: 12px;
font-weight: bold;
text-align: center;
padding:2px 3px 2px 3px;
padding-left:10px;
padding-right:10px;
}
.rmopi a:hover {
color:#ffffff;
background: #7b7b7b;
text-decoration: none;
}

Step 3: Search for <data:post.body/> and add the following code just below it

<span class=’rmopi’><a expr:href=’data:post.url’>Read More</a></span>
<span class=’rmopi’><a class=’comment-link’ expr:href=’data:post.url + “#comment-form”‘ style=’margin-right:10px;’>Add Your Opinion</a></span>
<span class=’rmopi’><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’ style=’margin-right:10px;’><b:if cond=’data:post.numComments == 1′>1 Opinion<b:else/><data:post.numComments/> Opinions </b:if></a>
</b:if>
</b:if></span>

You can change the red color text to whatever you like…

Step 4: Preview your template. If everything goes fine, then save your template and view your blog. You can now see three buttons on your blogger homepage in the post footer; “No. of comments“, “Link to comment form” & “Read more link“.

Note: Whenever you make a post just insert the jump break between your post. If you pop up with any error during the changes, just shoot me back with the comment form below and upload the previous template again which you downloaded in the first step.

Article by »


Admin and Editor of iBlognet iBlognet has written 294 fantastic article(s) on iBlognet.


Author Connect »

Comments on this entry are closed.

Previous post:

Next post: