레이블이 Tistory인 게시물을 표시합니다. 모든 게시물 표시
레이블이 Tistory인 게시물을 표시합니다. 모든 게시물 표시

2007년 3월 12일 월요일

Picasa web album을 자신의 티스토리 블로그에 집어넣기

구글에서 제공하는 picasa web album을 자신의 티스토리 블로그나 홈페이지에 집어넣는 방법을 설명한다.
피카사에서 바로 서비스하는건 아니고 Picasa Web Album Widget Creator for Blogger in Beta 라는 홈페이지를 이용하면 자신의 홈페이지에 추가할 수 있는 스크립트를 자동으로 만들어 준다.
아래 화면이 이 방법으로  웹 앨범을 tistory에 추가한 것이다. 아래쪽 사진이 슬라이드쇼로 보여지고 사진을 클릭하면 자동으로 웹 앨범의 그 사진으로 넘어간다. 실제 동작하는걸 보고 싶으면 이 링크로 가 보면 된다.

* 캡춰된 화면이 블로그 해상도로 자동으로 줄어들어서 보여지다 보니 글자들이 잘 안보이는데 각 사진을 클릭하면 제 크기의 선명한 화면이 나타납니다.
사용자 삽입 이미지

1. Picasa Web Album Widget Creator for Blogger in Beta 에 접속하면 아래의 화면이 나온다. 중간 부분의 빈 칸에 자신이 원하는 웹 앨범의 RSS link를 넣어주면 된다. 그 이외의 옵션은 이름을 보면 대강 의미를 짐작할 수 있을테니 생략하겠다.
사용자 삽입 이미지

2. 1번 화면에서 넣어줄 RSS링크는 먼저 picasa web album으로 가서 원하는 앨범을 선택하면 화면 오른쪽 맨 아래 부분에 파란색으로 RSS 라고 되어 있는 부분에서 얻을 수 있다. 저 부분에 마우스를 가져가서 오른쪽 버튼을 클릭해서 메뉴가 나오면 'Copy Link Location'을 선택하면 된다.
사용자 삽입 이미지

3. 2번 화면에서 RSS링크를 클립보드로 복사했으면 아래 화면의 빈 칸에 paste(붙여넣기)를 하고 'Generate Widget and Code'를 클릭하면 된다. 그러면 아래 칸에 선택한 웹 앨범을 슬라이드쇼로 보여주는 스크립트가 자동으로 생성된다.
아래쪽 'Add Picasa Web Album Widget'은 Blogger를 사용하는 경우에 자동으로 삽입해주는 것인데 여기서는 필요 없다.
사용자 삽입 이미지

4. 3번 화면에서 만들어 진 스크립트를 티스토리의 스킨에 추가해 주면 된다. 다만 html과 스크립트에 익숙하지 않은 사람은 '스킨에 추가'하는 방법이 막막할 수 있기 때문에 자세히 설명하겠다.

5. 만들어 진 스크립트는 크게 두 부분으로 나눠서 넣어줘야 한다.

more.. (생성된 코드 예제)


6. 예제 코드중에 맨 앞쪽 부분(빨간색)과 그 이후 부분(파란색)을 스킨에 분리해서 넣어 줘야 한다.
<div id="pwFeed" style="text-align:center;"></div><script type="text/javascript"> var imgNum = 0;  var pwaHeader = false;var albumDisplay = false; var pwaLogo = false; var pwaSlideShow = true; var pwaSlideSpeed = 5000; var pwaImageSize = 160; var pwaImageFeed = 20; var pwaBorder = true; var pwaBorderSize = 2; var pwaBorderColor = '#000'; function pwShow(root) { var feed = root.feed; var entries = feed.entry || []; var pwTitle = feed.title.$t; var album = feed.link[0].href; pwf=
......

7. 자신의 티스토리 관리화면으로 들어가서 스킨->스킨편집으로 간다.
사용자 삽입 이미지

8. 웹 앨범 위젯을 넣을 위치를 찾아준다. 여기서는 사이드바에서 블로그 이미지(일명 대문사진) 바로 아래 부분에 넣어 보겠다. skin.html파일에서 <div id="sidebar"> 부분으로 가 보면 모듈이 순서대로 나열되어 있다.
여기서는 블로그 로고 모듈과 공지사항 모듈 사이에 6번 화면의 빨간 부분을 넣어 준다.

</s_sidebar_element>
                                        <- 이 부분에 넣어 주면 된다.
<s_sidebar_element>
<!-- 공지사항 모듈 -->

사용자 삽입 이미지

9. 변경된 화면은 다음과 같다.
사용자 삽입 이미지


10. 그리고 6번 화면의 파란 부분을 skin.html의 </body> 바로 앞 부분에 추가해주면 된다.
아래 화면에서 </script>와 </body>의 사이에 넣어준다.
사용자 삽입 이미지

11. 변경된 화면은 다음과 같다.
사용자 삽입 이미지

12. 다 끝났으면 화면 맨 아래쪽으로 가서 '저장하기'를 눌러주면 된다. 다만 빨간 글씨로 경고하듯이 스킨을 변경하는건 잘못하면 블로그를 사용할 수 없는 상태로 만들 수 있기 때문에 주의해야 한다. 먼저 '결과보기'로 제대로 변경되었는가 확인하는게 안전하다.
사용자 삽입 이미지


2007년 3월 9일 금요일

Google Apps + Tistory 설정하기

자신의 도메인 네임을 가지고 있는 사람이 tistory와 google apps를 같이 사용할 수 있게 설정하는 방법을 설명한다.

일단 자신의 도메인 네임은 이미 가지고 있다고 가정하고 시작하겠다.


1. http://www.google.com/a 로 접속하여 좌측 상단에 있는 "Get Started" 버튼을 클릭한다.

2. 3가지 에디션이 있으나 Education edition의 경우 도메인 네임이 .edu인 경우만 신청이 가능하기 때문에 돈을 내고 사용할 생각이 아니면 Standard edition밖에 사용할 수가 없다. Standard Edition아래의 "Sign Up"을 클릭!

3. 도메인은 이미 가지고 있는것으로 가정하고 설명을 시작했으므로 좌측에 자신의 도메인 이름을 넣고 'Use my domain'을 클릭한다. 예) foobar.com

