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

Passing single quote in URL as query string to a servlet while using HTTPS

Have you ever succeeded in passing single quote as the query string in the URL?
For eg:

https://example/login.do?param1=guest&param2=Jan'2012
(or)
https://example/login.do?param1=guest&param2=Jan%272012 

Most of the web server configuration doesn't allow single quote for preventing cross site script/SQL injection attacks.

How do I pass single quote If my parameter has one?
You need to escape the single quote as shown below

https://example/login.do?param1=guest&param2=Jan'2012

Does the above solutions work? Not absolutely as & is the parameter separator so only Jan will be considered as the value for param2. Both & and # are special characters and must be encoded to %26 and %23.

The correct encoding for the single quote is shown below

https://example/login.do?param1=guest&param2=Jan%26%2339;2012

How to design iPhone message bubble like conversation thread to blog comments

I am a big fan of iPhone message bubble conversation. I always thought of it and wanted to implement it in my blog comments. So I started writing this blog. Any one can make use of it to attract your blog viewers.

Here is the sample blogger comments thread

First we will see how we can replace the default comments conversation thread to more stylish way like iPhone SMS bubble.

Thanks to http://mobiforge.com as there is detailed explanation available for designing the SMS bubble as iPhone app.

I will explain the technique again here for your understanding. As you noticed in the iPhone SMS bubble, the width and height of the bubble varies depending on the message length. So obviously we can't have single image to for each comment message. Now we will have to break the bubble image to nine equal parts such as shown in the below image

Now we have nine small fragments of bubble image. How do we use it to make the bubble for the commented message. You can use <div> block to form the bubble. I always had trouble in aligning, padding the nested <div>. So I used <table> to form the bubble. <table> is quite easy to use.

We are going to use <table> with 3 rows and 3 columns. How do we make it to expand automatically based on the message length? If you notice closely all the 4 corners will be constant so you don't have to set variable width and height. Now we will look at the columns in the second row. First column and last column should have variable height so width is constant. Similarly the 2nd column in the 1st and 3rd row should be set with variable width and height is constant. Only cell with variable width & height should be the middle one.

Take a look at the below code snippet

<table cellpadding='0' cellspacing='0' width='400px'>

<tr><td style='width:56px; height:32px; background-image:url(bubble_top_left.png);'/>

<td style='height:32px; background-image:url(bubble_top_middle.png);'/>
<td style='width:56px; height:32px; background-image:url(bubble_top_right.png);'/>
</tr>

<tr><td style='width:56px; background-image:url(bubble_middle_left.png);'/>

<td style='background-image:url(bubble_middle_middle.png);' wrap='warp'><data:comment.body/></td><td style='width:56px; background-image:url(bubble_middle_right.png);'/>
</tr>

<tr><td style='width:56px; height:32px; background-image:url(bubble_bottom_left.png);'/>

<td style='height:32px; background-image:url(bubble_bottom_middle.png);'/>
<td style='width:56px; height:32px; background-image:url(bubble_bottom_right.png);'/></tr>

</table>

As you can see the second row cells doesn't have predefined height so the height will vary depending upon the message length. Similarly the second column cells doesn't have predefined width.

Now you need to insert this <table> into you blogger templates.
1. Go to 'Design' page
2. Click on 'Edit HTML'
3. Check the 'Expand widget templates'
4. Select All in the box below to 'Expand widget templates' and copy the content and save it to somewhere in your PC. If something messed up you can restore it from the saved copy. 

5.Search for <data:comment.body/> in the box. There are two entries
6. replace <data:comment.body/> with 

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

7. Save the template

Now you are ready. you can enter comments and see it in action here.
In the next blog we will see how we can differentiate the blog authors comments with green bubble image