How To Make a Unieke website voor uw Twitter Updates
16 mei 2008 door chriscoyier · 6 Reacties 
Twitter biedt een API die u kunt gebruiken om informatie te trekken uit twitter voor uw eigen gebruik. Nog eenvoudiger, bieden zij een beetje uitgeschakeld widget die automatisch gebruik maakt van deze API en opbrengsten eenvoudige HTML-code van uw recente tweets.
Laten we ontwerpen een unieke website voor onze Twitter updates gebruik te maken van deze widget.
1. Design in Photoshop
Maak een nieuw document en vul de achtergrond met een donkere grijze kleur. Ik gebruikte # 222222 hier.
Selecteer een lichtere grijze voorgrond kleur (# 545454). Maak een nieuwe laag op de top van je achtergrond laag. Selecteer de gradiënt tool (sub-instrument van de verf emmer tool). In de bovenste balk er een aantal instellingen zijn specifiek voor de gradiënt tool. Zorg ervoor dat ze zijn ingesteld op "voorgrond op Transparant" en "radiaal".
Op uw nieuwe laag, sleept u een kleurverloop. Door dit te doen op een nieuwe laag is het beste, want dan je het kunt slepen rond en krijgen net hoe je wilt.
Nu Google rond en probeer een mooie Twitter-achtige Blue Bird. Hieronder is een die ik gekocht van iStockPhoto. Je kan het kopen op of rond zoeken naar iets dat de persoonlijkheid van uw site past.
Voeg nu de vogel, om wat tekst, en een doos houd je tweets. Het lettertype dat ik gebruikte was er Agenda Zwart. De doos is gewoon een vulling van blauw (# 0081e2) bij 18% dekking en een 2px wit slag bij de "Overlay" blend modus.
Nu exporteren de hele zaak (Bestand> Opslaan voor Web & Devices) en noemen het "page-bg.jpg '. Nu zijn we klaar om de website te bouwen!
2. Het creëren van de Basic Webpage
Maak een eenvoudige HTML-bestand structuur:
<!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> En de fundamentele CSS-bestand. We gebruiken het beeld hebben we als een achtergrondafbeelding voor het lichaam, zich aan de linker bovenhoek.
/* 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. Ga de code van je Twitter-pagina
Ga eerst in te loggen om Twitter en ga naar uw startpagina. Klik op de updates op uw site knop ".
Kies "Overige".
Wij willen dat de HTML / Javascript-code.
Kies uw opties (zoals hoeveel updates je wilt), en kopieer de code die zij geven.
Het samenstellen van onze pagina
Nu dat u de code hebt, kunt u gaan en plak die in het lichaam van je bestand index.html. Het zal er ongeveer als volgt uit:
<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> Als u de pagina te laden nu, zal het werken, maar alle updates zullen volledig worden unstyled als volgt uit:
Laten we vaststellen dat door het toevoegen aan onze 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; } En daar hebben we het! A pretty cool en uniek op zoek Twitter updates pagina.
Nogal een goede tutorial heb ik altijd al wilde mijn twitter pagina bij te werken, maar nooit de tijd om het te leren door, zal dit zeker helpen mij doen dat nu.
Very nice, Chris. Niet iets wat ik al die geïnteresseerd zijn in het doen (ik gebruik Twitter af en toe), maar het was geweldig om te zien de tutorial proces.
This is awesome! Echter, wat moeten de afmetingen van het originele Photoshop-document?
Ik heb geprobeerd maar het werkt niet.
Ik weet niet waar de code zetten dat Css leveringen.
Ik zou kunnen wijzen op meer details please.
Bedankt.
Bedankt voor deze tutorial!
Dat is mooi!