Add Photo in Blogger comment post Blogger Hack

Now you can Add Photo on side of Comment Box this will make a nice looking Professonel Blog. ,And any anonymous comment poster should not work but it can be replaced with default image. This hack’s written for new template (.xml) only,To put this hack on action Follow Below Steps.

• Go to “Template” >> Click “Edit HTML” menu. Tick “Expand Template Widget” option. See some codes below and locate the normal font, if you’ve found it then insert code with bold (RED) font style between other codes which are normal.

<dl id='comments-block'>
      <b:loop values='data:post.comments' var='comment'>
        <dt class='comment-author' expr:id='"comment-"   data:comment.id'>
<div class='commentphoto' style='float:right;'/>
          <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/>
            <data:comment.author/>
          </b:if>
          <data:commentPostedByMsg/>
        </dt>
        <dd class='comment-body'>
          <b:if cond='data:comment.isDeleted'>
            <span class='deleted-comment'><data:comment.body/></span>
          <b:else/>
            <p><data:comment.body/></p>
          </b:if>
        </dd>
        <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>
<div style='clear:both;'/>
      </b:loop>
    </dl>

Code float:right; it means we’ll place photo in the right side. You’ll need to change it if you want to. Such this one, float:left;

• Next Step>>Still in the “Edit HTML” page, copy-paste code above tag </html> (you’ll need to locate it first, Use Ctrl +F To Find </html>.)

<script src='http://yggomelprup.googlepages.com/blogger_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.noimage = 'http://scrapur.com/index/wp-content/uploads/2008/03/blogger.gif';
BloggerProfiles.imageWidth = 10;
BloggerProfiles.imageHeight = 20;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

• Code>>BloggerProfiles.noimage='http://scrapur.com/index/wp-content/uploads/2008/03/blogger.gif';

Used as default photo which is replaced for any comment posters which are not in logged in status.
BloggerProfiles.imageWidth = 30;
BloggerProfiles.imageHeight = 30;

Used for controlling photo%u2019s size. You may change those settings.

Print this post

Related Posts by Categories

Widget by Scrapur | Scrap Book