Show Commentators Profile Pic In Blogger
Using this simple and easy hack,you can enable your blogger template to display the picture of who is commenting under your post.This is a cool tweak and many bloggers will be wanting to use it.So here are the simple steps:
1.Login to your Blogger Dashboard--->Layout--->Edit HTML and click on Expand Widget Templates.
2.Now search for </head> code in your template and the paste the following code just before </head>
<script src=’‘http://www.thetricks.net/blogger/blogger_comment_photos.js“ type=’text/javascript’/>
<script type=’text/javascript’>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>
<script type=’text/javascript’>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>
3.Now find below code in your template:
<dl id=’comments-block’>
<b:loop values=’data:post.comments’ var=’comment’>
<dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’>
<a expr:name=’”comment-” + data:comment.id’/>
<b:if cond=’data:comment.authorUrl’>
<a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
<b:else/>
<b:loop values=’data:post.comments’ var=’comment’>
<dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’>
<a expr:name=’”comment-” + data:comment.id’/>
<b:if cond=’data:comment.authorUrl’>
<a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
<b:else/>
Add <div class=’commentphoto’ style=’float:left;’/> just after <dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’>
You can also change the float from left to right according to your choice.
4.Now find the code given below:
<dd class=’comment-footer’>
<span class=’comment-timestamp’>
<a expr:href=’”#comment-” + data:comment.id’ title=’comment permalink’>
<data:comment.timestamp/>
</a>
<b:include data=’comment’ name=’commentDeleteIcon’/>
</span>
</dd>
</b:loop>
</dl>
<span class=’comment-timestamp’>
<a expr:href=’”#comment-” + data:comment.id’ title=’comment permalink’>
<data:comment.timestamp/>
</a>
<b:include data=’comment’ name=’commentDeleteIcon’/>
</span>
</dd>
</b:loop>
</dl>
Add <div style=’clear:both;’/> just after the code given in red,i.e., </dd>
Now click save template and you are done.
Spl. Thanx to TheTricks.net
Tags: Blogger Tricks, Tutorials For Dummies
Previous Article
Subscribe to:
Post Comments (Atom)
Share your views...
1 Respones to "Show Commentators Profile Pic In Blogger"
its good.
April 19, 2011 at 5:55 AM
Post a Comment
You need not to login for making a comment.So please do comment about this post/trick.