티스토리 사이드바에 배너 다는 쉬운 방법

티스토리 블로그 사이드바에 배너를 달고 링크를 걸어서 내가 원하는 사이트로 갈 수 있으면 좋겠다는 마음으로 여러 가지 방법으로 시도하다가 사이드바에 배너달기를 성공했습니다. 제가 배너를 달았던 방법을 블로그 활동에 필요하신분들도 사용하시라고 쉬운 설명으로 알려드리겠습니다.

 

사이드바에 배너 달기

 

기본적으로 먼저 준비해야 되는 작업

 

1. 플러그인 클릭하여 배너출력을 사용할 수 있도록 적용을 눌러줍니다.

 

 

2. 이미지를 만듭니다.

• 미리캔버스 (https://www.miricanvas.com)에서 배너이미지를 쉽게 만들어보세요.
• 블로거들이 썸네일이나 배너 이미지 제작 시에 많이 방문해서 사용하는 곳입니다.

바로시작하기 버튼 클릭하시고 사용하시면 됩니다.

 

 

※ 이미지 크기를 사용하고 있는 블로그스킨에 맞도록 사이즈를 만들어야 됩니다.

- 북클럽스킨의 경우는 배너크기로 230-115가 적당한 것 같습니다. 본인의 스킨모양에 맞도록 크기를 조정하세요)

 

 

3. 내 티스토리에 새 글쓰기 창을 열어 배너로 사용할 이미지를 올립니다.

 

• 배너가 여러 개면 이미지도 배너 개수만큼 글쓰기창에서 사진 넣기로 붙여 넣고 비공개로 저장합니다.

 

4. 배너로 사용할 이미지주소 복사하기

내 티스토리 창에서 사진을 넣어둔 글을 클릭하여 사진 위에서 마우스 우클릭을 해서 이미지주소복사하기를 클릭합니다. 복사된 이미지 주소는 메모장에 붙여둡니다.

 

 

 

 

사이드바에 배너 달기 작업

 

1.  블로그관리창에 꾸미기 밑에 사이드바를 클릭합니다.

 

2. 이미지 배너출력 / HTML 배너출력

 

배너를 달수 있는 방법은 두 가지 방법이 있습니다. 

 

1) 이미지 배너출력

이미지 배너출력은 HTML코드 없이 간단히 이미지 주소와 클릭 시 도착할 사이트 주소를 입력하면 간단히 배너를 만들 수 있습니다.  (이미지크기를 본인의 스킨에 잘 맞도록 만들야 됩니다.  이미지가 클 경우 지정칸에 예쁘게 안 들어갑니다.)

 

2) HTML 배너출력

HTML 배너출력은 HTML 코드를 넣어서 사용하기 때문에 배너의 개수를 1개 이상 넣을 수 있고, 에드센스 광고도 넣을 수 있습니다. (이미지크기를 큰 것으로 넣어도 HTML코드에서 자동으로 크기를 맞춰주도록 되어있어서 편하게 사용하면 됩니다.)

 

 

Banner.txt

0.00MB

 

 

 

 

코드를 다운하시면 요런 모양입니다.

 

배너를 1개만 사용할 경우 연두색까지 복사해서 사용하시고, 2개를 사용할 경우는 노랑색선까지 복사해서 사용하시고, 3개를 사용하실 경우는 전체를 다 복사해서 사용하시면 됩니다.

 

 

사이드바에 배너3개를 넣은 모습니다.