如何使你的Twitter的更新一独特的网站
2008年5月16日由chriscoyier · 6评论 
Twitter的API，它提供了一个可用于从叽叽喳喳拉你自己的使用信息。 即使是容易，他们提供了一个JavaScript小部件可自动利用您最近的鸣叫这个API并返回简单的HTML。
让我们为我们设计Twitter的利用这个小工具的更新独特的网站。
1。 在Photoshop设计
创建一个新文件，并填写了暗灰色的背景。 我用＃222222这里。
选择一个浅灰色的前景颜色（＃545454）。 创建你的背景层之上的一个新层。 选择渐变工具（分的油漆桶工具，工具）。 在顶部栏会有一些设置专为渐变工具。 确保他们被设置为“前景色到透明”和“径向”。
在新的层，拖出一个梯度。 做一个新层，这是最好的，因为这样你可以将它拖到附近的只是如何让你喜欢。
现在，谷歌周围，并设法找到一个很好的Twitter的蓝鸟。 下面是我从iStockphoto的购买。您可以购买到的东西，或浏览符合您网站的性格。
现在添加鸟，一些文本，并举行一个框的鸣叫。 我使用的字体有议程黑色。 箱子只是填补蓝色（＃0081e2）在18％不透明度和2px白色中风设置为“覆盖”的混合模式。
现在，整个事情的出口为Web和设备（文件“>保存），称其为”网页bg.jpg“。 现在，我们准备建立网站！
2。 创建基本网页
创建一个基本的HTML文件的结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Twitter Page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> </body> </html> 和基本的CSS文件。 我们将使用我们的图像作为背景图像创建的身体，坚持到左上角。
/* Twitter Page Chris Coyier http://css-tricks.com */ * { margin: 0; padding: 0; } body { font-size: 62.5%; font-family: Georgia, serif; background: url(images/page-bg.jpg) top left no-repeat #2f2e2c;} 3。 从去让你的Twitter页面的代码
首先请登录到Twitter和转到您的主页。 点击“获取按钮，在您的网站更新”。
选择“其他”。
我们希望的HTML / Javascript代码。
选择您的选项（如多少要更新），然后复制了他们的代码给你。
把我们共同的网页
现在，你有代码，您可以进入并粘贴到您的index.html文件的正文部分。 它看起来像这样：
<body> <div id="twitter_div"><ul id="twitter_update_list"></ul></div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/chriscoyier.json?callback=twitterCallback2&count=10"></script> </body> 如果你载入网页现在，它可以工作，但是所有更新将完全像这样无样式：
让我们来解决，通过增加我们的CSS：
#twitter_div { position: absolute; left: 186px; top: 99px; width: 376px; height: 360px; overflow: auto; } ul#twitter_update_list { list-style: none; font-size: 14px; } ul#twitter_update_list li { margin-bottom: 10px; padding: 10px; color: #7a8a99; background: url(images/transpBlue.png); } a { color: #96997a; } 而且我们有它！ 阿很酷，外形独特，Twitter的更新页面。
相当好的教程中，我一直想更新我的Twitter页面，但却一直没有时间去学习它通过，肯定会帮助我，现在。
非常好，克里斯。 不是我做的一切有兴趣的（我用Twitter的偶尔），但它很高兴地看到本教程的过程。
这是可怕的！ 然而，这本应是原来的Photoshop文档的尺寸？
我尝试，但它不工作。
我不知道在何处放置的代码的CSS交付。
我可以表明更多细节请。
谢谢您。
感谢本教程！
这是太好了！