블로그에 트위터 위젯만들기

오늘은 <초보자를 위한 티스토리 블로그 만들기>에 이어서 티스토리 브로그에 위젯을 설치하는 방법을 소개합니다. 마찬가지로 블로그 초보자를 위하여 작성한 글 입니다. 이미 잘 아시는 분들은 볼 필요가 없는 글입니다.

지난주에 시의원 출마를 결심하고 활동하는 후배에게서 요청이 왔습니다. 자신이 운영하는 티스토리 블로그에 트위터 위젯을 달고 싶다고 말입니다. 그래서 약 1시간을 투자하여 트위터 위젯을 티스토리에 다는 법을 정리하였습니다. 사실, 이 후배를 위해서 만들었는데 이틀 후 시민단체 활동가 교육에서 잘 써먹었습니다.

이 후배는 블로그, 트위터, 페이스북을 넘나들며 소셜네트워크를 활용하는 일에 매우 적극적입니다. 얼마전에는 자기 동네에서는 최초로 '아이패드'를 손에 넣었다는 소식을 전해왔더군요.  (아이패드 구입했어요) (아이패드로 선거운동 어때요, 괜찮죠이~잉)

이 글은 트위터 위젯을 다는 것 뿐만 아니라 html code에 익숙하지 않은 분들에게는 구글 광고 코드 등을 붙여넣는 작업에 두려움을 줄여줄 수 있을 것 입니다. 트위터 위젯넣기에 성공하고나면 스킨을 저장해 놓고 '구글 광고'도 넣어보고, 스킨 변경도 좀 더 자신있게 할 수 있습니다.

2010/04/19 - [블로그] - 초보자를 위한 티스토리 블로그 만들기
2010/01/27 - [블로그] - 블로그 풀뿌리 정치와 통(通)할까?
2010/01/11 - [블로그] - KBS뉴스, 내 블로그보다 공정하고 신뢰도 높을까?
2009/12/04 - [블로그] - 단체 활동가가 블로그 못(안)하는 이유
2009/11/09 - [블로그] - 블로그 1년, 시민운동가 파워블로거 되기까지...
2009/06/05 - [블로그] - 블로그 스킨 바꿀 때 꼭 저장하세요.
2009/06/03 - [블로그] - 블로그 광고, 왜 몽땅 사라졌을까?
2009/04/16 - [블로그] - 블로그 이사하기와 꼭 주의할 점
2009/04/03 - [블로그] - 시민단체 메타블로그 '공짜'로 만들기①


티스토리에 트위터 위젯 만들기는 아래 설명을 보고 따라하시면 누구나 어렵지 않게 할 수 있습니다.

1. 트위터 메인화면으로 가서  로그인 한 후에 화면 맨 아래쪽으로 가서  Goodies 를 클릭하여 들어갑니다. 

2. Widgets과 Buttons 이라는 메뉴가 있습니다. Widgets을 클릭하고 들어가세요.

3. My Website 와 Facebook 이 있는데요.  당연히 My Website 를 선택해야겠지요.

4. Profile Widget 을 선택하면.... 아래 오른쪽 검은 부분과 같이 위젯이 생성됩니다.

5. 위젯의 크기와 모양 등을 바꾸고 싶으면 위 사진 1번 박스의 Preferences , Appearance, Dimensions 의 메뉴를 클릭하여 조정하시면 됩니다.

6. 기본 설정을 사용하셔도 되구요.  아무튼 크기와 모양을 다 조절하신 후에는 Test settings 을 누르시면 만들어진 모양을 미리 볼 수 있습니다. (2번 박스)

7. Test settings 이 마음에 드시면 마지막으로 Finish & Grab Code 를 누르시면 'html code'가 생성됩니다.

8. 화면에 생성된 Code를 복사해서 티스토리의 내 블로그 관리자 화면으로 가서 스킨에 붙여 넣으면 됩니다.

9. 티스토리 관리자 화면에 들어가면 먼저 스킨 선택을 누르세요.  그럼 맨 위에 현재 사용중인 스킨이 나옵니다. 현재 상태의 스킨을 먼저 저장하세요.  만약 트위터 Code를 복사해서 넣다가 실패하면 언제라도 되돌릴 수 있습니다.

10. HTML/CSS 편집으로 들어가서 블로그 화면 오른쪽에 들어갈 수 있도록 적당한 자리에 붙여넣으면 됩니다. 
    1) 'html code'를 잘 아시면 원하는 자리에 붙여 넣으시구요.
    2)  html code를 잘 모르시면... 블로그 오른쪽 화면에 나타나는 메뉴들을 살펴보신 후에 적당한 자리에 넣어보시고...[미리보기]를 해보시면 됩니다. html code를 잘 몰라도 몇 번 적당한 자리를 찾다보면 대부분 알 수 있습니다. 나중에 블로그에 광고를 넣기 위해서도 알아두시는 것이 좋습니다. 

11. 블로그 화면 오른쪽 달력 위에 붙여넣어 보겠습니다.

12.복잡한 html 코드 중에서 잘 보시면 한글로 <달력 모듈>이 나옵니다.  달력 모듈 윗쪽에 트위터 code를 붙여넣으면, 블로그 화면 달력 위에 위젯이 만들어지겠지요.

13. 제대로 붙여 넣은는지 확인하려면 맨 아래쪽으로 내려가서 [미리보기]를 클릭합니다. 미리보기를 하기 전에 익스플로러에서  [팝업가능]으로 되어있어야 합니다. 만약 팝업 설정을 바꾸면 화면이 리셋 되면서 붙여넣었던 코드가 지워지기 때문에 다시 붙여 넣어야 합니다. (※ 관리자 메뉴를 시작할 때 [팝업]창이 열리도록 설정을 바꾸는 것이 좋습니다.)

14. 아래 사진처럼, 블로그 화면에 트위터 위젯이 생성됩니다. 저의 경우는 위젯이 너무 크네요. 그럼, 5번으로 돌아가서 위젯의 크기를 적당하게 바꿔주시면 됩니다. 마지막으로 저장하고 빠져나가면 됩니다.