13. 티스토리 스킨 만들기 링크, 카운터

오늘은 링크와 카운터 부분을 수정하겠습니다.

오늘 볼 부분은 딱히 어려운 부분이 없네요.

바로 시작하겠습니다.

먼저 설정할 요소들의 HTML 부분입니다.

      <s_sidebar_element>

      <!-- 링크 -->

      <div class="link">

        <h3>링크</h3>

        <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>

      <s_sidebar_element>

      <!-- 방문자수 -->

      <div class="counter">

        <span class="total">Total : [ ##_count_total_##] </span><br/>

        <span class="today">Today : [ ##_count_today_##]</span><br/>

        <span class="yesterday">Yesterday : [ ##_count_yesterday_##]</span>

      </div>

      </s_sidebar_element>

링크와 방문자수 부분을 찾아주시면 되구요.

제 경우 빨간색의 <br/>부분만 추가했습니다.

따로 더이상 볼건 없으니 CSS를 보시죠.

.link {margin-bottom:10px;}

.link > h3 {

text-align:center;

margin-bottom:10px;

color:#fff;

text-shadow:3px 3px 5px #202d44;

}

.link > ul {list-style:none;font-weight:bolder;}

먼저 링크 부분부터 하겠습니다.

다른 모듈들 처럼 margin-bottom:10px을 주고, 다음 모듈과의 거리를 줍니다.

.link > h3 부분도 다른 부분과 같구요.

.link > ul 부분은 먼저 list-style:none으로 스타일을 없애주고, font-weight:bolder로 굵게 나타냈습니다.

링크는 이 정도로 끝냈습니다.

.counter {

border:2px solid #fff;

padding:10px;

font-weight:bolder;

font-size:13px;

margin-bottom:10px;

}

다음은 카운터네요.

.counter에 border 속성을 줘서 테두리 선을 만들었구요.

padding을 10px 줘서 선과 글자 사이에 간격을 줬습니다.

font-weight는 당연히 굵게.

글자는 너무 커서 13px, 그리고 다음 모듈과의 거리를 유지하기 위한 margin-bottom 값을 줬네요.

대부분 이전에도 봤던 속성들이죠?

오늘은 정말 간단하게 끝나네요;;

이 다음 포스팅에서 알아볼 모듈은 달력,

이 달력이 사이드바에서는 마지막이네요.

물론 배너모듈, RSS Feed 같은건 남아있지만 이미지가 없기 때문에 이해 부탁드릴께요.

배너모듈 같은 경우 /images/rss.gif 의 이미지 경로만 선택해주시면 됩니다.

혹시라도 어려운점이 있으시다면 댓글에 남겨주세요^^