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

2014.02.11 10:05
저자 : Kurien

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



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

바로 시작하겠습니다.



먼저 설정할 요소들의 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 의 이미지 경로만 선택해주시면 됩니다.


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

  1. 쉼표찍기 2014.08.11 18:37 신고  댓글주소  수정/삭제  댓글쓰기

    카운터 만들면서 그래프 넣으려고 아래 내용을 사이드바 html배너출력하기로 작업했어요.
    그런데 숫자가 안나와요. skin과 style을 몰라서 했는데 ...한번 봐주실래요? http://dallante.tistory.com/


    @는 #이에요.
    -------------------------------------------------------------------
    <h3></h3>
    <table align=leftr style="margin:0px 0px 0px 0px;">
    <tr><td align=left style="border:1px solid gray; padding:5px 5px 5px; 5px;">
    <div class='module module_plugin'>
    <div style="overflow:hidden; width:290px;text-align:lift;" >
    <img src="/plugins/StatGraph/count/count.php?owner=6자리숫자" alt="Statistics Graph" title="Blog Visitors" />
    <ul style="padding-left:20px">
    <li>Total : [#@_count_total_@#]</li>
    <li>Today : [#@_count_today_@#]</li>
    <li>Yesterday : [#@_count_yesterday_@#]</li>
    </ul>
    </div></div>
    </td></tr></table>

    • Kurien 2014.08.11 22:59 신고  댓글주소  수정/삭제

      아마도 html 배너 출력하기로 만드셔서 그런 것 같네요.
      거기서는 [#@_count_total_@#]같은게 정상 작동 안할 때가 많습니다.
      http://www.tistory.com/guide/skin/step3#3-13 여기 나와있는 것 처럼 하시고 사이에 적으신 부분을 넣으시면 될 것 같네요.

  2. 2014.08.11 19:29  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  3. 바라크릴리언트 2014.08.13 19:53 신고  댓글주소  수정/삭제  댓글쓰기

    어재 방문자를 없에려고하는데
    <span class="yesterday">Yesterday : [ ##_count_yesterday_##]</span>
    이부분만 없에면되나요?