no.16 스킨의 사이드바에 광고 넣기

이글은 이전에 작성한 글과 많은 부분이 일치하지만 스킨을 적용하고 나머지 광고나 기타 링크를 삽입하는데 있어 모르는 부분을 매우기 위해 재작성 합니다.

no.16 스킨의 사이드바는 박스형태로 되어 있습니다.

여기에 광고나 기타 링크등을 삽입할때 그냥 삽입하면 아래와같은 모습이 나옵니다.(흉보는것 아니니 기분나뻐하지 마세요.)

사이드바의 박스와 박스 사이에 광고가 위치하게 됩니다.

박스 즉 테두리에 넣어지지 않고 밖에 위치하게 됩니다.

이걸 스킨과 어울리게 자연스럽게 삽입해보도록 하겠습니다.

사이드바의 html 코드를 복사합니다. 아무부분이나 상관없습니다. 아래는 링크에 해당하는 부분이고 대략 아래처럼 되어있습니다.

<s_sidebar_element><!-- 링크 -->
<div id="link" class="s_class">
  <h2>Link</h2>
  <div class="hl"></div>
    <ul class="widget">
      <s_link_rep>
      <li>
        <a href="[#\#_link_url_##]" onclick="window.open(this.href); return false" title="[#\#_link_site_##]"> [#\#_link_site_##].</a>
      </li>
      </s_link_rep>
  </ul>
</div>
</s_sidebar_element>

<!-- 위 부분을 아래처럼 수정합니다. 즉, 티스토리에서 사용하는 치환자를 모두 없애면 아래처럼 됩니다. -->
<s_sidebar_element><!-- 링크 -->
<div id="ads1" class="s_class"><!-- id는 고유한것으로 아무거나 생성 -->
<h2>ADS</h2><!-- 제목부분에 보여지는 부분 -->
	<div class="hl"></div>
	<ul class="widget">
		<li>
		<!-- 광고넣는자리 -->
		</li>
	</ul>
</div>
</s_sidebar_element>

단지 id를 하나 생성합니다. id 는 고유해야 하므로 ads라고 정하고 1,2,3... 순으로 만들어주면 됩니다.

그래서 id="ads1" 라고 생성하고 나머지 치환자부분을 모두 삭제했습니다.

또하나 추가하려면 간단이 id="ads2" 라고만 적어주고 사용하시고, 계속 숫자만 추가해서 사용하시면 따로 스타일을지정하지 않아도 됩니다.

저 광고자리에 광고를 넣어보세요. 그럼 아래처럼 됩니다.

광고의 너비가 대략 240px 이하로 넣어야하지만 큰것을 넣어도 감쳐주는 코드가 있기때문에 레이아웃이 깨지지는 않습니다. 지금 저 화면은 250*250짜리 구글광고 입니다.

마찬가지로 다른 링크도 저런식으로 사용하면 됩니다.

대문스킨을 활용한 팁은 계속됩니다!!!