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.
In the next blog we will see how we can differentiate the blog authors comments with green bubble image

Why this kolaveri da? Strong message to all men

Why this kolaveri kolaveri kolaveri da
Why this kolaveri kolaveri kolaveri da

Once we're married hell is life-u
Life-u total out-u
Out-u 0ut-u you say out-u
We stand here hurt-u

Why this kolaveri kolaveri kolaveri da

Dawn-u come-u, we go work-u
You sit there smoke-u
Money come-you take spend-u
How do I feed the kids-u

You say love love o my love I showed u bou-u
But love love here's cow-u
It gives back more than you-u
Now u tell me who is right-u
Are u happy now-u ?
This song is for all girls-u..we have the choice-u

Why this kolaveri kolaveri kolaveri da

Hand-le knife-u
Knife-le blood-u
Girl-u future out-u

Parents pressure
Even culture
We see the bigger picture

My heart heart-u now is break
It is because of you-u
Break break what a break-u
My pail is full of tear-u

I have gave in so much love-u,
You still complain how-u?
You will never understand our plight-u
What am I to do -u


Why this kolaveri kolaveri kolaveri da





To listen this song: http://www.youtube.com/watch?feature=player_embedded&v=U1d3dKGb3Eg
<br>

Facebook Timeline: 8 things to know

Social networking site Facebook's latest service Timeline has been globally rolled out. The company said Timeline had so far been available only to a few people, but now it had made it available to everybody. Timeline was announced by Facebook CEO Mark Zuckerberg at the f8 conference in September. Here's all you need to know about Facebook Timeline. 

What is Timeline? 

Timeline allows users to compile and let others see everything they have shared so far, from photos, stories to shared videos and music. Some of the things a user can do on Timeline are: edit his basic info, jump to the past, view his activity log, check highlights from each month, star stories he wants to highlight, add life events, update his status, view and add photos and share his app activity. 

How it is different from your current profile 

Presently, only latest pictures or posts of users are visible, while large part of the previous posts are hidden. The only way to retrieve them is to scroll down and click on "More Stories". Timeline on the other hand retains a user's older posts, photos etc and also groups them datewise making it easy and convenient for viewing. 

Activating Timeline 

To get Timeline, a user needs to simply go to the Introducing Timeline page and click on 'Get It Now'. Or he can wait till he receives an announcement at the top of his profile. 

How it works 

Once a user upgrades to Timeline, he will get seven days to review everything that appears on his Timeline before anyone else can see it. You can also choose to publish your Timeline at any time during the review period. If a user decides to wait, his timeline will automatically go live after seven days. 

His new Timeline will replace his profile, however, all his stories and photos will remain there. Users, who want to see how their Timeline would appear to other people, can click on the 'gear menu' at the top of their Timeline, and select "View As." This shows them how their timeline will appear to a specific friend or public. 

Friends List 

For those who always keep their Friends List private, Timeline is a curse as it prominently displays just how 'popular' you are on Facebook and who all are connected with you. There is no apparent way to turn it off, unlike earlier settings. This may be a major put-off for those who do not want to share their Friends List with all and sundry for various reasons. 

Life out in the open 

Timeline puts your life out in the open like never before. Unlike the earlier single webpage design where older content - shares, status updates, notes, likes, comments, photos and notes - kept getting buried under labyrinths of time, Timeline's scrapbook interface has now given an excellent tool to people to determine others' Facebook. 

This may not be such a great news for those not keen on sharing each and everything from their life with everyone. So before rushing to publish your Timeline, it is advisable to spend hours and hours reviewing what content you don't want to share, and delete or remove from Timeline. You get a week before Timeline will automatically go live on December 23, even if you decide not to publish. 


Activity Log 

Activity Log is a place where users can review all their posts and activity, from today back to when they first started using Facebook. Only users will be able to see their activity log. 

A user will be able to see two dropdown menus next to each story in their activity log. The first is to see and adjust the privacy of a post. The second one is to allow a user to decide if he actually wants a post to appear on his timeline. Users can feature, hide or delete any of their posts. 

As for how to find a certain story, post or photo, all a user needs to do is click the "All" dropdown at the top of his activity log and select what he is looking for. 

Timeline on my mobile 

Apart from making Timeline available on Web, Facebook has also launched Timeline on Android and m.facebook.com. 

Mobile Timeline starts with a user's unique cover photo. As a user scrolls down, he will see his posts, photos and life events as they happened. 

Photo albums and other posts are horizontally swipeable, so that one can view multiple photos or posts inline without leaving timeline. A user can also swipe through the views at the top of his timeline to navigate to your map, photos, subscribers and more.