* 도메인을 가지고 있지 않은 경우에는 어느쪽에 이름을 넣던지 등록할 수 있는 화면으로 넘어간다.

4. 등록할 도메인에 관한 정보를 입력한다. 도메인의 사용자 수와 관리자 정보는 필수이다. (사용자 수는 적게 넣더라도 기본이 100명으로 되는것 같다.)

정보를 다 넣고 아래 박스를 체크하고 다음으로 넘어간다. (내용은 "dns 정보를 바꿀 수 없으면 등록한 도메인이 Google Apps를 사용할 수 없다는걸 이해하고 있다"이기 때문에 신경쓸 거 없다.)

5. 관리자 계정을 만들어준다.

6. 일단 설정 완료. 하지만 아래 화면에서 보듯이 모든 서비스가 'Not active'상태이기 때문에 activate시켜줘야 한다. 먼저 email을 설정하기로 하자. Email 아래의 'Activate email' 을 클릭한다.

7. Google hosted email을 사용하려면 DNS서버의 'MX' 필드값을 바꿔줘야 한다. 기본적으로 'Any hostring company'로 되어 있지만 아래방향 화살표를 눌러보면 유명한 도메인 호스팅 회사들 목록이 나온다. (아쉽게도 미국 회사들만 있다.)

다만 목록에 없는 회사라 하더라도 'Any hosting company'에 나와 있는대로 MX 필드값만 제대로 바꿔주면 아무 문제가 없다.

8. DNS의 MX 필드값을 아래와 같이 바꿔주면 된다. 이 화면은 'any hosting company'를 선택했을 경우이다.

9. 여기서는 godaddy에서 도메인을 등록하였기에 godaddy 기준으로 설명하겠다. 아래 화면은 Showing instructions for 'GoDaddy' 의 경우이다.

10. 브라우져의 다른 창에 GoDaddy로 가서 로그인 한 후 자신의 도메인을 선택하면 아래의 화면이 나온다. Total DNS 아래의 'Total DNS Control and MX Records'를 클릭한다.

11. 메일 포워딩을 위해서는 화면의 MX 레코드가 9번 화면에 나온것과 같이 설정되어야 한다.

12. 자신의 설정이 11번의 화면과 다르면 필요없는 항목은 'X'를 눌러 삭제하고 없는 항목은 'Add New MX Record' 를 클릭해서 추가한다. 'Add New MX Record'를 클릭하면 다음의 팝업이 열린다. 여기서 Host Name은 모두 '@'으로 넣어준다.

13. 위의 MX항목 설정이 다 끝났으면 9의 화면에서 'I've completed these steps'를 클릭한다. 그러면 6의 화면으로 돌아오는데 Email 옆에가 'Not active'에서 'Updating'으로 바뀐다. DNS설정은 변경한것이 효과를 나타내는데 시간이 좀 걸리기 때문에 기다려야 한다. Google에서 MX 값이 바뀐게 확인이 되면 'Updating'이 'Active'로 바뀐다.

14. 이메일 포워딩 설정이 끝났으면 나머지 서비스를 활성화 시킨다. 이메일 포워딩을 제외한 나머지 서비스 활성화는 동일한 방법을 사용하기 때문에 여기서는 Calendar를 예로 설명하겠다. 13의 화면에서 'Activate calendar'를 클릭한다. 그러면 일단 도메인의 소유주가 맞는지 확인해주는 절차를 거쳐야 한다. 확인하는 방법은 2가지가 있다. 첫번째는 HTML파일을 자신의 서버에 올려주는 것이고 두번째 방법은 DNS서버에 CNAME을 하나 추가해주는 것이다.

