티스토리 사이드 메뉴에 자신의 배너 이미지 추가하는 방법

현재 제 블로그를 보시면 화면 왼쪽 사이드 메뉴에 아래와 같이 제 책과 유튜브 채널이 소개하는 배너가 들어 있습니다.

제 블로그를 통해서 저의 디지털 자산들을 홍보하고 있는 것입니다.

이처럼 사이드 메뉴에 배너 거는 방법에 대해서 위쪽의 책 출간 배너를 기준으로 간단히 설명을 드립니다.

1. 배너 이미지 준비하기

제가 사용하고 있는 스킨이 '친절한 효자손'이라는 것이데 가이드에 이미지 폭을 300 픽셀 이상으로 하라고 되어 있어서 300 X 200 픽셀로 이미지를 제작했습니다.

저는 이 같은 이미지를 만들 때 주로 미리캠버스를 사용합니다. 다른 이유는 없고 폰트를 다양하게 사용할 수 있고 온라인으로 간단히 작업할 수 있기 때문입니다.

아래와 같이 이미지를 제작하고 이름을 영문 소문자로 해서 제 PC에 저장해 둡니다.

이미지 이름을 영문 소문자로 한 이유는 티스토리 서버에서 영문 소문자만 사용 가능하기 때문입니다.

이제 티스토리 관리자 페이지에 들어가셔서 스킨 '편집 → html 편집'으로 이동합니다.

html 편집 화면에서 '파일업로드 → 추가'를 선택합니다.

티스토리 서버에 이미지가 추가되었으면 이미지의 링크를 추출합니다.

추출하는 방법은 간단합니다. 이미지를 선택한 상태에서 마우스 오른쪽 버턴을 눌러서 '링크 주소 복사'를 선택하면 됩니다.

복사된 링크 주소를 메모장에 잘 복사해 둡니다.

티스트로 관리자 페이지에서 '꾸미기 → 사이드바'를 선택하고 [플러그인] HTML 배너출력의 "+"를 눌러서 배너를 추가합니다.

사이드바 1에 추가된 배너가 보입니다. 편집을 눌러서 필요한 링크를 넣어 줍니다.

위의 창에서 이름 창에는 '도서 은퇴소프트랜딩'을 입력하고 HTML 소스 창에는 아래 내용을 입력합니다.

그리고 사용자 모듈에 저장을 반드시 체크하시기 바랍니다.

마지막으로 변경사항 저장을 누르면 모든 것이 완료됩니다.

이제 사이드 메뉴 화면에서 보시는 것처럼 도서 소개 배너가 완료되었습니다.

감사합니다.

함께 읽어보세요.