Making the COMMENTS Link more User Friendly.

The "0 comments" link at the bottom of the blog posts can hardly be called intuitive. Viewers fail to understand it's significance. That is why on this blog I have customized it to make it more viewer friendly.


If there are no comments on the post this is what appears "Be the first to leave a comment!". If only one visitor commented on the post viewers see "1 VIEWER CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT." If more than one visitor left a comment than you see "n VIEWERS CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT." where 'n' is the number of comments left.


This can be done by customizing the comments code.............

ENABLE COMMENTS

The first step is to enable comments in your Settings. There are three places where comments have to be enabled. Login at Blogger.com and click on Settings link on Dashboard. Follow all steps outlined in Tips on Blogger Comments to enable your comments.



This will make the comments show up on the Post Pages. On the Main Page comments are not shown since it would make the Main Page slower to load if there are many comments. If after enabling all comment settings they are still not seen then possibly your template code has been corrupted. To reset it first backup your widgets data and customization. Then login at Blogger.com and click Layout link on Dashboard. Click Edit Html subtab of Layouts tab. Scroll down to bottom of Template Code box and click on the "Revert Widget Templates to Default" link. This will lose any customization in widget templates which you can restore from the backup you had made first.

MODIFYING THE CODE

To modify the comments link code login at Blogger.com and click Layouts link on Dashboard. Click the Edit Html subtab of Layout tab. Click the 'Expand Widget Templates' checkbox on top right of the Template Code box. Wait for the page to refresh and scroll down to locate this code in the Blog Posts widget :

<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>

Copy and paste the code below instead of the above code :

<p style='font-size:90%'>What have you to say?</p>
<span class='post-comment-link'>
   <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 == 0'>
    <p style='font-size:90%'>Be the first to leave a comment!</p> 
 <b:else/> 
<b:if cond='data:post.numComments == 1'>
<p style='font-size:90%'>1 VIEWER CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT.</p>
<b:else/>
<p style='font-size:90%'><data:post.numComments/> VIEWERS CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT.</p>
</b:if>
</b:if></a>
          </b:if>
    </span>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<p style='font-size:90%'>Who has talked about this post?</p>
</b:if>

Preview and save the template. To increase the size of the letters increase '90%' in the code above.

You can see the modified comments link in action in this blog.

Enjoy!

EMail Link Below Your Posts.

You can put your email link below your posts but it will be picked up by spam bots and then your inbox will soon be full of thousands of spam mails. It will be better to follow this method of putting it.......

First you will have to create an image out of your email link. For this go to :

Email Generator

OR

http://services.nexodyne.com/email

Follow the steps to make an image out of your email and then download it to your PC. Create an account at a freehost like Googlepages and upload the image there. Copy down the link of the uploaded image.


Login to Blogger Dasbhoard. Click on layouts for the blog where you want to add the link. Click on Edit Html tab at the top. First backup the template by clicking on Download Full Template link. Then put a check in Expanded widgets Template box and scroll down in Edit Template text box till you come to this line in Blog Posts widget :

<p class='post-footer-line post-footer-line-1'>

Paste the line below just under the code above :

<img src="URL OF UPLOADED EMAIL IMAGE" alt="my email" />

Replace the CAPS with the link of your uploaded image. Preview and save Template.

CLICKABLE EMAIL LINK

To make a clickable image link paste this code instead at the same position :

<a href="mailto:xyz@gmail.com?subject=Hello%20again"><img src="URL OF UPLOADED EMAIL IMAGE" alt="my email" /></a>

Instead of xyz@gmail.com put your own address. This method carries the risk of the address being harvested by spam bots. Save Template. Now clicking on the image will open the Compose Mail window with the address already filled in and the subject title as Hello Again.

Technorati Tags:email, post footer, blogger hacks,

Create Add Your Comment Link.

At the bottom of each post there is a COMMENTS link which viewers have to click if they want to comment on your post. However for first time viewers this is not very intuitive so I thought of a way to change it to 'MAKE A COMMENT'.......

To do this go to Template----->Edit Html and first backup your template.


Then put a check in Expand Widgets Template check box and scroll down in Edit Template text box till you come to the Blog Posts widget. Here locate this piece of code


<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>


and change it to :


<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/> COMMENT ON THIS POST</b:if></a>
</b:if>
</b:if>
</span>


Save Template. Refresh Cache. View blog.

Technorati Tags:comments, post footer,

Customize the Post Footer.

The Post Footer contains many elements like the Posted by line, the timestamp, the labels, comments, backlinks and others which you can customize to your blog........

