Highlight author comments with different message bubble

In the previous post design iPhone message bubble for blog comments we saw that how to apply iPhone message bubble style to blogger comments.

In this post we will see how to highlight blog author comments with different message bubble.
So the comments will look like iPhone message conversation.

You will have to modify your blogger template with the instructions specified in the previous blog. After you modified the blogger template follow the instructions specified below

Find the <table> you added in the blogger template (as specified in the previous post) Remove the table and substitute the code specified below

<b:if cond="data:comment.authorUrl == &quot;http://www.blogger.com/profile/08569645696448253520&quot;">
     <b:if cond="data:comment.authorUrl">
                <a expr:href="data:comment.authorUrl" href="" rel="nofollow"><data:comment.author></data:comment.author></a>
              <b:else>
                <data:comment.author>
              </data:comment.author></b:else></b:if>
    


<table cellpadding="0" cellspacing="0">    <tbody>
<tr><td style="background-image: url(https://lh3.googleusercontent.com/-RcrAGXPGSjE/Ts7lJ4JRruI/AAAAAAAAABY/ZaYi1BRSu_0/s56/bubble_top_left.png); height: 32px; width: 56px;"> </td><td style="background-image: url(https://lh6.googleusercontent.com/-ZwWXX3P-vUg/Ts7lJ2yAI8I/AAAAAAAAABc/Mdd-Uiy4olA/s56/bubble_top_middle.png); height: 32px;"></td>
<td style="background-image: url(https://lh4.googleusercontent.com/-0NSf1RslR6c/Ts7lKEPNfaI/AAAAAAAAABo/o_1YK3Y_5zw/s57/bubble_top_right.png); height: 32px; width: 56px;"></td></tr>
<tr><td style="background-image: url(https://lh5.googleusercontent.com/-GU5bSMBRDNo/Ts7lJZv94ZI/AAAAAAAAAA8/LdPEjREJkyw/s56/bubble_middle_left.png); width: 56px;"> </td><td style="background-image: url(https://lh5.googleusercontent.com/-KgQ0jU1WQ4A/Ts7lJUS9skI/AAAAAAAAABI/svbYZ3a2lTw/s56/bubble_middle_middle.png);" wrap="warp"><data:comment.body></data:comment.body></td><td style="background-image: url(https://lh3.googleusercontent.com/-RPwBKw9jF8w/Ts7lJnoq4oI/AAAAAAAAABM/etbVbo3r-iM/s57/bubble_middle_right.png); width: 56px;"></td></tr>
<tr><td style="background-image: url(https://lh3.googleusercontent.com/-w2D4yRBrSS4/Ts7lJF-sDfI/AAAAAAAAAA4/UAKWLfF9kJ4/s56/bubble_bottom_left.png); height: 32px; width: 56px;"> </td><td style="background-image: url(https://lh6.googleusercontent.com/-oZ1LxdOddnU/Ts7lJN5ztwI/AAAAAAAAAA0/GMy9QfifgKw/s56/bubble_bottom_middle.png); height: 32px;"></td><td style="background-image: url(https://lh3.googleusercontent.com/-BXGRM2Gl7Io/Ts7lJbZ_nuI/AAAAAAAAAB0/Q8wBwuZwD4Q/s57/bubble_bottom_right.png); height: 32px; width: 56px;"></td></tr>
</tbody></table>
<b:else>

    <b:if cond="data:comment.authorUrl">

     <a expr:href="data:comment.authorUrl" href="" rel="nofollow"><data:comment.author></data:comment.author></a>

      <b:else>

     <data:comment.author>

      </data:comment.author></b:else></b:if>

     


<table cellpadding="0" cellspacing="0">     <tbody>
<tr><td style="background-image: url(https://lh6.googleusercontent.com/-FEwOZf9o30U/Ts8EHgcoj6I/AAAAAAAAAEI/r4Tl0USUUl0/s56/bb_blue_top_left.png); height: 32px; width: 56px;"> </td><td style="background-image: url(https://lh6.googleusercontent.com/-Xi1FPPxKgqo/Ts75xHq7qoI/AAAAAAAAAC0/0K4U5uIEneY/s56/bb_blue_top_middle.png); height: 32px;"></td><td style="background-image: url(https://lh5.googleusercontent.com/-okz7H6vdtjU/Ts75xBcSSqI/AAAAAAAAAC4/4QXH8aEsywY/s56/bb_blue_top_right.png); height: 32px; width: 56px;"></td></tr>
<tr><td style="background-image: url(https://lh5.googleusercontent.com/-XwFB8TfpX6M/Ts75wj585aI/AAAAAAAAACo/VYnsy3kONnk/s56/bb_blue_middle_left.png); width: 56px;"> </td><td style="background-image: url(https://lh6.googleusercontent.com/-nvWbOPNfkiE/Ts75wuKNQrI/AAAAAAAAACY/trJdIiEEPXw/s56/bb_blue_middle_middle.png);" wrap="warp"><data:comment.body></data:comment.body></td><td style="background-image: url(https://lh5.googleusercontent.com/-kyXraoB2znA/Ts8ECJvJMlI/AAAAAAAAAEA/P1lO2pCX5XY/s56/bb_blue_middle_right.png); width: 56px;"></td></tr>
<tr><td style="background-image: url(https://lh6.googleusercontent.com/-f1hn-G_IA8I/Ts75wUL2VXI/AAAAAAAAACQ/DI4SYsDEnz4/s56/bb_blue_bottom_left.png); height: 32px; width: 56px;"> </td><td style="background-image: url(https://lh6.googleusercontent.com/-pxWP575tr8k/Ts8E3I7uBSI/AAAAAAAAAEY/WqKr13MxWEw/s56/bb_blue_bottom_middle.png); height: 32px;"></td><td style="background-image: url(https://lh3.googleusercontent.com/-XTJEaJHWbyM/Ts75wZ_LOlI/AAAAAAAAACM/FqPu7tdk_Gk/s56/bb_blue_bottom_right.png); height: 32px; width: 56px;"></td></tr>
</tbody></table>
</b:else></b:if>

You need to replace the blogger profile id(highlighted above) with your profile id.

See it in action here