태터나 티스토리를 쓰면서 강점은 바로 커스터마이징이 가능하다라는 것입니다.
특히 태터의 경우에는 프로그래밍 스킬이 조금 있으면 매우 유용하게 본인에 맞도록 수정해서 이용이 가능한데요..

제가 사용하면서 조금 불편한 점이 생겨서 해결하는 방법을 공유해 볼까 합니다.

저는 티스토리 기본 스킨만을 쭉~ 써오고 있습니다.

바로 아래 보이는 스킨인데요. 매우 단조롭고 심플한 맛에 쓰고 있습니다. 커스터 마이징도 단순하다 보니 쉬운 편이구요.

그런데 블로그를 계속해오다 보니 링크도 많아지고 그러다 보니 상당히 지면이 길어져서 스크롤의 압박이 매우 심해 지더군요.

특히 블로그를 약 2년동안 해오다 보니 블로그 지인들이 늘어가기 시작하고 링크가 늘어가다 보니 더욱 스크롤의 압박은 심해지더군요.

이런 경우 링크나 항상 펼치지 않아도 되는 항목이나 메뉴를 숨겼다가 클릭하면 보이도록만 한다면 지면이 상당히 짧아 질듯하여 방법을 찾아보았는데 좋은 해결 방안이 있더군요.

사용자 삽입 이미지
스킨 중에서는 이 기능이 지원이 되는 스킨이 있지만 제가 쓰고 있는 기본 스킨은 이 부분이 지원이 없습니다.

이부분은 자바 스크립트를 좀 아시는 분은 쉽게 적용이 가능하지만 모르시는분들을 위하여 방법을 공개해 볼까 합니다.

생각보다는 그리 어렵지 않습니다. 스크립트가 있어서 좀 어려워 보일 수도 있으나 복사해서 붙여넣고 몇가지 변수만 바꾸어 주면 되는 간단한 수정이라고 보시면 됩니다.

아래의 스크립트로 추가하는 방법은 티스토리 기준입니다. 태터도 아마도 적용이 되지 않을 까 합니다. 하지만 제가 티스토리를 사용하는 관계로 티스토리 기준으로 설명을 드리겠습니다.

바로 아래와 같이 수정하는 방법입니다. 기본적으로 펼쳐져 있는 스킨입니다.

저의 경우에는 달력 메뉴와 링크 메뉴에 아래와 같은 기능을 사용하고 있습니다.
사용자 삽입 이미지

Skin.html  에 먼저 추가해야할 자바 스크립트
   - 스킨 상단의 </head> ~~~ <body> 사이에 복사해 넣습니다.

<script language="JavaScript">
function clickshow(num){
 menu = document.getElementById("block"+num);
 if( menu != null && typeof menu != "undefined" )
  {
   if (menu.style.display=="block"){
   menu.style.display="none"; //닫고
  }
 else{
  menu.style.display="block";//하위 메뉴를 펼침
  }
 }
}
</script>

그 다음은 링크 메뉴를 찾아갑니다. 초록색의 주석을 보시고 찾아가시면 됩니다.

달력 모듈

<s_sidebar_element>
    <!-- 달력 모듈 -->
<h3 onclick="clickshow(1)" style="cursor:hand;">달력(클릭!!)</h3>
     <div class="calendar" id="block1" style="display:none;">
     
      [##_calendar_##]
     </div>
   </s_sidebar_element>

링클 모듈

  <s_sidebar_element>
    <!-- 링크 모듈 -->     
    
  <h3 onclick="clickshow(2)" style="cursor:hand;">링크(클릭!!)</h3>
<div class="link" id="block2" style="display:none;">

      <ul>
       <s_link_rep>
        <li>
<a href="[##_link_url_##]" onclick="window.open(this.href); return false"> [##_link_site_##].</a>
        </li>       </s_link_rep>
      </ul>
     </div>
    </s_sidebar_element>

위와 같이 변경을 하시면 됩니다.
설명을 좀더 추가 하자면
기본적인 값은
<h3>링크</h3>
<div class="link">

와 같이 되어 있을 겁니다.

이부분을 아래와 같이 바꾼건데요. 두꺼운 글씨의 빨간색 부분이 바로 위에 있는 자바 스크립트와 연동이 되는 부분입니다. () 번호만 순서대로 넣어 주면 됩니다.
전 달력이 clickshow(1)  이로 링크가 clickshow(2)  입니다.

<h3 onclick="clickshow(2)" style="cursor:hand;">링크(클릭!!)</h3>

보라색 부분은 마우스를 링크 메뉴에 가져다가 대었을 경우 하이퍼 링크를 표시해 주는 손 모양이 생성이 되도록 하는 기능의 Style 입니다.

<div class="link" id="block2"
style="display:none;">

id="block2 는 ID 를 지정하는것인데, 이부분도 메뉴에 따라서 동일하게 적용하면 됩니다.

style="display:none 는 기본적으로 화면이 보이지 않도록 하는 부분입니다. 이부분을 block  으로 바꾸면, 보였다가 누르면 사라지는 반대 기능으로 생각하시면 됩니다.

신고
Posted by 달룡이네집