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

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

누구나 쉽게 따라 하는

Tistory 간편 메뉴얼

작 성 자 김 호 천
(hochun.kim@gmail.com,)
작 성 일 2012-03-08
버 전 1.0

㈜애니포미디어테크



History

버전 변경사유 작성일 작성자
0.1 최초작성 2012-02-13 민경진
1.0 주요 내용 보완 수정, APPENDIX 추가 2012-03-08 김호천
오류수정 필요 시 연락주세요 (snsbiz.kr@gmail.com)



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 <link rel="stylesheet" type="text/css" href="http://strl.cafe24.com/js/hrBar.css" id="stylesheet" />
3 <script type="text/javascript" src="http://strl.cafe24.com/js/jquery-latest.js"></script>
4 <script type="text/javascript" src="http://strl.cafe24.com/js/hrBar.js"></script>

5 

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

1 
2 <div id="menu" class="menu mcGray">
3 <div class="inset">
4 <div class="major">
5 
6 <ul>
7 <li class="m1"><a href=""><span>이곳에 메뉴 이름을 넣으세요</span></a>
8 <div class="sub">
9 <ul>
10 <li><a href=""><span>이곳에 서브메뉴 이름을 넣으세요</span></a></li>
11 </ul>
12 </div>
13 </li>
14 </ul>
15 </div>
16 <div class="aside">
17 <ul>
18 <li class="m1"><a href="#"><span>이곳에 메뉴 이름을 넣
19 으세요</span></a>
20 <div class="sub">
21 <ul>
22 <li><a href=""><span>이곳에 서브메뉴 이름을 넣으세요</span></a></li>
23 </ul>
24 </div>
25 </li>
26 </ul>
27 </div>
28 <span class="gradient"></span>
29 </div>
30 <span class="shadow"></span>
31 </div>
32 

B. 기존 메뉴 삭제

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

1 
2 <div class="blogmenu">

3 <div class="menu">
4 <a href="">홈</a> |
5 <a href="">위치로그</a> |
6 <a href="">태그</a> |
7 <a href="media">미디어로그</a> |
8 <a href="">방명록</a> |
9 <span class="adminmenu">
10 <a href="owner/entry">관리자</a> |
11 <a href="owner/entry/post">글쓰기</a>
12 </span>
13 </div>
14 <div class="search">
15 <s_search>
16 <input type="text" name="" value="" onkeypress="if
17 (event.keyCode == 13) { }" class="input"/>
18 <input value="검색" type="button" onclick=""
19 class="btn"/>
20 </s_search>
21 </div>
22 </div>
23 

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

링크주소 : 메뉴 클릭 시 이동될 페이지 주소를 넣는다. (없으면 #을 넣으면 된다.)
메뉴이름 : 화면에 보여줄 메뉴의 이름을 적는다.
서브메뉴 이름 : 메뉴에 마우스오버 시 보여줄 서브메뉴이름을 적는다.

- 메뉴 추가 : 아래 샘플 소스의 1~7번 줄을 복사하여 </li>다음줄에 소스를 붙여넣고, <li class=””>의
“” 사이에 m1, m2, m3 이런 식으로 순차적으로 증가시켜 사용한다. (※ m12까지 사용가능)
- 서브메뉴 추가 : 3번과 5번 사이에 4번 소스를 추가한다

1 <li class="m1"><a href="링크주소"><span>메뉴 이름</span></a>
2 <div class="sub">
3 <ul>
4 <li><a href="링크주소"><span>서브 메뉴 이름</span></a>
5 </ul>
6 </div>
7 </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=높이)
- 모든 설정을 완료하였으면, “완료되었습니다. 위젯코드 받기” 버튼을 눌러 코드를 받는다.

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



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

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

아래에서 원하는 크기의 소스를 복사한다.
링크나우 프로필 버튼 복사하기 : 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. 완료



C. Ustream -> 트위터 연동

http://www.ustream.tv

Step1. Ustream 로그인
Step2. Account > Connections > Twitter Connect 설정
Step3. 스마트폰 > 마켓 > Ustream 앱 다운로드
Step4. 스마트폰 > Ustream 앱 실행 > 로그인 >



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

배경 디자인은 아래 주소에서 디자인 샘플을 볼 수 있다.
(URL의 맨 마지막을 1.jpg, 2.jpg… 32.jpg로 바꿔서 샘플을 볼 수 있다.)
http://facilitation.tistory.com/style/template/image/preview/generic/1.jpg

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

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



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 <div id="fb-root"></div>
2 <script src="http://connect.facebook.net/ko_KR/all.js#xfbml=1"></script>
3 <fb:comments href="홈페이지URL[##_article_rep_link_##]" num_posts="20"
4 width="800"></fb:comments>

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


1 
2 <div class="article">[##_article_rep_desc_##]</div>
3 <div class="author">
4 Posted by [##_article_rep_author_##]
5 </div>
6 
7 <div id="fb-root"></div>
8 <script src="http://connect.facebook.net/ko_KR/all.js#xfbml=1"></script>
9 <fb:comments href="홈페이지URL[##_article_rep_link_##]" num_posts="20"
10 width="800"></fb:comments>
11


부록 (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 개인 코칭


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

Recommandé

Recommandé

Contenu connexe

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

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

Plus de 호천 김

Plus de 호천 김 (20)

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