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