Author: Andrew
| Date: September 16, 2009
|
| Tags:
blogger,
blogging,
html,
JavaScript,
twitter,
web,
widget
(this is just a screenshot, see a live demo link at the end of the post)
1. The CSS (if you use Blogger, you need to place this before the ]]></b:skin> tag in your template / for other platforms, place this code inside your main .css file):
#twitter_div_ws {font-family:Arial, Helvetica, sans-serif; font-size: 13px; border: 1px solid #CCCCCC; padding: 5px; width:300px; background-color:#FFF; margin: 0 auto;}
ul#twitter_update_list_ws {padding:0; margin:0; list-style: none; display:block;}
ul#twitter_update_list_ws li {list-style: none; min-height:50px; border-top: 1px solid #CCCCCC; padding:5px 0px;}
ul#twitter_update_list_ws li span {font-style: italic; display: block;}
ul#twitter_update_list_ws .timeago {display:inline-block;}
ul#twitter_update_list_ws .timeago a {font-size:10px; color: #999999; text-decoration: none;}
#twitter_div_ws b a {font-weight: bold; text-decoration: none; text-transform:uppercase}
#twitter_info_ws {border-bottom: 5px solid #CCCCCC; padding-bottom:10px;font-size: 10px;}
#twitter_info_ws b {font-size: 15px; line-height:30px;}
#twitter_info_ws img {padding: 0 5px 0 0; width: 50px; border:0px;}
