How To Make אתר ייחודי עבור עדכוני הטוויטר שלך
16 מאי 2008 על ידי chriscoyier · 6 תגובות
טוויטר מציעה API שבו ניתן להשתמש כדי למשוך מידע מן האתר לשימושים שלך. אפילו קל יותר, הם מציעים ווידג'ט קטן javascript אשר משתמש אוטומטית ב-API זה וחוזר HTML פשוט של טוויטים האחרונות שלך.
בואו לעצב אתר אינטרנט ייחודי עבור עדכוני טוויטר שלנו ניצול זה יישומון.
1. עיצוב ב-Photoshop
יצירת מסמך חדש ולמלא את הרקע בצבע אפור כהה. השתמשתי # 222222 כאן.
בחירת צבע בהיר חזית אפור (# 545454). צור שכבה חדשה על גבי שכבת הרקע שלך. בחר את הכלי שיפוע (תת כלי של הכלי דלי צבע). בשורת העליונה יהיו כמה הגדרות במיוחד עבור הכלי שיפוע. ודא שהם מוגדרים "חזית שקופה" ו "רדיאלי".
על שכבה חדשה, גרור את שיפוע. עושה את זה על שכבה חדשה היא הטובה ביותר כי אז אתה יכול לגרור אותו סביב ולקבל את זה בדיוק איך שאתה אוהב.
עכשיו גוגל סביב לנסות למצוא ציפור יפה טוויטר כמו כחול. להלן אחד אני שנרכשו iStockphoto. אתה יכול לקנות אותו או לגלוש סביב משהו שמתאים לאישיות של האתר שלך.
עכשיו להוסיף את העוף, מעט טקסט, תיבת להחזיק tweets שלך. הגופן השתמשתי היתה אג'נדה השחור. התיבה היא רק מילוי של כחול (# 0081e2) ב 18% אטימות ומערכת 2px שבץ לבן במצב "כיסוי" להתמזג.
עכשיו לייצא את הדבר (File> Save for Web & Devices) שלמה קוראים לזה "דף 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
ראשית ללכת להיכנס טוויטר ללכת לדף הבית שלך. לחץ על "קבלת עדכונים על הכפתור באתר שלך".
בחר "אחר".
אנחנו רוצים את קוד ה-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> אם לטעון את הדף עכשיו, זה יעבוד, אבל כל העדכונים יהיו unstyled לחלוטין כמו זה:
בואו לתקן את זה על ידי הוספת ל-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; } ויש לנו את זה! די מגניב וייחודי עדכונים מחפש טוויטר הדף.
לא מעט הדרכה טוב תמיד רציתי לעדכן את דף האתר שלי, אבל מעולם לא הגיע הזמן ללמוד את זה דרך, זה יהיה בהחלט לעזור לי לעשות את זה עכשיו.
יפה מאוד, כריס. לא משהו שאני כל כך מעוניין לעשות (אני משתמש בטוויטר מדי פעם), אבל זה היה נהדר לראות את תהליך הדרכה.
זה מדהים! עם זאת, מה צריך להיות בממדים של המסמך המקורי פוטושופ?
ניסיתי אבל זה לא עובד.
אני לא יודע איפה לשים את הקוד משלוחים CSS.
אני יכול להצביע ביתר פירוט בבקשה.
תודה.
תודה על מדריך זה!
זה נחמד!