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

사용자 삽입 이미지

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

사용자 삽입 이미지

우선 소스를 수정하기 전에 사용할 배너를 스킨선택화면에서 직접올리기로 올린다. 올린 후 [관리자모드]에서 -> [스킨] -> [스킨편집]을 차례로 선택하고 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>

사용자 삽입 이미지

저장후 사이드바로 가면, 추가 가능한 모듈(스킨 기본)에 위와같이 배너가 생긴다. 모듈로 추가되기 때문에 언제든지 넣거나 뺄수 있다.

사용자 삽입 이미지

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

이전 1 ... 18 19 20 21 22 23 24 25 26 ... 34 다음