So you’ve joined Twitter, the hip is still going great. Everyone updating their recent activities, you’re happy to see what they’re doing; they are happy to know you’re telling them too.

You decided it is time to place a Twitter update on your weblog, to show to the wilder audiences. You placed it nicely on the blog, ended up the loading takes forever, and your sidebar doesn’t shows up before the Twitter update list.

That is the disadvantage of placing Twitter update on a blog.

The last thing you need to consider before placing a Twitter update is the placement of the updates.

Say, you want to emphasize your Twitter status instead, so you place it on top. The updates load forever (Either Twitter is overload or down) and so is your content. You might miss a visitor.

I would prefer to place on the bottom footer. Let the content load first and slowing show the Twitter updates. However, if you insist the update to place at the sidebar, well, position it See a demo here

The cool thing about a webpage and its loading is, it load according to the code written, from top to bottom, in other word, YOU decide which to load.

#container {position: relative;}
#twitter-update {position: absolute;}

<div id=”container”>

<div id=”header”></div><!– END Header –>
<div id=”content”></div><!– END Content –>
<div id=”aside”></div><!– END Aside –>
<div id=”footer”>© Copyrighted 2010</div>

<div id=”twitter-update”>
<ul id=”twitter_update_list”>
<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/wongpk.json?callback=twitterCallback2&count=1″></script>
</ul>
</div>

</div><!– END Container –>

A cool thing about positioning in CSS is, the placement is all up to you. You can position:relative a container DIV and then place a position:absolute DIV on the bottom and still can have it place on top of the container.

With both cool stuffs together, you can literary place Twitter update anywhere on your blog yet able to load the content first.

Demo

P/S: This is very useful for those who having a slow connection