Tistory 간편메뉴얼 rev1.0 (주)애니포미디어테크

누구나 쉽게 따라 하는 Tistory 간편 매뉴얼

㈜애니포미디어테크

누구나 쉽게 따라 하는

Tistory 간편 메뉴얼

작 성 자 김 호 천

([email protected],)

작 성 일 2012-03-08

버 전 1.0


mailto:[email protected]�



History

버전 변경사유 작성일 작성자

0.1 최초작성 2012-02-13 민경진

1.0 주요 내용 보완 수정, APPENDIX 추가 2012-03-08 김호천

오류수정 필요 시 연락주세요 ([email protected])



Table Of Contents

1. 스킨 변경............................................................................................................................................................................... 4

2. 메뉴변경 ................................................................................................................................................................................. 5

A. 풀다운 메뉴 추가 ...................................................................................................................................................... 5

B. 기존 메뉴 삭제 .......................................................................................................................................................... 6

C. 메뉴/서브메뉴 추가/삭제 ...................................................................................................................................... 7

3. 스킨위자드를 이용한 배경/타이틀/게시글 변경 방법 ..................................................................................... 7

A. 스킨위자드 실행 ........................................................................................................................................................ 7

B. 배경 ................................................................................................................................................................................. 8

C. 타이틀 ............................................................................................................................................................................. 8

D. 게시글 ............................................................................................................................................................................. 9

4. 플러그인 설정 .................................................................................................................................................................. 10

A. 배너출력 플러그인 ................................................................................................................................................ 10

B. Tistory2Twitter (티스토리 -> 트위터 글보내기) .................................................................................. 11

5. 사이드바에 위젯 넣기 .................................................................................................................................................. 12

A. 트위터 프로필 위젯 .............................................................................................................................................. 12

B. 링크나우 프로필 위젯 넣기 .............................................................................................................................. 13

C. RSS위젯 넣기........................................................................................................................................................... 14

6. 블로그/SNS 연동 ............................................................................................................................................................ 16

A. 트위터 -> 페이스북 연동 .................................................................................................................................. 16

B. 네이버 블로그 -> 트위터 연동 ...................................................................................................................... 16

C. Ustream -> 트위터 연동................................................................................................................................... 17

7. 기타 알아야 할 사항 .................................................................................................................................................... 19

A. 디자인 시안 요청시 알아야 할 사항 ........................................................................................................... 19

B. 네이버 블로그에 위젯 넣는 방법 .................................................................................................................. 19

C. 다음 블로그/카페 RSS위젯 추가.................................................................................................................... 20

D. 티스토리 본문에 페이스북 댓글 달기 ......................................................................................................... 20



1. 스킨 변경

티스토리 로그인 > 티스토리 관리 > (1)스킨 > (2)3단형 > (3)기본테마스킨응용 – tisNoteGreen > 적용

2. 메뉴변경

※ 아래 설명은 티스토리 스킨 중 3단형 – 기본테마스킨응용 - tisNoteBlue을 대상으로 하였습니다. 다른 스

킨은 아래 설명과 다른 부분이 있을 수 있음을 알립니다.

※ 아래 설명은 스킨 기본 메뉴에서 풀다운 메뉴로 변경하는 과정을 설명합니다.

A. 풀다운 메뉴 추가

- 아래 소스를 skin.html문서의 <head></head> 사이에 넣는다.

1

2

3

4



<link rel="stylesheet" type="text/css" href="http://strl.cafe24.com/js/hrBar.css" id="stylesheet" />

<script type="text/javascript" src="http://strl.cafe24.com/js/jquery-latest.js"></script>

<script type="text/javascript" src="http://strl.cafe24.com/js/hrBar.js"></script>

5 

- 아래 소스를 skin.html문서의 <body>의 <div class=”blogmenu”> 바로 앞에 넣는다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32



<div id="menu" class="menu mcGray">

<div class="inset">

<div class="major">



<ul>

<li class="m1"><a href=""><span>이곳에 메뉴 이름을 넣으세요</span></a>

<div class="sub">

<ul>

<li><a href=""><span>이곳에 서브메뉴 이름을 넣으세요</span></a></li>

</ul>

</div>

</li>

</ul>

</div>

<div class="aside">

<ul>

<li class="m1"><a href="#"><span>이곳에 메뉴 이름을 넣

