View
374
Download
3
Category
Preview:
DESCRIPTION
티스토리 초기 셋팅을 위한 간편 메뉴얼입니다.
Citation preview
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
누구나 쉽게 따라 하는
Tistory 간편 메뉴얼
작 성 자 김 호 천
(hochun.kim@gmail.com,)
작 성 일 2012-03-08
버 전 1.0
㈜애니포미디어테크
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
History
버전 변경사유 작성일 작성자
0.1 최초작성 2012-02-13 민경진
1.0 주요 내용 보완 수정, APPENDIX 추가 2012-03-08 김호천
오류수정 필요 시 연락주세요 (snsbiz.kr@gmail.com)
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
Table Of Contents
1. 스킨 변경 ........................................................................................................................................ 4
2. 메뉴변경 .......................................................................................................................................... 5
A. 풀다운 메뉴 추가 ..................................................................................................................... 5
B. 기존 메뉴 삭제 ......................................................................................................................... 6
C. 메뉴/서브메뉴 추가/삭제 .......................................................................................................... 7
3. 스킨위자드를 이용한 배경/타이틀/게시글 변경 방법 ................................................................... 8
A. 스킨위자드 실행 ....................................................................................................................... 8
B. 배경 ........................................................................................................................................... 8
C. 타이틀 ....................................................................................................................................... 9
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
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
1. 스킨 변경
티스토리 로그인 > 티스토리 관리 > (1)스킨 > (2)3단형 > (3)기본테마스킨응용 – tisNoteGreen > 적용
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
2. 메뉴변경
※ 아래 설명은 티스토리 스킨 중 3단형 – 기본테마스킨응용 - tisNoteBlue을 대상으로 하였습니다. 다른 스
킨은 아래 설명과 다른 부분이 있을 수 있음을 알립니다.
※ 아래 설명은 스킨 기본 메뉴에서 풀다운 메뉴로 변경하는 과정을 설명합니다.
A. 풀다운 메뉴 추가
- 아래 소스를 skin.html문서의 <head></head> 사이에 넣는다.
1
2
3
<!-- 풀다운메뉴 CSS/스크립트.시작 -->
<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>
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
4
5
<script type="text/javascript" src="http://strl.cafe24.com/js/hrBar.js"></script>
<!-- 풀다운메뉴 CSS/스크립트.끝 -->
- 아래 소스를 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">
<!-- class="major + (m1~m12)"-->
<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에서 찾아 삭제 한다.
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- blogmenu.시작 -->
<div class="blogmenu">
<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>
<!-- blogmenu.끝 -->
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>
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
3. 스킨위자드를 이용한 배경/타이틀/게시글 변경 방법
A. 스킨위자드 실행
티스토리 로그인 > 티스토리 관리 > (1)스킨 > (2) 버튼 클릭 > (3)스킨위자드
B. 배경
- 티스토리에서 제공하는 디자인 사용 : 스킨위자드 > 배경 > 이미지 > 디자인에서 마음에 드는 디자인
을 선택한다.
- 티스토리에서 제공하는 패턴 사용 : 스킨위자드 > 배경 > 이미지 > 패턴에서 마음에 드는 패턴을 선
택한다. (※주의 : 패턴 사용시 이미지 사용을 바둑판식으로 한다.)
- 직접 올리기 : 스킨위자드 > 배경 > 직접올리기 > Browse… 버튼을 눌러서 사용할 이미지를 불러온
다.
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
C. 타이틀
- 티스토리에서 제공하는 디자인 사용 : 스킨위자드 > 타이틀 > 이미지 > 디자인에서 마음에 드는 디자
인을 선택한다.
- 티스토리에서 제공하는 패턴 사용 : 스킨위자드 > 타이틀 > 이미지 > 패턴에서 마음에 드는 패턴을
선택 한다. (※주의 : 패턴 사용시 이미지 사용을 바둑판식으로 한다.)
- 직접 올리기 : 스킨위자드 > 타이틀 > 직접올리기 > Browse… 버튼을 눌러서 사용할 이미지를 불러온
다.
- 블로그 타이틀 높이 설정 : 스킨위자드 > 타이틀 > 텍스트 > 높이에서 값(최소 50 ~ 최대 300)을 변
경 할 수 있다.
D. 게시글
- 글영역 넓이 조절 : 스킨위자드 > 게시글 > 글영역 넓이에서 값(최소 400 ~ 최대 1000)을 변경하여
조절 할 수 있다.
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
4. 플러그인 설정
A. 배너출력 플러그인
사이드바에 위젯을 편리하게 넣을 수 있는 플러그인 배너출력(HTML 출력 배너 및 이미지 출력 배너)을
사용한다.
- 티스토리 로그인 > 티스토리 관리 > (1)플러그인 설정 > 관리 및 통계 > (2)배너출력 플러그인 사용
- 티스토리 로그인 > 티스토리 관리 > (1)사이드바 > (2)이미지/HTML 배너출력 모듈 생성 확인
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
B. Tistory2Twitter (티스토리 -> 트위터 글보내기)
티스토리에 포스팅하면 자동으로 트위터로 글을 보내주는 플러그인
- 티스토리 로그인 > 티스토리 관리 > 플러그인 설정 > 글 보내기 > Tistory2Twitter
Step1. 말머리 : 해쉬태그영역
Step2. 짧은 주소 사용 : 사용 하지 않음
Step3. 계정 다시 연결하기
Step4. 저장
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
5. 사이드바에 위젯 넣기
A. 트위터 프로필 위젯
진행순서는 다음과 같다 :
트위터 프로필 위젯 설정 페이지 > 설정 > 선호 > 모양 > 크기 > 위젯코드 받기 > HTML 모듈을 이용
해 사이드바에 위젯 넣기
트위터 프로필 위젯 설정 페이지 : https://twitter.com/about/resources/widgets/widget_profile
- 설정 : 사용자 아이디에 트위터 아이디를 입력한다.
- 선호 : 원하는 옵션에 체크한다.
- 모양 : 위젯의 색상을 선택한다.
- 크기 : 위젯의 크기를 입력한다.(width=넓이, height=높이)
- 모든 설정을 완료하였으면, “완료되었습니다. 위젯코드 받기” 버튼을 눌러 코드를 받는다.
아래와 같이 생성된 위젯 코드를 복사한다.
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
아래 그림과 같이 티스토리 관리 > 사이드바 > HTML 배너출력 > 편집 > 이름/HTML 소스 입력
B. 링크나우 프로필 위젯 넣기
아래에서 원하는 크기의 소스를 복사한다.
링크나우 프로필 버튼 복사하기 : http://www.linknow.kr/index.php?c=user_link&m=link_list
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
아래 그림과 같이 티스토리 관리 > 사이드바 > HTML 배너출력 > 편집 > 이름/HTML 소스 입력
C. RSS위젯 넣기
네이버 블로그/카페, 다음 블로그/카페 등의 글을 RSS위젯을 통해 가져올 수 있다.
Step1. RSS 정보 : +RSS 주소 추가 버튼을 누르고 추가하고자 하는 RSS 주소를 입력한다.
Step2. 제목설정 : 위젯 제목영을을 텍스트/이미지/제목없음 으로 설정 할 수 있다.
Step3. 레이아웃 선택 : 원하는 레이아웃을 선택한다.
Step4. 테마 설정 : 원하는 테마를 선택한다.
Step5. 위젯 퍼가기를 눌러서 소스코드를 생성한다.
Step6. 블로그에 위젯을 넣는다.
* 미리보리 버튼을 눌러 현재 적용된 설정을 미리 볼 수 있다.
* 위젯의 크기는 미리보기영역 하단부에서 쉽게 수정 할 수 있다.
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
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. 완료
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
C. Ustream -> 트위터 연동
http://www.ustream.tv
Step1. Ustream 로그인
Step2. Account > Connections > Twitter Connect 설정
Step3. 스마트폰 > 마켓 > Ustream 앱 다운로드
Step4. 스마트폰 > Ustream 앱 실행 > 로그인 >
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
7. 기타 알아야 할 사항
A. 디자인 시안 요청시 알아야 할 사항
배경 디자인은 아래 주소에서 디자인 샘플을 볼 수 있다.
(URL의 맨 마지막을 1.jpg, 2.jpg… 32.jpg로 바꿔서 샘플을 볼 수 있다.)
http://facilitation.tistory.com/style/template/image/preview/generic/1.jpg
B. 네이버 블로그에 위젯 넣는 방법
네이버 블로그 > 관리 > 레이아웃.위젯 설정 > 위젯직접등록 BETA > 위젯코드 입력
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
C. 다음 블로그/카페 RSS위젯 추가
아래 URL에서 다음 블로그 또는 다음 카페를 선택하고 RSS Feed를 받고자 하는 URL을 입력한다.
http://widgetbank.daum.net/widget/view/928?searchType=WHOLE&sortType=&keyword=RSS&pageBottom
Id=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의 본문영역 소스를 찾아 그 아래에 소스를 삽입한
다.
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
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>
<!-- 페이스북댓글.끝 -->
누구나 쉽게 따라 하는 Tistory 간편 매뉴얼
㈜애니포미디어테크
부록 (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 개인 코칭
Recommended