귀하의 트위터 업데이 트에 대한 고유한 웹 사이트를 만드는 방법

chriscoyier로 2008년 5월 16일 ㆍ 6 개의 댓글




트위터는 자신의 용도에 트위터에서 정보를 뽑아 사용할 수있는 API를 제공합니다. 보다 쉽게​​, 그들은 자동으로이 API를 사용하여 최근 짹짹의 간단한 HTML을 반환하는 작은 자바 스크립트 위젯을 제공합니다.

이 위젯을 활용하여 우리의 트위터 업데이 트에 대한 독특한 웹사이트를 디자인하자.

LIVE 데모보기

1. 포토샵에서 디자인

새 문서를 만들고 어두운 회색으로 배경을 입력합니다. 여기 # 222222를 사용합니다.

자신의 트위터 페이지를 만들

밝은 회색 전경색을 (# 545454)를 선택합니다. 배경 레이어 위에 새 레이어를 만듭니다. 그라디언트 도구 (페인트 버킷 도구의 하위 도구)를 선택합니다. 메뉴 표시줄에있는 그라데이션 도구를 위해 특별히 몇 가지 설정이있을 것입니다. 그들이하고 "방사형" "전경 투명에"설정되어 있는지 확인하십시오.

자신의 트위터 페이지를 만들

새 레이어에 그라데이션을 끕니다. 그리고 당신이 그것을 주위에 끌어 원하는 얼마나 그것을 얻을 수 있기 때문에 새 레이어에 이렇게하면 가장 좋습니다.

자신의 트위터 페이지를 만들

이제 구글 주위와 좋은 트위터와 같은 블루 버드를 찾아보십시오. 다음은 제가 iStockPhoto에서 구입 하나입니다. 당신은 그것을 구입하거나 귀하의 사이트 성격과 일치하는 것을 주위에 찾아볼 수 있습니다.

자신의 트위터 페이지를 만들

이제 새, 텍스트, 그리고 짹짹 잡고 상자를 추가합니다. 내가 거기에 사용되는 글꼴은 일정 블랙되었습니다. 상자는 막 18 %의 불투명도 및 "오버레이"혼합 모드로 2px 흰색 뇌졸중 세트에서 파란색 (# 0081e2)의 작성입니다.

자신의 트위터 페이지를 만들

이제 전부 (파일> 웹 및 장치 저장)을 수출하고 "페이지 - 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. 귀하의 트위터 페이지에서 코드를 가져와

먼저 트위터에 로그인하여 홈페이지로 이동 이동. "귀하의 사이트 버튼을 업데이트 받기"를 클릭합니다.

자신의 트위터 페이지를 만들

"기타"를 선택합니다.

자신의 트위터 페이지를 만들

우리는 HTML / 자바 스크립트 코드를 원한다.

자신의 트위터 페이지를 만들

(당신이 원하는 얼마나 많은 업데이 트와 같은) 옵션을 선택한 다음 그들이 당신을주는 코드를 복사합니다.

자신의 트위터 페이지를 만들

우리의 페이지를 짜고

이제 코드를 가지고, 당신은에 가서 당신의 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; }

그리고 우리가있다! 정말 멋진과 독특한 찾고 트위터 업데이트 페이지를 참조하십시오.

자신의 트위터 페이지를 만드는 방법

댓글

"당신의 트위터 업데이 트에 대한 고유의 웹사이트를 만드는 방법"6 응답
  1. 키이스 Dsouza - http://techie-buzz.com은 말합니다 :
    오후 9시 34분에 2008년 5월 16일

    난 항상 내 트위터 페이지를 업데이 트하고 싶었지만 그것을 통해 배울 수있는 시간도 적이 꽤 괜찮은 튜토리얼은, 이건 확실히 내가 지금 그렇게 도움이 될 것입니다.

  2. 데이비드 Airey - http://www.davidairey.com은 말합니다 :
    오후 12시 43분에 2008년 5월 17일

    정말, 좋은 크리스. 아니 나는 (나는 가끔 트위터를 사용)하고있는 모든 것을 관심있어하지만, 그것은 튜토리얼 과정을 볼 수 좋았어요 뭔가.

  3. 조 Philipson - http://www.philipsonphotography.com은 말합니다 :
    오후 9시 47분에 2008년 5월 17일

    이것은 대단하다! 그러나, 무엇이 원본 포토샵 문서의 크기해야하는가?

  4. bassofia - http://editando.cl은 말합니다 :
    오후 11시 38분에 2008년 5월 17일

    난 노력하지만 작동하지 않습니다.

    나는 코드를 CSS를 배달 넣어 어디 모르겠어요.

    더 자세히 주시기 바랍니다 나타낼 수 있습니다.

    감사합니다.

  5. Marlyse의 콩트가 - http://www.mStudiosTALK.com은 말합니다 :
    오후 3시 35분에 2008년 5월 18일

    이 튜토리얼에 대한 감사합니다!

  6. freqman24가 - http://www.zeustechstudios.com은 말합니다 :
    오후 3시 12분에 2008년 5월 23일

    그것은 좋은!

자습서 블로그