으세요</span></a>

<div class="sub">

<ul>

<li><a href=""><span>이곳에 서브메뉴 이름을 넣으세요</span></a></li>

</ul>

</div>

</li>

</ul>

</div>

<span class="gradient"></span>

</div>

<span class="shadow"></span>

</div>



B. 기존 메뉴 삭제

- 3 ~13번 줄에 해당하는 소스를 skin.html에서 찾아 삭제 한다.

1

2



<div class="blogmenu">

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<div class="menu">

<a href="">홈</a> |

<a href="">위치로그</a> |

<a href="">태그</a> |

<a href="media">미디어로그</a> |

<a href="">방명록</a> |

<span class="adminmenu">

<a href="owner/entry">관리자</a> |

<a href="owner/entry/post">글쓰기</a>

</span>

</div>

<div class="search">

<s_search>

<input type="text" name="" value="" onkeypress="if

(event.keyCode == 13) { }" class="input"/>

<input value="검색" type="button" onclick=""

class="btn"/>

</s_search>

</div>

</div>



C. 메뉴/서브메뉴 추가/삭제

링크주소 : 메뉴 클릭 시 이동될 페이지 주소를 넣는다. (없으면 #을 넣으면 된다.)

메뉴이름 : 화면에 보여줄 메뉴의 이름을 적는다.

서브메뉴 이름 : 메뉴에 마우스오버 시 보여줄 서브메뉴이름을 적는다.

- 메뉴 추가 : 아래 샘플 소스의 1~7번 줄을 복사하여 </li>다음줄에 소스를 붙여넣고, <li class=””>의

“” 사이에 m1, m2, m3 이런 식으로 순차적으로 증가시켜 사용한다. (※ m12까지 사용가능)

- 서브메뉴 추가 : 3번과 5번 사이에 4번 소스를 추가한다

1

2

3

4

5

6

7

<li class="m1"><a href="링크주소"><span>메뉴 이름</span></a>

<div class="sub">

<ul>

<li><a href="링크주소"><span>서브 메뉴 이름</span></a>

</ul>

</div>

</li>

3. 스킨위자드를 이용한 배경/타이틀/게시글 변경 방법

A. 스킨위자드 실행



티스토리 로그인 > 티스토리 관리 > (1)스킨 > (2) 버튼 클릭 > (3)스킨위자드

B. 배경

- 티스토리에서 제공하는 디자인 사용 : 스킨위자드 > 배경 > 이미지 > 디자인에서 마음에 드는 디자

인을 선택한다.

- 티스토리에서 제공하는 패턴 사용 : 스킨위자드 > 배경 > 이미지 > 패턴에서 마음에 드는 패턴을 선

택한다. (※주의 : 패턴 사용시 이미지 사용을 바둑판식으로 한다.)

- 직접 올리기 : 스킨위자드 > 배경 > 직접올리기 > Browse… 버튼을 눌러서 사용할 이미지를 불러온

다.

C. 타이틀



- 티스토리에서 제공하는 디자인 사용 : 스킨위자드 > 타이틀 > 이미지 > 디자인에서 마음에 드는 디

자인을 선택한다.

- 티스토리에서 제공하는 패턴 사용 : 스킨위자드 > 타이틀 > 이미지 > 패턴에서 마음에 드는 패턴을

선택 한다. (※주의 : 패턴 사용시 이미지 사용을 바둑판식으로 한다.)

- 직접 올리기 : 스킨위자드 > 타이틀 > 직접올리기 > Browse… 버튼을 눌러서 사용할 이미지를 불러온

다.

- 블로그 타이틀 높이 설정 : 스킨위자드 > 타이틀 > 텍스트 > 높이에서 값(최소 50 ~ 최대 300)을 변

경 할 수 있다.

D. 게시글

- 글영역 넓이 조절 : 스킨위자드 > 게시글 > 글영역 넓이에서 값(최소 400 ~ 최대 1000)을 변경하여

조절 할 수 있다.



4. 플러그인 설정

A. 배너출력 플러그인

사이드바에 위젯을 편리하게 넣을 수 있는 플러그인 배너출력(HTML 출력 배너 및 이미지 출력 배너)을

사용한다.

- 티스토리 로그인 > 티스토리 관리 > (1)플러그인 설정 > 관리 및 통계 > (2)배너출력 플러그인 사용

- 티스토리 로그인 > 티스토리 관리 > (1)사이드바 > (2)이미지/HTML 배너출력 모듈 생성 확인



B. Tistory2Twitter (티스토리 -> 트위터 글보내기)

티스토리에 포스팅하면 자동으로 트위터로 글을 보내주는 플러그인

- 티스토리 로그인 > 티스토리 관리 > 플러그인 설정 > 글 보내기 > Tistory2Twitter

Step1. 말머리 : 해쉬태그영역

Step2. 짧은 주소 사용 : 사용 하지 않음

Step3. 계정 다시 연결하기

Step4. 저장



5. 사이드바에 위젯 넣기

A. 트위터 프로필 위젯

진행순서는 다음과 같다 :

트위터 프로필 위젯 설정 페이지 > 설정 > 선호 > 모양 > 크기 > 위젯코드 받기 > HTML 모듈을 이

용해 사이드바에 위젯 넣기

트위터 프로필 위젯 설정 페이지 : https://twitter.com/about/resources/widgets/widget_profile

- 설정 : 사용자 아이디에 트위터 아이디를 입력한다.

- 선호 : 원하는 옵션에 체크한다.

- 모양 : 위젯의 색상을 선택한다.

- 크기 : 위젯의 크기를 입력한다.(width=넓이, height=높이)

- 모든 설정을 완료하였으면, “완료되었습니다. 위젯코드 받기” 버튼을 눌러 코드를 받는다.

아래와 같이 생성된 위젯 코드를 복사한다.

https://twitter.com/about/resources/widgets/widget_profile�



아래 그림과 같이 티스토리 관리 > 사이드바 > HTML 배너출력 > 편집 > 이름/HTML 소스 입력

B. 링크나우 프로필 위젯 넣기

아래에서 원하는 크기의 소스를 복사한다.

링크나우 프로필 버튼 복사하기 : http://www.linknow.kr/index.php?c=user_link&m=link_list

http://www.linknow.kr/index.php?c=user_link&m=link_list�




C. RSS위젯 넣기

네이버 블로그/카페, 다음 블로그/카페 등의 글을 RSS위젯을 통해 가져올 수 있다.

Step1. RSS 정보 : +RSS 주소 추가 버튼을 누르고 추가하고자 하는 RSS 주소를 입력한다.

Step2. 제목설정 : 위젯 제목영을을 텍스트/이미지/제목없음 으로 설정 할 수 있다.

Step3. 레이아웃 선택 : 원하는 레이아웃을 선택한다.

Step4. 테마 설정 : 원하는 테마를 선택한다.

Step5. 위젯 퍼가기를 눌러서 소스코드를 생성한다.

Step6. 블로그에 위젯을 넣는다.

* 미리보리 버튼을 눌러 현재 적용된 설정을 미리 볼 수 있다.

* 위젯의 크기는 미리보기영역 하단부에서 쉽게 수정 할 수 있다.



6. 블로그/SNS 연동

A. 트위터 -> 페이스북 연동

트위터에서 페이스북 담벼락에 글 남기기 설정

- 트위터 로그인 > 설정 > 프로필 > 내 트윗을 Facebook에도 올리기 > Facebook 연동

B. 네이버 블로그 -> 트위터 연동

http://twitterfeed.com 을 통해서 네이버 블로그에서 트위터로 글보내기를 한다.

Step0. Twitterfeed 로그인

Step1. Feed Name / Blog URL or RSS Feed URL 입력

Step2-1. Twitter 클릭 > Authentication Twitter 버튼을 클릭해서 트위터 인증 > Create Service

Step2-2. All Done 버튼 클릭

Step3. 완료

http://twitterfeed.com/�



C. Ustream -> 트위터 연동

http://www.ustream.tv

Step1. Ustream 로그인

Step2. Account > Connections > Twitter Connect 설정

Step3. 스마트폰 > 마켓 > Ustream 앱 다운로드

Step4. 스마트폰 > Ustream 앱 실행 > 로그인 >

http://www.ustream.tv/�



7. 기타 알아야 할 사항

A. 디자인 시안 요청시 알아야 할 사항

배경 디자인은 아래 주소에서 디자인 샘플을 볼 수 있다.

(URL의 맨 마지막을 1.jpg, 2.jpg… 32.jpg로 바꿔서 샘플을 볼 수 있다.)

http://facilitation.tistory.com/style/template/image/preview/generic/1.jpg

B. 네이버 블로그에 위젯 넣는 방법

네이버 블로그 > 관리 > 레이아웃.위젯 설정 > 위젯직접등록 BETA > 위젯코드 입력

http://facilitation.tistory.com/style/template/image/preview/generic/1.jpg�



C. 다음 블로그/카페 RSS위젯 추가

아래 URL에서 다음 블로그 또는 다음 카페를 선택하고 RSS Feed를 받고자 하는 URL을 입력한다.

http://widgetbank.daum.net/widget/view/928?searchType=WHOLE&sortType=&keyword=RSS&pageBott

omId=278&pageTopId=928&pageBottomCnt=2747&pageTopCnt=1840

Daum블로그 > 꾸미기 > 위젯에서 적용한다.

D. 티스토리 본문에 페이스북 댓글 달기

Step1. 3번째 줄 href=””에 블로그 URL을 넣는다.

Step2. 4번째 줄 width=””에 본문에 맞게 크기를 조절한다.

1

2

3

4

<div id="fb-root"></div>

<script src="http://connect.facebook.net/ko_KR/all.js#xfbml=1"></script>

<fb:comments href="홈페이지URL[##_article_rep_link_##]" num_posts="20"

width="800"></fb:comments>

Step3. 티스토리 관리 > HTML/CSS편집 -> skin.html의 본문영역 소스를 찾아 그 아래에 소스를 삽입한

다.

http://widgetbank.daum.net/widget/view/928?searchType=WHOLE&sortType=&keyword=RSS&pageBottomId=278&pageTopId=928&pageBottomCnt=2747&pageTopCnt=1840�

http://widgetbank.daum.net/widget/view/928?searchType=WHOLE&sortType=&keyword=RSS&pageBottomId=278&pageTopId=928&pageBottomCnt=2747&pageTopCnt=1840�

1

2

3

4

5

6

7

8

9

10

11



<div class="article">[##_article_rep_desc_##]</div>

<div class="author">

Posted by [##_article_rep_author_##]

</div>



<div id="fb-root"></div>

<script src="http://connect.facebook.net/ko_KR/all.js#xfbml=1"></script>

<fb:comments href="홈페이지URL[##_article_rep_link_##]" num_posts="20"

width="800"></fb:comments>



부록 (APPENDIX) – 문의처 (김호천, 010-6367-6034)

1. 간편 매뉴얼로 만든 사이트 예

A. 스마트소셜비즈니스 사이트 – http://SnSbiz.kr

B. 창업을 도와주는 가게, 창업가게 사이트 – http://frients.kr

C. 소셜여행 맞춤형 여행사이트 – http://tourplanner.tistory.com

2. 비즈니스 소셜홈 구축운영 코칭 과정안내

A. 행사안내 : http://www.linknow.kr/event/1010797

i. 매주 일요일 오후3시~6시 무료운영 중입니다.

ii. ‘12년 7월부터 유료로 진행할 예정입니다.

B. 과정안내 : http://www.slideshare.net/hochunkim/ppt-11052335

i. 소셜홈 (티스토리) 구축하기

ii. 포탈과 SNS에 커뮤니티(카페, 클럽,포럼,그룹,…) 구축하기

3. 비즈니스 소셜웹 구축운영 코칭 과정안내

A. SNS를 활용한 중소기업 홍보 마케팅 전략

i. 행사안내 : http://www.linknow.kr/event/1011000

ii. ‘12년 7월부터 유료로 진행할 예정입니다.

B. 1인 창조기업을 위한 홍보 마케팅 전략 및 사례

C. SNS를 활용한 중소기업 CRM/ERP사용

D. 중소기업 CEO를 위한 비즈니스 SNS 개인 코칭

http://snsbiz.kr/�

http://frients.kr/�

http://tourplanner.tistory.com/�

http://www.linknow.kr/event/1010797�

http://www.slideshare.net/hochunkim/ppt-11052335�

http://www.linknow.kr/event/1011000�

Tistory 간편메뉴얼 rev1.0 (주)애니포미디어테크

Documents

Transcript of Tistory 간편메뉴얼 rev1.0 (주)애니포미디어테크