블로그&홈페이지 팁

티스토리에 이미지 배너 달기와 사용자모듈 사용하기

명섭이 2011. 2. 6. 13:59

티스토리는 포탈(다음)에서 서비스하면서도 html을 수정할 수 있고, 스크립트를 자유롭게 넣을 수 있어서 네이버 등의 포털 블로그에 비해 무한한 확장이 가능하다. 특히 본문 상단이나 하단에 스크립트로 광고를 붙이는 기능은 다른 포털 블로그가 부러워하는 것이 되겠다.

얼마전 재수좋게 LG의 더블로거로 선정되어 더블로거 배너를 달 수 있게 되었다. 티스토리에 이미지 배너를 달려면 이미지를 업로드하고 사이트바 설정하고, 그렇게 설정한 것을 사용자모듈에 저장하게 된다. 조금은 복잡한 과정을 좀 쉽게 설명해 본다.

 

■ 블로그에 사용할 이미지 저장하기


티스토리의 사이드나 본문 상/하단에 이미지 배너를 넣기 위해서는 일단 이미지를 어딘가에 올려야 한다. 그래야 웹에서 사용할 수 있는 이미지의 url을 얻을 수 있다. 티스토리는 html을 수정할 수 있으며, 스킨에서 사용할 이미지를 저장할 수 있도록 하고 있다.

티스토리 관리자화면->스킨->HTML/CSS편집->파일 업로드

파일 업로드에서 원하는 이미지 파일을 업로드한다. 이 때 파일의 이름은 반드시 영문으로 한다. 한글로 할 경우 일부 웹브라우저에서 보이지 않을 수 있다.

업로드한 파일의 경로는 미리보기 화면에 표시된 이미지의 속성을 보면 url을 알 수 있다. 이 경로를 다른 홈페이지 등에 연결할 수도 있지만, 다음 측에 걸리면 잘릴 수 있으니 다른 곳에는 링크하진 마시길~

 

■ 사이드바에 이미지 배너 달기


이제 업로드한 이미지를 이용하여 사이드바에 배너로 다는 것을 알아보자. 이미지 배너는 "이미지 배너출력"과 "HTML 배너출력"으로 다는 2가지의 방법이 있다. "이미지 배너출력"은 간편하지만 상세한 설정이 어렵고, "HTML 배너출력"은 좀 어렵지만 상세한 설정이 가능하다.

티스토리 관리자화면->스킨->사이드바 설정


1. 이미지 배너출력으로 배너 달기

사이드바 설정 화면의 [기본모듈]에서 "이미지 배너출력"을 끌어서 [사이드바 꾸미기]의 원하는 위치에 넣는다. 만약 "이미지 배너출력"이 없을 경우 아래와 같이 플러그인의 "배너출력"을 활성화하면 된다.


[사이드바 꾸미기]에 넣은 "이미지 배너출력"의 [편집]을 클릭하여, 편집 창에서 원하는 이름을 입력하고, 이미지 url과 이미지 클릭 시 이동할 url을 입력한 후 [확인]을 클릭하면 설정이 완료된다.


 

2. HTML 배너출력으로 배너 달기

사이드바 설정 화면의 [기본모듈]에서 "HTML 배너출력"을 끌어서 [사이드바 꾸미기] 의 원하는 위치에 넣는다. 만약 "HTML 배너출력"이 없을 경우 위에 설명한 것과 같이 플러그인의 "배너출력"을 활성화하면 된다.

[사이드바 꾸미기]에 넣은 "HTML 배너출력"의 [편집]을 클릭하여, HTML 소스 영역에 아래와 같이 html코드를 입력한다. 이 부분이 어려울 수 있지만 더 정렬 등을 상세하게 설정할 수 있어서 좋다.
<!-- 링크를 넣지 않은 것 -->
<div align=center>
<img src="이미지url" border=0>
</div>

<!-- 링크를 넣은 것 -->
<div align=center>
<a href="링크url" target=_blank><img src="이미지url" border=0></a>
</div>

모든 설정을 마친 후 우측 상단의 [저장]을 클릭하여야 블로그에 표시가 된다.



■ 사이드바에 설정한 사항을 사용자모듈로 저장하기


"이미지 배너출력"이나 "HTML 배너출력"을 설정한 후 저장할 때, "사용자 모듈에 저장" 에 체크를 하면 해당 설정이 [사용자 모듈]에 저장된다.


그러나, 다시 편집창을 띄운 후 "사용자 모듈에 저장" 에 체크하고 저장하면 [사용자 모듈]에 똑같은 것이 또 저장된다. 삭제하면 되지만 좀 귀찮다.
이렇게 [사용자 모듈]로 설정사항을 저장하면 스킨을 바꾸거나 할 때 다시 불러올 수 있어서 편리하다.


저작자표시 비영리 동일조건