All work and no play makes Jack a dull boy.

직접코딩 방법으로 티스토리에 배너를 넣어보았다. 이번에는 티스토리의 플러그인을 이용해서 배너를 넣는 방법을 소개할려고 한다. 필자는 직접코딩 방법에서 사용했던 배너를 그대로 사용할 것이다. 배너가 필요하다면, 이전의 게시물에서 받아서 쓰면 된다.


티스토리 배너 아래에 테터툴 배너와 이올린 배너를 넣어보자! 물론 원하는 배너는 아래와 같은 방법으로 모두 넣을 수 있다.


우선 플러그인을 설치해보자 [관리자] -> [플러그인] -> [블로그 꾸미기] 로 가보면 배너출력 | 테터엔프렌즈 라고 되어있는곳이 있다.


 상태를 사용중으로 바꾼다.


[스킨] -> [사이드바]로 가면, 그림과 같이 추가 가능한 플러그인에 이미지배너와 코드배너가 들어가 있다.


사이드바로 드래그해서 옴겨서 사용할 수 있고, 계속 해서 생성할 수 있다. 직접코드 방식에 비해 편하다. 필자는 이 두가지를 다 만들어 보았다.


만들기전에 내 블로그의 이미지가 어디에 저장되어 있는지 우선 알아야 한다. 블로그에서 RSS를 선택해서 속성을 보고 위치값의 주소를 선택해서 복사하자.


이미지 배너의 사용방법이다. 이미지 경로에 배너의 경로(필자는 URL주소를 사용하였다. 절대경로를 입력했을때, 웹에서 보여지지 않는 문제가 있었다. 이전에 RSS 이미지 주소를 복사했던것을 붙여 넣고, '파일경로/그림파일명.확장자' 부분을 자신의 파일 이름으로 고친다.)를, 타켓 경로에 홈페이지의 경로를 각각 넣어서 사용한다.


코드 배너의 사용방법이다. HTML 코드 에 배너의 HTML 코드를 직접 입력해서 넣어서 사용하는 거다. 이건 왠지 직접코딩하는 방법이랑 비슷하다. 필자가 쓰는 태그를 넣어두었으니 고쳐서 사용하면 된다.

<!-- 이올린 로고(가운데 정렬) --><div style="text-align:center;" ><a href="http://www.eolin.com" style="margin-bottom:4px; display:block;"><img src="파일경로/그림파일명.확장자" alt="이올린" /></a></div>


그림과 같이 배너 안에 그림이 들어가 있는것을 볼 수 있다. 직접코딩 방법하고 틀린것은 편집기능이 있어서 바로 수정 할 수 있다는 거다. 그리고, 이미지가 가운데 정렬이 안되고. 왼쪽으로 붙어있다. 뭐 이건... 그냥 얘교로 봐주자 ㅡㅡ;; 이제 블로그로 돌아가서 확인해보자 적용이 되는가?


자! 적용이 되었다. 위의 그림은 필자가 코드배너를 통해서 얻은 결과이다. 배너를 가운데로 정렬 시켜서 사용할려면, 필자처럼 코드배너를 사용해서 넣어야 한다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

티스토리에 배너를 넣기위해서는 몇가지 방법이 있다. 하지만, 필자가 소개하고자 하는 방법은 직접 코딩하는 방법을 소개할려고 한다. 왜 직접코딩인가? 필자는 플러그인에 약하다 ㅡㅡ; 그래서 직접 코딩하는 방법을 택했다. 물론 소스 공부도좀 할까해서 직접 코딩방법을 택했다. 자 그럼 시작해보자.
시작에 앞서 본 강좌는 티스토리의 기본스킨을 바탕으로 제작되었음을 알린다. 테터툴 스킨이나 기타 제작되어진 스킨은 태그가 틀릴 수 있다.


우선 소스를 수정하기 전에 사용할 배너를 스킨선택화면에서 직접올리기로 올린다. 올린 후 [관리자모드]에서 -> [스킨] -> [스킨편집]을 차례로 선택하고 skin.html을 보면 위와같은 머리아픈? 소스코드들이 보일것이다. 박스로 표시된 곳에 배너 코드를 집어넣을 것이다.

박스 안에 배너와 관련된 소스코드를 넣었다. 집접 코딩의 번거러움을 해결하기위해 필자가 코드를 넣어두었다. 복사해서 사용하자. 코드가 이상하게 들어가면 조금만 손보면 되며, 따로 코드에 대해서는 설명하지 않아도, 대충은 알수 있을것이다. skin.html 박스 안에서 Ctrl + F 한 후 '티스토리' 로 검색하면 수정할 곳을 찾기가 훨씬 쉽다. 수정이 끝나고 저장을 하자.

<s_sidebar_element>
                   <!-- 테터툴 로고-->
                       <div style="margin:8px 0; font:11px dotum; text-align:center;" >
                       <a href="http://www.tattertools.com" style="margin-bottom:4px; display:block;"><img src="./images/tattertools.jpg" alt="테터툴" /></a>
                       <!--<a href="http://www.tattertools.com">테터툴</a>-->
                       </div>
                   </s_sidebar_element>
                  
                   <s_sidebar_element>
                   <!-- 이올린 로고-->
                       <div style="margin:8px 0; font:11px dotum; text-align:center;" >
                       <a href="http://www.eolin.com" style="margin-bottom:4px; display:block;"><img src="./images/eolin.jpg" alt="이올린" /></a>
                       <!--<a href="http://www.eolin.com">이야기를 올리세요. 세상이 열립니다.</a>-->
                       </div>
                   </s_sidebar_element>
저장후 사이드바로 가면, 추가 가능한 모듈(스킨 기본)에 위와같이 배너가 생긴다. 모듈로 추가되기 때문에 언제든지 넣거나 뺄수 있다.

위와같이 배너를 드래그해서 끌어다 놓고, 블로그로 가서 확인해보면 배너가 들어가 있은것을 볼 수 있다. 끝으로, 필자가 쓰고있는 배너파일을 첨부했으니 받아서 쓰면 된다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.