본문 바로가기
블로그

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

by 이윤기 2010. 4. 23.
728x90
반응형
SMALL

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

지난주에 시의원 출마를 결심하고 활동하는 후배에게서 요청이 왔습니다. 자신이 운영하는 티스토리 블로그에 트위터 위젯을 달고 싶다고 말입니다. 그래서 약 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번으로 돌아가서 위젯의 크기를 적당하게 바꿔주시면 됩니다. 마지막으로 저장하고 빠져나가면 됩니다.



반응형
LIST