15. HTML 파일을 올리는것을 선택하면 아래 화면이 나온다. 설명대로 자신의 웹 서버의 웹 루트 디렉토리에 googlehostedservice.html이라는 파일을 만들고 파일에 'googleffffffffeb955e9b1'을 넣어준다. 파일에 넣어주는 값은 구글이 자동 생성해주는 것이기 때문에 아래 화면에서 복사해서 집어 넣어주면 된다. 그리고 웹 브라우져에서 'http://<자신의 웹 서버주소>/googlehostedservice.html을 입력해서 파일이 보이는지 확인하고 확인이 되면 'Verify' 를 클릭한다.

16. 14에서 'Change your CNAME record'를 선택하면 아래의 화면이 나온다. 자신의 DNS서버에 인증을 위해서 새로운 CNAME(아래 화면에서 2번항목의 굵은 글씨)을 하나 추가하고 'Verify' 를 클릭한다. CNAME을 추가하는 방법은 부록을 참조하면 된다.

17. 입력이 끝나면 Calendar도 'Not active'에서 'Updating'으로 바뀐다. 이 역시 도메인 설정을 변경하는 것이기 때문에 확인되는데 시간이 좀 걸린다. 일단 domain ownership이 확인되면 다른 서비스들은 'Activate <서비스명>' 을 클릭하면 바로 'Active'로 바뀌고 서비스를 사용할 수 있다.

18. 자신의 tistory 주소를 자신의 도메인 이름으로 하고 싶으면 먼저 도스창을 열어 자신의 Tistory 서버의 주소를 확인한다. 'nslookup <자신의 tistory주소>'를 치면 ip주소를 알 수 있다. 아래의 예에서 techblog.tistory.com의 ip 주소는 맨 아랫줄의 '211.172.252.15' 이다.


19. 위에서 확인한 주소를 DNS서버에 'A' 필드에 넣어줘야 한다. 예를 들어 'http://techblog.tistory.com' 대신 'http://techblog.sior.org'를 사용하려고 하면 아래 화면같이 'A (Host)'에 @ 항목이 '211.172.252.15'를 가르키게 하고 'CNAME (Aliases)'에 'techblog'가 '@' 을 가르키게 하면 된다.

다른 방법으로 CNAME의 'techblog' 항목을 삭제하고 A에 Host는 'techblog', Points To는 '211.172.252.15' 값을 가지는 항목을 추가해도 된다.

20. Tistory의 환경설정 -> 기본설정 화면에서 2차 블로그 주소에 방금 설정한 새 주소를 넣어준다.

20. 여기까지 제대로 되었으면 기본 설정은 끝났다. 다만 다른 서비스(calendar, docs 등등)의 URLdefault주소가 길고 복잡하기 때문에 그것도 짧고 쉬운 이름으로 바꿔보겠다. 아래 화면은 이름을 이미 바꿔놓은 후인데 바꾸기 전이면 URL들이 꽤 길고 복잡하다. 먼저 Calendar의 주소를 바꾸고 싶으면 'Calendar' 를 클릭한다.

21. 캘린더 설정화면에서 'Change URL'을 클릭한다.

22. 아직 바꾸기 전이면 위쪽의 (default)가 선택되어 있을것이다. 아래쪽의 (custom)을 선택하고 원하는 주소를 넣어주고 'Continue'를 클릭한다.

23. 이 작업 역시 DNS서버에 새 CNAME 항목을 추가해줘야 한다. 부록을 참조해서 추가해주면 된다. 이 경우 Enter an Alias Name에 'cal' 을 넣고 Points To Host Name에 'ghs.google.com' 을 넣어주면 된다. 이것 역시 DNS를 변경하는 것이기 때문에 새 이름을 사용하려면 조금 기다려야 한다.

24. 다른 서비스의 URL을 바꾸는것도 동일한 방법으로 하면 된다. 다만 한번에 하나씩 하기 귀찮으면 22번 화면에서 'Change URLs for all domain services' 를 클릭하면 아래 화면으로 진행해서 한꺼번에 다 바꿔줄 수 있다. 이 경우도 DNS에 CNAME을 동시에 추가/변경 해 줘야 한다.

25. 모든것이 다 정상으로 끝나고 DNS 설정 변경도 적용이 되면 아래같은 화면이 표시되게 된다. 이제 설정은 다 끝나고 잘~ 사용하는 일만 남았다. :)




부록 (Appendix)


a. GoDaddy로 가서 로그인 한 후 자신의 도메인을 선택하면 아래의 화면이 나온다. Total DNS 아래의 'Total DNS Control and MX Records'를 클릭한다.

 

b. 새 CNAME을 추가하려면 'Add New CNAME Record' 를 클릭한다.

c. 아래의 팝업창에서 데이터를 입력한다. 위의 16번 화면의 경우 Enter an Alias Name에 'googleffffffffeb95e9b1' 을 넣고 Points To Host Name에 'google.com' 을 넣고 'OK'를 클릭한다.

d. 새로운 A항목을 추가하려면 b의 화면에서 'Add New A Record' 를 클릭하면 아래의 팝업화면이 나온다. Host Name에 새 호스트의 이름을, Points To Ip Address에 새 호스트의 IP주소를 넣어주고 'OK' 를 클릭하면 된다.