The primary customization canbe made by going to Template------->Page Elements------>Click the Edit link in Blog Posts section-------->In popup window choose which items you would like to appear in the post footer by putting a check on their names. See picture below (Click on picture to enlarge it)

CHANGE NAME OF AUTHOR

To change the name of the author you can go to Dashboard------->Edit Profile----->Identity------->Display Name-------->Change Name and Save. However if you want to show different names under the posts you can change it in the template. To do this go to Template------>Edit Html------>First backup template using Download Full Template link given on this page.-------->Then put a check in Expand Widgets Template text box and scroll down to locate this code in the Blog Posts widget :


<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

Delete <data:post.author/> in the fourth line and substitute your nickname. Preview and Save Template.

INSERT AUTHOR PICTURE IN POSTED BY LINE

Delete the same piece of code in the above example and insert this line :

<a href="URL OF BLOG"><img src="URL OF YOUR PICTURE" /></a>

Preview and save template.

APPEARANCE OF LABELS

To change the appearance of your labels go to Template----->Edit Html------->First backup template------>Add this code between <b:skin>![CDATA[ and </b:skin> tags in your template :


.Label {
color:#b4h6td;
background:#afafaf;
xxxxxxxxxxxxxx
}

Add other properties instead of line xxxxxxxxxx just as you do in normal CSS. The CSS in old blogger and the new blogger is the same except that it is enclosed in b:skin tags in case of the latter. Preview and save template.

CHANGE THE NAME "LABELS" BELOW YOUR POST

The Labels are indicated below your posts starting with the term "LABELS". If you wish to change this name to something else like "CATEGORIES" locate this piece of code by going to Template----->Edit Html----->Put Checkin Expand Widget Templates check box and -------->Scroll down in Edit Template text box till you come to :

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

Delete the line in red in above code and replace with whatever name you want like CATEGORIES for instance.

REPLACE THE NAME "LABELS" BELOW YOUR POST WITH AN IMAGE

First upload your image to a free host like Googlepages and obtain its URL/link. Then locate the code line in red in above code where it was replaced with the word CATEGORIES. Replace that line with this code:


<img src="URL OF IMAGE AT FREE HOST" alt="BLOG TITLE" />

Preview and Save.

CHANGE OLDER POSTS AND NEWER POSTS TEXT

To change the wording of these links go to Template---------->Edit Html------>Backup your Template-------->Put check in Expand Widgets Template box------->Scroll down in Edit Template text box till you come to this code :


<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link'
expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link'
expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>


CHANGE THIS CODE TO :


<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data: widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'>OPEN NEXT POST</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'>OPEN PREVIOUS POST</a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link'
expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link'
expr:href='data: blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Preview and save



You can also add a forward arrow image and a backward arrow image by adding this code in the same place above


<a href="URL OF BLOG"><img src="URL OF YOUR ARROW PICTURE" /></a>

For full details see Making Image Links.

DELETE THE OLDER POSTS AND NEWER POSTS LINK

To completely delete the Older Posts and Newer Posts links locate this line of code in the Blog Posts widget after putting a check in the Expand Widgets Template check-box :

<!-- navigation -->
<b:include name='nextprev'/>

Delete this code. Preview and Save.

ADD SUBSCRIBE TO COMMENTS (ATOM)

Below your posts is the link to subscribe to posts Atom feed. You can add a
Subscribe to: Post Comments (Atom) link. To do this go to Template----->Edit Html----->Put a check in box for Expand Widgets Templates and scroll down till you come to this code in the Blog widgets section :

<!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
xxxxxxxxxxxxxxxxxx
</div>


Add below code at line xxxxxxxxxxxx in above :

<a href='http://YOURBLOGNAME.blogspot.com/feeds/comments/TYPE'>Subscribe to: Post Comments (Atom)</a>

Change TYPE to summary or full and put actual blogname instead of YOURBLOGNAME. Save Template and you will see the link on individual post pages at the bottom.

CHANGE SUBSCRIBE TO POSTS (ATOM)

To change the line Subscribe to Posts (Atom) locate this code in the Blog Posts widget after putting a check in the Expand Widgets Template check-box :

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/>(<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>


CHANGE THIS TO :


<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> MY FEED LINKS</a>
</b:loop>
</div>
</b:includable>


Change MY FEED LINKS to whatever you want. Preview and save.

POSTED BY LINE BELOW POST TITLE

A blog reader wants to put the posted by line, usually found at the bottom of the post, above just under the Title of the post. To do this go to Template------>Edit Html------>First Backup Template. Then put a check in Expand Widgets Template check box and scroll down till you see this code in the post footer :


<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>


CUT the code and paste it in the same blog widget below this line :


<div class='post-body'>


Save and view blog.

Technorati Tags:post footer