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 == "http://www.blogger.com/profile/08569645696448253520""> <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