티스토리 배너 등록 가이드

목차

1. 배너 만들기
2. 이미지 링크(직링) 만들기
3. 공지에 배너 추가하기
4. 스킨 편집 홈 화면 등 게시글 외 배너 추가하기 (선택)

 

 

0. 이걸 왜 하는가

 

이미지 직링 장점 : 배너 이미지 변경하면 배너 교환한 사람들도 자동으로 바뀜 > 연락 안 돌려도 됨

이미지 직링 단점 : 복잡함 저도사실어떻게설명할지모르겟어요!!

---

 

1. 배너 만들기

 

일반적인 티스토리 배너 사이즈는 200 X 40 (5:1)

이미지 크기는 이 크기보다 작아지는 거 아니면 상관 없는데 비율은 맞춰야 됨

파일은 png 또는 gif로 저장 파일명은 banner.png (또는 banner.gif)

여기서는 gif로 진행합니다

 

지금 당장 아니고 나중에라도 움직이는 배너 쓸 생각이 조금이라도 있다! > gif (동적 이미지 / 정적 이미지 모두 가능)

필요없다 > png (정적 이미지만, 동적 이미지 쓰려면 배너교환한 트친들한테 연락돌려야됨)

 

gif가 화질 좀 깨지긴 해요 근데 어차피 배너고 크기 작으니까 걍 썼음

gif 어떻게 하는 건지 모르겠다

> 일단 png로 만들고 구글에 저렇게 쳐서 나오는 사이트에서 변환

 

 

 

짠

근데 전 큰 게 좋아서 2000 400 했어요

 

 

 

2. 이미지 링크(직링) 만들기

 

티스토리 관리 페이지 > 꾸미기 > 스킨 편집

 

 

 

우측 상단 스킨 편집 > html 편집 클릭

 

 

 

파일 업로드 > 하단의 +추가 클릭 > 만들어둔 배너 업로드

 

 

 

파일 목록의 images/banner.gif 마우스 우클릭 > 링크 주소 복사

그럼 복사가 됩니다

메모장 띄워두고 복붙해놓기

 

 

 

복사한 링크를 보면

티스토리 어쩌고 링크 + 파일명 이런 식인데

여기서 빨간색은 해당 티스토리 고유 주소라 스킨 변경해도 고정

> 배너 바꿔도 파일명만 같으면 같은 이미지로 인식

> 직링으로 다른 데 올라간 모든 배너가 알아서 바뀜

 

대신 스킨 바꿀 때마다 올려야 돼요... 스킨 바꾸고 안 올리면 엑박뜸

배너 변경 시 기존 파일 삭제 > banner.gif로 파일명 똑같이 맞추고 새 배너 업로드

 

 

 

 

3. 공지에 배너 추가하기

 

공지 외에 게시글 수정 화면에서 수정할 수 있는 모든 화면에 해당합니다

게시글 수정 화면 > 우측 기본 모드 클릭 > HTML 선택

 

 

 

하단에 아래 코드 복붙

 

<p>
    <a href="link" 
       target="_blank"
       title="닉네임">
        <img src="banner_link"
             width="200"
             height="40">
    </a>
<p>

 

 

a 태그 : 눌렀을 때 다른 페이지로 이동하는 기능 (= 링크 삽입 수정)
- href="link" : 이동할 페이지 링크
- target="_blank" : 새 창에서 열기 (필요 없으면 빼도 됨)
- title="닉네임" : 마우스 올리면 뜨는 텍스트 (스킨마다 다름)

 

img 태그 : 이미지를 띄우는 기능 (= 이미지 첨부)
- src="banner_link" : 아까 복사해뒀던 본인 배너 링크
- width="200" : 너비를 200으로 설정
- height="40" : 높이를 40으로 설정

 

 

 

이렇게 수정해서 붙여놓고 다시 기본 모드로 바꿔보면

 

 

 

배너가 들어가 있습니다

가운데 정렬 이런 건 이미지 누르고 하던대로 하면 됨 

 

그리고 남의 배너 훔쳐오는 법

 

 

 

배너 페이지 > 이미지 우클릭 > 이미지 주소 복사

저렇게 이미지 링크 같이 올려준 건 저거 복사하면 됨

 

 

 

마찬가지로 html로 바꾼 다음에 똑같이 넣어주고 다시 확인하면

 

 

 

짠

 

 

 

그리고 기본모드랑 html이랑 왔다갔다 하다보면 줄바꿈이 이렇게 바뀌는데

그냥 무시하고 하면 됩니다 ^_ㅠ

 

 

 

+ 접은글로 넣는 법

기본모드 우측 상단 점 3개 클릭 > 접은글

 

 

 

추가 후 다시 html로 전환

 

 

 

- data-text-more="더보기" : 닫혔을 때 접은글 상자에 보이는 텍스트, 뒤쪽이랑 맞춰줘야됨

- data-text-less="닫기" : 열렸을 때 접은글 상자에 보이는 텍스트 

 

배너가 들어가는 부분은 7행의

<p data-ke-size="size16">&nbsp;</p>

이 부분입니다

 를 지우고 아까처럼

 

 

 

코드를 넣으면

 

 

 

이렇게 하면 됨

 

 

 

 

4. 스킨 편집 홈 화면 등 게시글 외 배너 추가하기 (선택)

 

공지에 안 쓰고 홈 화면에 쓰는 방법

요즘 나오는 스킨들에는 거의 붙어있음

 

 

 

스킨 편집 화면 > 커버 > 메인에 띄울 페이지 수정 버튼 클릭 (스킨마다 다름)

 

 

 

여기 있는 내용 탭은 게시글 작성의 html 탭이랑 똑같아서

아까 작성한 코드를 똑같이 넣어야 돼요

 

 

 

공지에 작성했던 수정 화면 html모드에서

필요한 부분만 복사하기 (접은글은 6~10행 전부 복사)

 

 

 

수정하고 저장하면

 

 

 

메인에서도 볼 수 있습니다

 

 

 

+

이건 케바켄데 혹시 앞에 이런 짝대기가 뜬다

 

 

 

<style>
    .cover-notice .cover-sum a::before { display: none !important; }
</style>

내용 마지막에 이거 넣어주면 사라짐

 

 

 

 

 

끝!!

나름 쉽게 풀어서 쓴다고 쓴 건데 모쪼록 도움이 됐으면 좋겠고...

어쨌든 코드를 손대야 하는 거라 싫어하는 분들 많을 거 같음

모르겠으면 그냥 저한테 당장배너만들어달라고 연락주세요

대신 한 번은 읽고 오셔야 됩니다..............

 

여기가 이해가 안 된다 > 디엠주세요

여기서 막혔다 > 디엠주세요

하다가 레이아웃 다 깨졌다 > 디엠주세요

이새낀 나한테 너무 많은 걸 바라는 거 같다 > 디엠주세요

배너 이미지도 못만들겠다 > 이건좀찾아보고오시길