티스토리 사이드바 구글 애드센스, 위젯, 가젯, 태그 항목 정리하기

• 티스토리 사이드바 구글 애드센스와 위젯, 가젯, 태그 항목 정리하기
  
  머니야 머니야님의 게시물 http://moneyamoneya.tistory.com/159 를 참고로 하였습니다.
  저같은 경우는 머니야 머니야 님의 팁을 알기 전에는 태그 입력기 안에 테이블 태그를 써서... 정리를 했었습니다만
  그것 역시도 그닥 보기에는 안좋습니다.  뭔가 어색하기도 하고 이질감도 느껴지고..
  너저분하게 삐뚤빼뚤한것들을 그나마 테이블에 넣어놔도.. 역시나 보기가 안좋았습니다.
  그러나 머니야님의 게시물을 보고 나서 나름대로 만족스러운 결과를 얻어서 참 뿌듯했습니다.
  
  어쨋든 깔끔하게 정리할 수 있는 기본적인 스크립트와 사용 방법은 머니야 님의 글을 일단 보시고 오세요.
  이 글에서는 추가적인 팁만 몇개 알려드립니다.
  
  큰 틀은 기본 사이드바와 모양이 똑같은 박스를 하나 더 만들어서 그 안에 태그나 위젯 등을 집어넣는다는 것입니다.
  다만 아래 스크립트처럼 들어갈 위젯이나 태그 스크립트 외에 위 아래로 더 무언가가 붙는다는 거죠.
  
  

<div class="boxTopR"><div class="boxTop-left"></div><div class="boxTop-mid"></div><div class="boxTop-right"></div></div>
     <div class="boxMidR">
      <div id="link">
       <h3 class="stitle">링크</h3>
       <ul>
        <s_link_rep>
                                  <li>
                          들어갈 태그나 스크립트, 내용
                           </li>
        </s_link_rep>
       </ul>
      </div>
     </div>
     <div class="boxBtmR"><div class="boxBtm-left"></div><div class="boxBtm-mid"></div><div class="boxBtm-right"></div></div>

• 사이드바 수정하기 TIP 1 :  
  저 태그들은 스킨마다 조금씩 다른데, 각각 다른 스킨에서도 쉽게 박스 스크립트 찾는 팁입니다.
  스킨 ㅡ> HTML/CSS 수정하기 들어가셔서 HTML 창에서 <s_sidebar_element> 이 항목으로 찾기 하시면 금방 찾습니다.
  아래 스샷의 스크립트처럼 <s_sidebar_element> 와 </s_sidebar_element> 사이의 것들이
  사이드바의 한 박스를 구성하는 스크립트 입니다.
  
  

  사이드바 박스 스크립트 소스

  
  
• 사이드바 수정하기 TIP 2 : 위의 회색박스 안의 스크립트 중에  <h3 class="stitle">링크</h3>
  이 부분을 다른것으로 수정하거나 아예 삭제해버리면 박스를 색다르게 꾸밀수 있습니다.
  태그를 삭제해 버리면 제 블로그의 오른쪽 사이드바 처럼 제목 없는 박스를 만들 수도 있습니다. 머리가 없죠...
  구글 애드센스의 경우 My Link, My Favorite site, 링크, 즐겨찾기 등의 항목을 쓰면 약관을 어기는 것이라 박스에 넣고 쓰려면 지워놓고 써야합니다.. 링크라는 단어 말고도 취향대로 다른 말들을 써 넣어서 수정하셔도 됩니다.
  
  
  
  
• 사이드바 수정하기 TIP 3 : 사이드바의 위쪽 박스와 아래쪽 박스의 간격을 좁히는 팁입니다.
  기본적인 사이드바 박스는 간격이 좁은데, 위젯이나 다른 태그들을 테그박스 같은곳에 넣어서 사이드바를 쓸 경우에
  조금 더 벌어지게 되어있습니다. 이것 역시 스킨 ㅡ> HTML/CSS 에 가서 CSS 부분을 수정해야합니다.
  
  
  
  위 스샷의 가장 밑부분에 보면 padding-bottom: 7px; 의 숫자가 7 인데, 이 스킨 만드신 분이  다른 위젯이나 태그를 쓸 경우
  구별하기 위해 따로 간격을 더 벌려놓은거 같습니다. 저 숫자를 0 으로 해놓으면 아래 이미지처럼 간격이 보통 박스들처럼
  좁아집니다. 아래 스샷에서 왼쪽이 7일때.. 오른쪽이 0 일때 입니다.
  

  수정 전

  수정 후

  
  간격 조절을 한것과 안한것이 차이가 조금 있지요.
  
  이상으로 조그만 팁 3가지를 소개했습니다.
  머니야님이 큰거 한방 때리시고 제가.. 사족을 다는거 같지만서도.. 혹 필요하신 분이 있을지도 몰라서.. 남겨봅니다.