반응형

스토리 블로그에서 이미지 배너를 만드는 방법은 간단하고 편리합니다.

먼저, 티스토리 설정에서 이미지 배너를 생성하는 방법을 알아보면,

1) 먼저 'admin' 메뉴로 들어가서 '스킨' 메뉴의 '사이드바 설정' 항목으로 들어갑니다.
2) 사용 가능한 모듈 항목에서 '이미지 배너출력' 모듈을 사이드 바에 추가합니다.

사이드 설정 메뉴

사이드 설정 메뉴


3) 추가한 '이미지 배너출력' 모듈 옆에 '편집' 버튼을 누르면 이미지 배너의 제목과 삽입할 이미지의 URL, 그리고 이미지를 눌렀을 경우 이동할 사이트 URL을 입력하는 항목이 나타납니다.

이미지 배너출력 메뉴

이미지 배너출력 메뉴


위에 자신이 넣고 싶은 이미지와 연결하고 싶은 URL만 입력하면 됩니다. 매우 간단하군요.

이미지의 URL을 입력하는 방법은 여타 게시판에서 이미지를 올리실 때 많이들 사용하시는 방법과 동일합니다. 

4) 먼저, 자신의 배너인 이상, 직접 이미지를 만드시는 것이 아무래도 좋겠죠. 편집 툴은 자신의 환경에 맞게 선택하도록 하구요. 그 전에 자신의 블로그의 사이드바 폭이 어느 정도 되는지를 먼저 계산해두면 좋습니다. 폭이 넘어가거나 폭보다 너무 좁게 이미지를 만드는 경우에는 별로 좋게 보이지가 않겠죠.

폭을 계산하는 방법은 제 경우에는 이미지 캡쳐 툴을 사용하여 계산했습니다. 캡쳐 툴은 네이버 자료실과 같은 공개 자료실에 프리웨어로 제공되는 것들을 사용하시구요. (전 픽픽이라는 툴을 사용했는데, 그럭저럭 쓸만하더군요.)

이미지를 다음과 같이 만들어 보았습니다. (제 경우에는 파워포인트;;;로 만들었습니다.)

자작 이미지 배너 1

자작 이미지 배너 1

자작 이미지 배너 2

자작 이미지 배너 2


5) 이 이미지를 저장할 포스트를 별도로 만들어 봅니다. 블로그를 갖고 계시니 블로그 내에 비공개 포스트로 만들어 두시는 것이 좋겠군요. 이미지를 첨부한 후 포스트를 저장한 다음, 이미지에 마우스 오른쪽 클릭을 해봅니다. 브라우저가 익스플로러인 경우에는 마우스 우클릭으로 생긴 팝업 메뉴의 제일 하단에 속성이라는 항목이 보입니다. 이 항목을 클릭하면 이미지의 정보가 나오는데, 주소 부분에 이 이미지의 URL이 표시되어 있는 것을 확인할 수 있습니다. 해당 URL을 복사합니다. (제 경우는 크롬 브라우저도 사용하는데 크롬의 경우에는 마우스 우클릭을 하면 바로 URL 주소를 복사할 수 있는 항목으로 연결되지요. 

이미지 배너 적용모습

이미지 배너 적용모습

6) 복사된 URL은 다음과 같은 형태입니다. 
https://t1.daumcdn.net/cfile/tistory/1146B7194BBEBC8E37

이 URL을 3)에서 설명한 이미지 배너출력 편집 창의 이미지 URL 항목에 복사해 줍니다. 이제 배너의 명칭과 이 배너가 연결할 다른 URL을 지정해주면 됩니다. 자신이 특별히 링크를 걸어두고 싶은 포스트나, 자신의 또다른 블로그, 자신의 카페 등에 연결해 놓으면 방문자들이 쉽게 해당 링크로 방문하게 할 수가 있습니다. 우측의 그림은  이렇게 해서 제 블로그에 적용된 이미지 배너의 모습입니다. 

티스토리의 경우는 이렇게 간단하게 지원이 됩니다만, 다른 블로그의 경우에는 티스토리와 틀릴 수도 있습니다. 제가 네이버 블로그를 사용하니 네이버 블로그를 하나 예로 들어보겠습니다. 네이버는 위젯을 생성하고 직접 자신이 코드를 입력할 수 있는 창을 제공하는데요. 별도로 이미지 배너를 지원하고 있지 않기에 이 위젯 입력 메뉴에 자신이 이미지 배너를 출력할 수 있도록 HTML 태그를 작성해주어야 합니다.

이미지 배너를 출력할 수 있는 태그는 다음과 같습니다.

<p align="center">
  <a target="_blank" class="con_link" target="_top"  href="연결할 URL" onfocus&#61;"onfocus" this.blur="this.blur">
    <img src="이미지 URL" border="0" />
  </a>
</p><br />

이 태그에 아까와 같이 연결할 URL과 이미지 URL을 추가한 다음 이 태그를 네이버 블로그의 위젯 등록 메뉴에 입력하면 됩니다. 네이버 블로그의 관리 메뉴로 들어가 '스킨 설정'의 '레이아웃 선택'으로 들어갑니다. 우측 메뉴의 하단에 보면 '위젯직접등록 Beta'라는 항목이 있습니다. 클릭하여 나타난 위젯 등록 창에 위의 태그를 입력합니다. 

네이버 위젯등록 메뉴

네이버 위젯등록 메뉴


참고로, 네이버 블로그의 사이드바 메뉴는 170 픽셀 정도의 폭을 갖습니다. 이미지 작성시 폭을 계산하는 것을 유념하시구요. 위의 태그를 사용하여 하나가 아니라 여러 개의 배너를 넣고 싶을 경우에는 각각 별도의 위젯을 만드는 방법도 있습니다만 해당 태그에 추가로 입력하는 방법도 있습니다. 

<p align="center">
  <a target="_blank" class="con_link" target="_top"  href="연결할 URL 1" onfocus&#61;"onfocus" this.blur="this.blur">
    <img src="이미지 URL 1" border="0" />
  <a target="_blank" class="con_link" target="_top"  href="연결할 URL 2" onfocus&#61;"onfocus" this.blur="this.blur">
    <img src="이미지 URL 2" border="0" />
  </a>
</p>

자신만의 이미지로 블로그를 풍성하게 꾸며보시길 바랍니다.

반응형

+ Recent posts